标签：canvas const height react width signature import

基于移动端需要扫码签名的功能，这里记录一下。

1、使用 react-signature-canvas 插件，npm i react-signature-canvas --save

2、此功能签名后生成的图片是base64格式，如需其他格式，可参考文档修改

3、封装的组件代码

import { SignatureCanvasWrapper } from './style';
import React, {
  useState,
  useRef,
  useImperativeHandle,
  forwardRef,
  useEffect,
} from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { useSize } from 'ahooks';

interface IProps {
  width?: string;
  height?: string;
  imageWidth?: number; // 签名图片的宽高
  imageHeight?: number;  
  rotated?: boolean;  // 移动端横屏签名
  signMess?: string;
  renderContent: (e?) => void; // 生成的图片
}
// 签名 组件
function SignatureCanvasComponent(props: IProps, ref) {
  const {
    renderContent,
    width,
    signMess,
    imageWidth,
    imageHeight,
    rotated,
    height,
  } = props;

  const [signTip, setSignTip] = useState(signMess || '请在此区域签署本人姓名');
  const sigCanvasRef = useRef<SignatureCanvas | null>(null);
  const canvasContainer = useRef<HTMLDivElement>(null);
  const size = useSize(canvasContainer);

  useImperativeHandle(ref, () => ({
    clearSign,
  }));

  // 重签
  const clearSign = () => {
    sigCanvasRef.current.clear();
  };

  useEffect(() => {
    if (rotated && size?.height) {
      var canvas = document.querySelector('#sigCanvas') as HTMLCanvasElement;
      if (canvas) {
        var ctx = canvas.getContext('2d');
        if (ctx) {
          ctx.rotate(1.5 * Math.PI);
          ctx.translate(-canvas!.height, 0);
        }
      }
    }
  }, [rotated, size]);

  return (
    <SignatureCanvasWrapper ref={canvasContainer}>
      <SignatureCanvas
        penColor="#000"  // 笔刷颜色
        minWidth={3}  、、 笔刷粗细
        maxWidth={5}
        canvasProps={{
          id: 'sigCanvas',
          width: size.width,
          height: size.height,  // 画布尺寸
          className: 'LegalRisk-signature',
        }}  
        ref={sigCanvasRef}
        onBegin={() => setSignTip('')}
        onEnd={() => {
          // 图片
          const trimedCanvas: HTMLCanvasElement = sigCanvasRef.current.getTrimmedCanvas();
          if (trimedCanvas) {
            var resizedCanvas = document.createElement('canvas');
            var resizedContext = resizedCanvas.getContext('2d');

            resizedCanvas.height = imageHeight || 50;  // 传给后台的图片尺寸
            resizedCanvas.width = imageWidth || 100;

            resizedContext?.drawImage(
              trimedCanvas,
              0,
              0,
              imageWidth || 100,
              imageHeight || 50,
            );
            var myResizedData = resizedCanvas.toDataURL();
            console.log('签名图片：', myResizedData);
            renderContent(myResizedData);
          }
        }}
      />

      {signTip && <div className="SignatureTips">{signTip}</div>}
    </SignatureCanvasWrapper>
  );
}

export default forwardRef(SignatureCanvasComponent);

4、在使用的页面：

   <SignatureCanvasComponent
       ref={childRef}
       renderContent={e => {
       // 暂存
       setSign(e);
      }}
  ></SignatureCanvasComponent>

5、样式代码(style.ts)

import styled from 'styled-components/macro';
export const mainColor = '#286bff';

export const SignatureCanvasWrapper = styled.div`
  width: 100%;
  position: relative;
  .LegalRisk-signature {
    width: 100%;
    border-radius: 10px;
    background: #f5f7fe;
    border: 2px dashed ${mainColor};
  }
  .SignatureTips {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #a2a0a8;
    font-weight: regular;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
`;

标签：canvas,const,height,react,width,signature,import
来源： https://www.cnblogs.com/shyhuahua/p/16546452.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。