javascript - 无法在 react 中从 react 签名 Canvas 生成base64字符串

Question

我正在开发一个用于获取用户签名的 react 项目。我正在使用 react-signature-canvas 来签署用户。我希望签名数据保存在后端。那么如何将签名 Canvas 更改为base64字符串呢？这是我的代码。

import React, { useRef, useState } from "react";
import SignaturePad from "react-signature-canvas";
import offer from "./assets/offer.PNG";

const Signature = () => {
  let signPad = useRef({});
  let data = "";
  const clear = () => {
    signPad.current.clear();
  };
  const save = () => {
    data = signPad.current.toDataURL();
  };
  const show = () => {
    signPad.current.fromDataURL(data);
  };
  const imageString = ""; //I want to store it here
  return (
    <div className="p-10 flex flex-col space-y-24 font-serif justify-center items-center">
      <div className="  w-56 mt-10   ">
        <p className="flex justify-start items-start -mx-36">Your Signature</p>
        <div className="flex justify-center items-center">
          <SignaturePad
            canvasProps={{ widtd: 500, height: 200, className: "sigCanvas" }}
            className="border-2 border-black "
            ref={signPad}
          />
        </div>
      </div>
      <div className="flex space-x-4 -mt-24">
        {" "}
        <button onClick={clear}>Clear</button>
        <button onClick={save}>Save</button>
        <button onClick={show}>Show</button>
      </div>
    </div>
  );
};

export default Signature;

谁能帮我将签名 Canvas 更改为base64字符串？

Answer 1

看来您的设置已经基本正确了。您的保存函数使用signPad应该可以让您访问底层 Canvas 的引用，但由于某种原因您正在调用 toDataURL名为 current 的子对象上的方法 Canvas 引用。

尝试将保存函数的内容更改为以下内容，并检查控制台是否有 Base64 字符串输出:

console.log(signPad.toDataURL());