我想在上传图片时,给图片加上水印。目前的方法是本地上传图片,获取图片数组。然后循环这个数组,利用canvas给每张图片加上水印。最后获得加上水印的图片数组。
但是在循环时发现ctx.draw()方法只执行一次。是什么情况
以下是我的代码
this.getImage().then(res=>{
return new Promise((resolve, reject) => {
for (let item of res) {
console.log(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, () => {
debugger;
console.log('获取循环路径');
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res) => {
console.log('canvas循环');
that.imgRmarkList.push(res.tempFilePath);
},
fail: (e) => {
reject(e);
console.log(e)
}
})
})
}
})
resolve(that.imgRmarkList);
}
})
})
1 个回复
蹦豆儿
canvasid是惟一的,你循环的时候只循环了一个canvas~