微信小程序对上传的图片加水印

二. js部分

data:{
fileList: [],
fileListVideo: [],
accept:’video’,//上传内容格式，video
canvasId:[],//动态生成canvs
},

/图片上传/
afterRead(event){//图片上传
varthat=this
const{file}=event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
for(leti=0;ithat.data.fileList.push({url:event.detail.file[i].url, id:0})
let indexCan=i+’oi’ //在合成图片时canvasId必须是字符串
that.data.canvasId.push(indexCan)
console.log(that.data.canvasId)
that.setData({ fileList:that.data.fileList, canvasId:that.data.canvasId});
wx.getImageInfo({
src:event.detail.file[i].url,
success:(ress)=>{
that.waterMark(ress,event.detail.file[i].url,i+’oi’)
}
})
}
},
/制作水印并生成图片保存到手机/
waterMark(imgInfo,imgSrc,canvasId){//imgInfo图片信息，imgSrc图片路径
varthat=this
letdate=”水印内容”;//作为水印
letctx=wx.createCanvasContext(canvasId) //创建画布
lettextToWidth=imgInfo.width/30.5//这里设置的是水印位置
lettextToHeight=imgInfo.height/3*0.9
that.setData({
canvasHeight:imgInfo.height,//画布大小，除以三是变小处理快，自行修改
canvasWidth:imgInfo.width
})
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(imgSrc,0,0,imgInfo.width,imgInfo.height)
//将声明的时间放入canvas
ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle(‘blue’)
ctx.fillText(date,textToWidth,textToHeight) //水印内容，位置
// ctx.strokeText(date, ress.width, ress.height)
wx.showLoading({
title:’制作水印中…’,
})
ctx.draw(false,()=>{//开始制作
setTimeout(()=>{//使用定时是因为制作水印需要时间，设置定时才不会出bug
wx.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
canvasId:canvasId,//这里的canvsId只能是字符串类型
success:(res)=>{
wx.hideLoading()
wx.saveImageToPhotosAlbum({//保存到手机
filePath:res.tempFilePath,
success(res){
console.log(‘1’)
}
})
}
})
},500)
})
},