最近遇到一个需求,签合同的时候在移动端上客户要手写签名,然后把签名生成的图片传给后端,技术栈react
步骤一:基础实现代码如下
技术点大致解析:
1.document.querySelector('canvas').toDataURL() , 提交的时候把签名过的canvas转成base64格式转给后端。
2. e.touches[0].pageX 、e.touches[0].pageY 获取当前手指触电坐标。
但到这一步后,出现的问题如下,此时的canvas是默认的宽高 width:300,height: 150,如果想要按照设计稿自定义宽高,则手指触点的位置失效。
解决方法:后来百度了一下,在js里面设置
不用写单位,默认px
2. 清空canvas的内容
调用.clearRect方法~四个参数(x起始坐标,y起始坐标,消除的宽度,消除的高度)
3. 判断canvas内容是否为空(建一个空白的canvas对比一下,空返回true,不空返回false)