请问后来你怎么实现的,我也出现了一样的问题
循环使用ctx.draw()出现空白图片, d单张图片处理能正常处理,为什么多张循环就会出现空白?在循环使用canvas 的ctx.draw 绘图时,canvasToTempFilePath 能成功获取到图片路径,但是<canvas>却显示空白图片 [图片] //wxml <canvas canvas-id="photoCanvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas> //js takePhoto() { var self = this; wx.chooseImage({ success: (res) => { for(var index in res.tempFilePaths){ wx.getImageInfo({ src: res.tempFilePaths[index], success:(res) =>{ if(res.width > 1024 || res.height > 768){ self.compressImages(res); }else{ self.data.images.push(res.path); self.data.files.push(res.path); self.setData({ images: self.data.images, files: self.data.files }); } }, fail:(err) =>{ console.log(err); } }) } } }) }, compressImages(res) { var self = this; var ratio = 2; var canvasWidth = res.width //图片原始长宽 var canvasHeight = res.height while (canvasWidth > 1024 || canvasHeight > 768){// 保证宽高在400以内 canvasWidth = Math.trunc(res.width / ratio) canvasHeight = Math.trunc(res.height / ratio) ratio++; } //----------绘制图形并取出图片路径-------------- self.setData({ cWidth: canvasWidth, cHeight: canvasHeight }); var ctx = wx.createCanvasContext('photoCanvas') ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight) setTimeout(function () { ctx.draw(false, function(){ wx.showLoading({ title: '努力生成中...' }); wx.canvasToTempFilePath({ x:0, y:0, canvasId: 'photoCanvas', success: function (res) { console.log(res);//最终图片路径 self.data.images.push(res.tempFilePath); self.data.files.push(res.tempFilePath); self.setData({ images: self.data.images, files: self.data.files }); console.log(self.data.files); wx.hideLoading(); }, fail: function (res) { console.log(res.errMsg) } }) }) },500) //留一定的时间绘制canvas },
2020-10-13