vue3.2+js，web端canvas实现手写签名

1.创建一个canvas

<template><div><canvas id="canvas" height="300" width="300" class="canvas"></canvas><div class="btn"><el-button type="primary" plain @click="handleClear">清空</el-button><el-button type="primary" @click="handleSave">保存</el-button></div></div>
</template>

2.创建一些需要编辑的变量

     const startText = ref(false)let routeList = reactive([])let context = ref()let ctx = reactive()

3.挂载canvas签名时的函数

nextTick(() => {ctx = document.getElementById('canvas')context.value = ctx.getContext('2d')ctx.addEventListener('mousedown', (e) => {startText.value = !startText.valuecontext.value.beginPath()routeList.push({x: e.offsetX,y: e.offsetY,})})ctx.addEventListener('mousemove', (e) => {if(startText.value && routeList.length === 1) {routeList.push({x: e.offsetX,y: e.offsetY,})const line = routeList.splice(0 ,1)context.value.lineTo(line[0].x, line[0].y)context.value.stroke()context.value.save()}})ctx.addEventListener('mouseup', (e) => {startText.value = !startText.valuerouteList = []})context.value.lineWidth = 3context.value.lineWidth='#000'context.value.stroke()})

4.清空与下载的函数

function handleClear() {context.value.clearRect(0, 0, 300, 300)}function handleSave() {var link = document.createElement('a')var imgData =ctx.toDataURL({format: 'png', quality:1, width:300, height:300})var blob = dataURLtoBlob(imgData)var objurl = URL.createObjectURL(blob)link.download = 'grid1.png'link.href = objurllink.click()}function  dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)while(n--){u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], {type:mime})}

5.朴实无华的样式

<style lang="less" scoped>.canvas{background-color: #aaa;}.btn{width: 300px;display: flex;justify-content: center;}
</style>

6.整体

<template><div><canvas id="canvas" height="300" width="300" class="canvas"></canvas><div class="btn"><el-button type="primary" plain @click="handleClear">清空</el-button><el-button type="primary" @click="handleSave">保存</el-button></div></div>
</template><script setup>import { nextTick, reactive, ref } from 'vue'const startText = ref(false)let routeList = reactive([])let context = ref()let ctx = reactive()nextTick(() => {ctx = document.getElementById('canvas')context.value = ctx.getContext('2d')ctx.addEventListener('mousedown', (e) => {startText.value = !startText.valuecontext.value.beginPath()routeList.push({x: e.offsetX,y: e.offsetY,})})ctx.addEventListener('mousemove', (e) => {if(startText.value && routeList.length === 1) {routeList.push({x: e.offsetX,y: e.offsetY,})const line = routeList.splice(0 ,1)context.value.lineTo(line[0].x, line[0].y)context.value.stroke()context.value.save()}})ctx.addEventListener('mouseup', (e) => {startText.value = !startText.valuerouteList = []})context.value.lineWidth = 3context.value.lineWidth='#000'context.value.stroke()})function handleClear() {context.value.clearRect(0, 0, 300, 300)}function handleSave() {var link = document.createElement('a')var imgData =ctx.toDataURL({format: 'png', quality:1, width:300, height:300})var blob = dataURLtoBlob(imgData)var objurl = URL.createObjectURL(blob)link.download = 'grid1.png'link.href = objurllink.click()}function  dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)while(n--){u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], {type:mime})}
</script><style lang="less" scoped>.canvas{background-color: #aaa;}.btn{width: 300px;display: flex;justify-content: center;}
</style>

最后就是这样了

写的比较简单，算是一气呵成，有bug，如果你用到了并且还存在问题，请发我我再努力修改，谢谢。

vue3.2+js，web端canvas实现手写签名相关推荐

微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
canvas实现手写签名
使用canvas实现手写签名,效果如下 PC端 // 实现canvas签名var canvas = document.getElementById('canvas');var ctx = canvas ...
微信 html5 识别手写签名,html5 canvas做手写签名,该如何解决
html5 canvas做手写签名我用HTML5做了一个手写签名,运行在手机浏览器上,但是画出来效果总是很粗糙,曲线不够平滑,想找大侠指教 HTML> PhoneGap 浏览器不支持canva ...
微信小程序使用 canvas 实现手写签名
在使用微信小程序开发中,有的需求场景中会需要用户手写签名.或者绘制一些路径,通常会使用 canvas 来实现这种需求在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法,在文档中 ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
手机手写签名 php,基于canvas实现手写签名（vue）
最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstar ...
用canvas实现手写签名功能
更多文章最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器. 这样的需求用 canvas 实现是最好的. 需要用到 canvas 的以下 ...
vue移动端横屏手写签名
最近项目组要求做一个移动端手写签名的组件,效果图如下去查了很多资料,也借鉴了很多别人写好的例子,最终完成,记录一下因为需要横屏签名,所以有监听手机屏幕,如果是手机屏幕锁定的情况下就通过代码旋转页面 ...

vue3.2+js，web端canvas实现手写签名

vue3.2+js，web端canvas实现手写签名相关推荐

最新文章

热门文章