[图片]

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、大佬们有什么图片旋转、裁剪、涂鸦的插件或者模板么？ 各位大佬帮帮忙，谢谢了！

ctx.draw(false, () => { wx.showToast({ title:'正在生成海报', icon:'loading' }) wx.canvasToTempFilePath({ canvasId: 'ctx', success(res) { console.log(res.tempFilePath) _this.setData({ posterUrl: res.tempFilePath }) wx.hideToast(); }, fail(m) { console.log(m); } }) }); 安卓真机调试： [图片]

上面这张图是canvas , 下面是生成出来的。下面这张图很模糊。   setTimeout(() => {        this.cancelChooes();        const systemInfo = wx.getSystemInfoSync();        let pixelRatio = systemInfo.pixelRatio;        console.log("设备像素比--->" + this.screenWidth);        console.log("设备像素比2--->" + pixelRatio);        this.draw(this.localImg).then(() => {          wx.canvasToTempFilePath({            x: 0,            y: 0,            width: this.screenWidth,            height: this.screenWidth,            destWidth: this.screenWidth * pixelRatio,            destHeight: this.screenWidth * pixelRatio,            canvasId: "canvas",            fileType: "jpg",            quality: 1,            success: async res => {              let img = await uploadImg(res.tempFilePath);              this.previewImg = img;              console.log("导出图片：" + img);            }          });        });        wx.hideLoading();      }, 1000); [图片]