react 移動端簽名實現

繪圖簽名實現

導入插件

import CanvasDraw from 'react-canvas-draw'

使用組件

const signCanvas = React.createRef()

清空畫布

const clear = () => {

    signCanvas.current.clear()

    setIsSignState(false)

  }

得到簽名並轉化為圖片

const imgUrl = signCanvas.current.canvas.drawing.toDataURL('image/png')

設置簽名組件的屬性

 <div className='canvas-area '>
        //簽名框
        <CanvasDraw
          className='sign-canvas'
          ref={signCanvas}
          brushColor='#000'
          gridColor='transparent'
          brushRadius={3}
          lazyRadius={0}
          canvasWidth={'100%'}
          canvasHeight={'100%'}
          hideInterface
          onChange={() => setIsSignState(true)}
        />
        //clear按鈕
        <Button className='clear-button' onClick={clear}>
          clear
        </Button>
      </div>

實現效果：