小程序使用canvas为图片添加水印。canvas相关的API是微信最新提供的（一路上踩了很多坑。。。）我用微信小程序canvas给图片加简单的水印。废话不多说，先上效果图，后面看代码（uniapp等框架都是这样写的）效果图的代码部分（不做细分拆解，但大部分代码都有解释和注释）WXML选择图片JavaScriptPage({data:{imgsrc:'',canvas:null,ctx:null,},//页面初始渲染完成后获取canvas的context对象onReady(){constquery=wx.createSelectorQuery()query.select('#Canvas').fields({node:true,size:true}).exec((res)=>{constcanvas=res[0].nodeconstctx=canvas.getContext('2d')this.setData({canvas,ctx})})},//选择图片异步chooseImages(){constres=awaitwx.chooseImage({})constaddWatermarkRes=awaitthis.addWatermark(res.tempFilePaths[0])},//添加水印方法（输入图片地址）addWatermark(tempFilePath){returnnewPromise(async(resolve,reject)=>{//获取图片信息constimgInfo=awaitwx.getImageInfo({src:tempFilePath})//设置画布宽高this.data.canvas.width=imgInfo.widththis.data.canvas.height=imgInfo.height//创建图像对象constimage=this.data.canvas.createImage();image.src=tempFilePath;image.onload=()=>{//将图像绘制到画布上this.data.ctx.drawImage(image,0,0,imgInfo.width,imgInfo.height)//设置文字大小和字体this.data.ctx.font='32pxsans-serif'//设置画笔颜色this.data.ctx.fillStyle='rgba(0,0,0,0.3)';//画一个矩形this.data.ctx.fillRect(0,imgInfo.height-40,420,40)//设置画笔颜色this.data.ctx.fillStyle='#ffffff';//填写文字this.data.ctx.fillText('产品名称：巨无霸汉堡；单价：20元',0,imgInfo.height-10)//将canvas转为图片wx.canvasToTempFilePath({canvas:this.data.canvas,success:(res)=>{this.setData({imgsrc:res.tempFilePath})resolve(res.tempFilePath)},})}})},//预览图像prevImage(){wx.previewImage({current:this.data.imgsrc,//当前显示图片的http链接urls:[this.data.imgsrc]//预览图片的http链接列表})}})如果你有有问题欢迎评论或私信讨论
