Canvas implémente nativement la signature mobile des pages Web frontales

Cet article vous présente l'article sur l'implémentation native du canevas de la signature mobile de page Web frontale. Il convient à n'importe quel framework tel que vue.js React. J'espère qu'il pourra aider les amis. dans le besoin.

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()
})

Générer des images

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

Si vous devez l'envoyer au backend, vous pouvez laisser le backend prendre en charge base64 ou blob, buffer

Recommandations associées :

Utilisation des nouvelles fonctionnalités de h5 : Écoute de la touche retour fournie avec l'application

Comment mettre en œuvre le positionnement de la ville sur le terminal mobile et code adcode de l'indicatif régional de la ville

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!