时间戳

首页 > 解决方案 > 在 react-canvas-draw 中绘制到图像库 64

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

问题描述

我想将我在 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>
  );
}

标签： reactjshtml5-canvasbase64

解决方案

使用函数 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} alt="exported drawing" />
      <CanvasDraw
        lazyRadius={0}
        brushRadius={2}
        canvasWidth={"339px"}
        canvasHeight={"486px"}
        ref={canvasRef}
      />
    </div>
  );
}

推荐阅读