1、图片旋转之后，进行裁剪，把图片画到canvas上之后生成图片

wx.canvasToTempFilePath，返回的图片打开是透明的。

若把图片格式改为jpg，在开发工具上为白色实底区块，在真机上为黑色区块。

代码：

```

        /**

* 把图片绘制到canvas上

* @param [Boolean] isOnload 是否是在刚加载阶段，

* @param [String]  imageSrc 背景图片的路径

* @param [Number]  width    图片在canvas上的宽度

* @param [Number]  height   图片在canvas上的高度

* @param [Number]  turnNum  图片旋转的次数（1：90度；2:180；0：原位置）

*/

drawImg: function (isOnload,imageSrc, w , h,turnNum) {

const ctx = wx.createCanvasContext(‘canvasIn’, this);

let yuandian ,yuandian1, yuandian2, w1,h1;

let {imageInfo,testSrc} = this.data;

// 旋转原点配置

yuandian = [

[0,0],

[imageInfo.height,0],

[imageInfo.width,imageInfo.height],

[0,imageInfo.width]

];

if (turnNum % 2 == 0) {

w1 = imageInfo.width;

h1 = imageInfo.height;

} else {

w1 = imageInfo.height;

h1 = imageInfo.width;

}

this.setData({

turnNum: turnNum,

imageInfo: {

width: w1,

height: h1,

}

})

 

ctx.translate(yuandian[turnNum][0], yuandian[turnNum][1]);

// 旋转度数

ctx.rotate(turnNum * 90 * Math.PI / 180);

ctx.drawImage(imageSrc, 0, 0,w,h);

let _this = this;

let timer = setTimeout(function(){

ctx.draw(false, wx.canvasToTempFilePath({

x: w / 2,

y: h / 2,

width: w,

height: h,

destWidth: w,

destHeight: h,

canvasId: ‘canvasIn’,

success: function (res) {

var tempFilePath = res.tempFilePath;

console.log(‘图片路径—’,tempFilePath)

// wx.uploadFile()将图片传到服务端

_this.setData({

testSrc: tempFilePath

})

},

fail: function (res) {

console.log(res);

}

}));

// clearTimeout(timer);

},1000);

// ctx.draw();

if (isOnload) this.context = ctx;

},

    

```

2、大佬们有什么图片旋转、裁剪、涂鸦的插件或者模板么？

各位大佬帮帮忙，谢谢了！