今天遇到一个很有意思的问题,在开发电子签名的时候,生成的图片角度有问题,需要进行旋转。然而js里并没有旋转图片的api,所以突发奇想把canvas生成的图片再插入进一个新的canvas容器进行编辑旋转,来实现一样的效果。
代码如下
js
//旋转图片,生成新canvas实例
rotate(cb){
const that = this;
wx.createSelectorQuery().select('#handWriting2')
.fields({ node: true, size: true })
.exec((res) => {
const rotateCanvas = res[0].node;
const rotateCtx = rotateCanvas.getContext('2d');
//this.ctxW-->所绘制canvas的width
//this.ctxH -->所绘制canvas的height
rotateCanvas.width = this.ctxH;
rotateCanvas.height = this.ctxW;
wx.canvasToTempFilePath({
canvas:that.canvas,
success(res) {
that.tempFilePath = res.tempFilePath;
const img = rotateCanvas.createImage();
img.src = res.tempFilePath;
img.onload = function () {