移动端手写签名

最新推荐文章于 2024-07-22 10:07:33 发布

WwangXue

最新推荐文章于 2024-07-22 10:07:33 发布

阅读量4.5k

点赞数

分类专栏：移动端 vue

本文链接：https://blog.youkuaiyun.com/WwangXue/article/details/103072563

版权

本文介绍了在钉钉环境中，使用canvas实现移动端横屏签名的功能。通过旋转按钮实现模拟横屏，签名后保存时，需要对canvas进行旋转处理，以获取横向图片。通过创建新的canvas，将原有签名图片旋转90度，得到正确方向的签名图片，达到上传要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在钉钉环境钉钉浏览器中实现签名，模拟横屏签名

签字板使用的canvas，右侧按钮部分是旋转摆放到该位置的；

canvas看起来像是旋转过的，实际画布未旋转，只有操作按钮进行了旋转

存储canvas的时候需要存储横向的图片，此时需要做处理

思路：新建一个画布将画布旋转90度，将已有画布生成的图片放到新画布上，具体实现

                            // 新Canvas画布 添加图片
                            var imgnew = that.$refs.canvasRotate;
                            imgnew.height =
                                that.$refs.canvasHW.offsetWidth - 60;
                            imgnew.width = that.$refs.canvasHW.offsetHeight - 2;
                            var ctxNew = that.$refs.canvasRotate.getContext(
                                '2d'
                            );
                            ctxNew.fillStyle = '#ff

最低0.47元/天解锁文章