diff --git a/README.md b/README.md index 7a184917..40e64a21 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,9 @@ draw.download('svg') draw.download('png') draw.download('jpg') +// Get base64 string +draw.getBase64() + // Undo drawing. draw.undo() diff --git a/src/useDrawing.ts b/src/useDrawing.ts index e947a1d8..3442dc64 100644 --- a/src/useDrawing.ts +++ b/src/useDrawing.ts @@ -13,6 +13,7 @@ interface UseSvgDrawing { changeCurve: (penwidth: DrawingOption['curve']) => void getSvgXML: () => string | null download: (ext: 'svg' | 'png' | 'jpg') => void + getBase64: () => string | undefined } export const useSvgDrawing = ( option?: Partial @@ -27,6 +28,10 @@ export const useSvgDrawing = ( if (!drawingRef.current) return drawingRef.current.download(ext) }, []) + const getBase64 = useCallback(() => { + if (!drawingRef.current) return + return drawingRef.current.toBase64() + }, []) const changePenColor = useCallback((param: DrawingOption['penColor']) => { if (!drawingRef.current || !param) return drawingRef.current.penColor = param @@ -80,7 +85,8 @@ export const useSvgDrawing = ( clear, undo, getSvgXML, - download + download, + getBase64 } ] }