循环使用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
},