【uniapp】微信小程序canvas签名旋转生成图片

用uniapp开发微信小程序过程中，遇到有审批签名的需求，签名的代码网上还是比较多的，插件市场上大神们比比皆是不再赘述，但遇到一个小细节导致同事有被难倒，无奈咨询于我，细节就是如何把绘制的canvas旋转个角度再生成图片。

如果只为结论，下面都可以不用看了：旋转图片让后端做，是最快的最方便的（毕竟java有现成工具类），如果真有这种实际业务就交给他们吧不用不好意思，而且后端能做的更多，比如通过色差工具不允许保存空面板等。

但是，套用钱老——“后端能搞的，前端为啥不能搞，前端难道比人家矮一截？”的精神（某些方面实际不止矮一截【狗头】），我们还是要通过研究和实现来增加我们自身的职业自信的，前端已经不是以前的“切图仔”啦。

那么如何解决呢？且看下面的思路。

先描述下具体的背景：

        1.审批签名需要用户在一张空白画布上通过手指触碰屏幕并滑动的方式“写字”，完成后保存成一张图片，达到电子签名的目的。

        2.在页面中放置一个canvas标签，设置滑动事件，点击保存时调用uni.canvasToTempFilePath生成临时图片地址，再通过uni.uploadFile上传到后台，就此即可将用户手写的内容生成图片并保存在服务器了。

但是！一般的签名是需要用户横屏手写的，但对手机来说实际是竖着写的，保存的图片也是按手机（竖长型）的样子来的，在pc端展示的话需要用css旋转才行，但若有后台生成pdf此类需求的话，那就不好去旋转图片了，为了一劳永逸还得从生成的源头控制才行。

解决思路1：在保存的事件中去旋转canvas

canvas的上下文是提供旋转函数的canvasContext.rotate，但在实际过程中旋转没效果，而且假若成功，对用户体验也不好，放弃。

解决思路2：再添加一个“隐藏”的canvas，当画好后，在保存事件中动态将签名canvas的内容旋转复制到“隐藏”的canvas中，再将后者的内容生成图片上传，便能曲线实现我们的需求。

这个思路也是官方提供的，详见 canvas绘制好怎么旋转？ | 微信开放社区

用代码说话

代码重点：

 

 看看具体效果吧：

随便画一个，只有点击保存，再去同步第二个canvas，此时是没点确定的状态。

 

 点击确认，可以看到内容就生成好啦。

 这样，就能前端实现canvas的旋转上传啦。

后续：

实际测试过程中，会有画布大小的兼容性问题，具体表现为，在代码里设置的画布背景是白色，在某些屏宽（宽高比比iphone7还大）的iphone上，生成的图片可能会存在右侧一竖列区域（如果没做旋转处理实际上是图片的底部区域）是透明的情况，用图片指示一下。

 可能是由于ctx.clearRect，ctx.rect填充区域同事给写死，或是填充高度和画布高度不一致？，或canvas自己问题，建议在这里就不要动态的获取canvas宽高去动态填充指定范围的颜色了，暴力一点，直接填充2000大小区域，类似于this.ctx.clearRect(0, 0, 2000, 2000)，this.ctx.rect(0, 0, 2000, 2000)，省时省力哈哈。

参考资料（资料2仅提供思路，没实现出来）：

canvas绘制好怎么旋转？ | 微信开放社区

微信小程序 图片旋转后上传_big_badwolf的博客-CSDN博客_微信小程序旋转图片后上传