代码之家 › 专栏 › 技术社区 › Tesh Aych

无法在react中从react签名画布生成base64字符串

canvas reactjs javascript

Tesh Aych · 技术社区 · 2 年前

我正在做一个从用户那里获取签名的react项目。我正在使用 react-signature-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;

有人能帮我把签名画布改成base64字符串吗?