云淡风轻gfg
云淡风轻gfg
  • 发布:2020-04-29 10:58
  • 更新:2020-12-28 09:04
  • 阅读:1888

canvas的draw方法在循环里为啥只执行一次

分类:uni-app

我想在上传图片时,给图片加上水印。目前的方法是本地上传图片,获取图片数组。然后循环这个数组,利用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);  
            }  
        })  
    })
2020-04-29 10:58 负责人:无 分享
已邀请:
蹦豆儿

蹦豆儿

canvasid是惟一的,你循环的时候只循环了一个canvas~

该问题目前已经被锁定, 无法添加新回复