我想在上传图片时，给图片加上水印。目前的方法是本地上传图片，获取图片数组。然后循环这个数组，利用canvas给每张图片加上水印。最后获得加上水印的图片数组。
但是在循环时发现ctx.draw()方法只执行一次。是什么情况
相关问题
相关文档
- Canvas.getContext: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#参数: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#功能描述: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#返回值: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.requestAnimationFrame: 小程序/开发/API/画布/Canvas/Canvas.requestAnimationFrame
你不亮代码，鬼知道什么情况。
提醒下，draw的并发性能很差，最好是一张一张递归来执行，打完一张水印再打另一张。
然后可以用新的canvas 2D接口，ctx.drawImage，老接口不再维护了。
return new Promise((resolve, reject) => {
res.map((item)=>{
uni.getImageInfo({
src: item,
success: (ress) => {
this.nowTime = formatDate(new Date())
let ctx = uni.createCanvasContext('firstCanvas');
let width = ress.width;
let height = ress.height;
let ratio = width/height;
let screenWidth = uni.getSystemInfoSync().windowWidth;
let screenHeight = uni.getSystemInfoSync().windowHeight;
if(ratio>=1){
width = width>screenWidth ? screenWidth : width;
height = parseInt(width/ratio)
}else{
height = height>screenHeight ? screenHeight : height;
width = parseInt(height*ratio)
}
that.canvasWidth = width;
that.canvasHeight = height;
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(item, 0, 0, width, height)
//将声明的时间放入canvas
ctx.setFontSize(12) //注意：设置文字大小必须放在填充文字之前，否则不生效
//设置字体颜色
ctx.setFillStyle('#fa436a')
ctx.fillText(`员工：${this.userInfo.user}`, 10, 20);
ctx.fillText(`时间：${this.nowTime}`, 10, 40);
console.log('canvas循环前');
console.log(ctx);
ctx.draw(false, function() {
debugger;
console.log('获取循环路径');
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (resss) => {
that.imgRmarkList.push(resss.tempFilePath);
},
fail: (e) => {
reject(e);
console.log(e)
}
})
})
}
})
resolve(that.imgRmarkList);
})
})
})