Draw in react-canvas-draw to image base 64


I would to pass my draw in react-canvas-draw to image in base 64,
I have thought of:

var imgData = canvas.toDataURL();

but since it is a library ( React-Canvas-Draw, https://www.npmjs.com/package/react-canvas-draw ) what I am using I do not know very well how to implement it.

The library has the getSaveData method but it only serves to restore the data in their components.

getSaveData() returns the drawing’s save-data as a stringified object

I would appreciate any guidance, thank you very much!

CODESANDBOX: https://codesandbox.io/s/fragrant-firefly-5e56r?file=/src/App.js:0-544

import "./styles.css";
import { useRef } from 'react'
import CanvasDraw from "react-canvas-draw";

export default function App() {

const canvasRef = useRef(null)

const Draw = canvasRef.current;  



 const handleChange =()=> {

  const data = Draw.getSaveData();
  console.log('Draw', Draw)
  console.log('data', data)
  
 }


  return (
    <div className="App">
      <h1>React-Canvas-Draw</h1>
      <h2>Save draw to image base 64!</h2>

      <CanvasDraw 
       ref={ canvasRef }
       onChange={ handleChange }
      />

    </div>
  );
}

Source: React – Stack Overflow

September 9, 2021
Category : News
Tags: base64 | html5-canvas | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.