Canvas natively implements front-end web page mobile signature

This article introduces you to the article about the canvas native implementation of front-end web mobile signature. It is suitable for any framework such as vue.js react. It has a good reference value. I hope it can help friends in need.

let c = document.getElementById("canvas")
let canvas = document.createElement("canvas")
let availHeight = document.documentElement.clientHeight
let off = availHeight - 400
canvas.height = '350'
canvas.width = c.clientWidth
c.appendChild(canvas)
let dr = canvas.getContext('2d')
dr.strokeStyle = 'blue'
canvas.addEventListener('touchstart',(e)=>{
  dr.beginPath()
  dr.moveTo(e.changedTouches["0"].pageX,e.changedTouches["0"].pageY-off)
})
canvas.addEventListener('touchmove',(e)=>{
  dr.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY-off)
  dr.stroke()
})
canvas.addEventListener('touchend',(e)=>{
  dr.closePath()
})

Generate pictures

let img = document.querySelector('canvas').toDataURL()

If you need to send it to the backend, you can let the backend support base64 or blob, buffer

Related recommendations:

Usage of h5’s new features: Listening to the return key that comes with the App

How to implement city positioning on the mobile terminal and city area code adcode

The above is the detailed content of Canvas natively implements front-end web page mobile signature. For more information, please follow other related articles on the PHP Chinese website!