在 react-canvas-draw 中绘制到图像库 64

Posted 2023-03-25

【中文标题】在 react-canvas-draw 中绘制到图像库 64

【英文标题】：Draw in react-canvas-draw to image base 64

【发布时间】：2021-11-05 21:54:46

【问题描述】：

我会将我在 react-canvas-draw 中的绘图传递给 base 64 中的图像， 我想到了：

var imgData = canvas.toDataURL();

但由于它是一个库（React-Canvas-Draw，https://www.npmjs.com/package/react-canvas-draw），我正在使用我不太了解如何实现它。

该库具有 getSaveData 方法，但它仅用于恢复其组件中的数据。

getSaveData() 将绘图的保存数据作为字符串化对象返回

不胜感激，非常感谢！

CODESANDBOX：https://codesandbox.io/s/jovial-architecture-o4tvz?file=/src/App.js

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>
  );

【参考方案1】：

使用 toDataURL() 函数返回 Base64 数据，可以保存并作为 src 传递给 img 标签（导出的绘图），如下例所示：

CODESANDBOX：https://codesandbox.io/s/competent-nova-7lbbx?file=/src/App.js:0-959

import  useRef, useState  from "react";
import CanvasDraw from "react-canvas-draw";

export default function App() 
  const canvasRef = useRef(null);
  const [drawing, setDrawing] = useState();

  const handleExport = () => 
    const base64 = canvasRef.current.canvasContainer.childNodes[1].toDataURL();
    setDrawing(base64);
  ;

  return (
    <div className="App">
      <h1>React-Canvas-Draw</h1>
      <h2>Save draw to image base 64!</h2>
      <hr />
      <button
        type="button"
        style= backgroundColor: "#0A71F1", color: "white" 
        onClick=handleExport
      >
        Export Drawing
      </button>
      <br />
      <img src=drawing  />
      <CanvasDraw
        lazyRadius=0
        brushRadius=2
        canvasWidth="339px"
        canvasHeight="486px"
        ref=canvasRef
      />
    </div>
  );

【讨论】：

感谢您的宝贵时间，致以最诚挚的问候。