小程序使用 canvas 给图片添加水印前端

小程序使用 canvas 给图片添加水印操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑...)

浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效果, 后看代码 (uniapp等框架写法大同小异)

效果图

文章图片

文章图片

代码部分 (没有细分拆开来讲, 但大部分代码都加解释注释了) WXML

【小程序使用 canvas 给图片添加水印】JavaScript

Page({ data: { imgsrc: '', canvas: null, ctx: null, }, // 在页面初次渲染完成生命周期获取操作canvas的上下文对象 onReady() { const query = wx.createSelectorQuery() query.select('#Canvas') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') this.setData({ canvas, ctx }) }) }, // 选择图片 async chooseImages() { const res = await wx.chooseImage({}) const addWatermarkRes = await this.addWatermark(res.tempFilePaths[0]) }, // 添加水印方法 (传入图片地址) addWatermark(tempFilePath) { return new Promise( async (resolve, reject) => { // 获取图片信息 const imgInfo = await wx.getImageInfo({ src: tempFilePath }) // 设置canvas宽高 this.data.canvas.width = imgInfo.width this.data.canvas.height = imgInfo.height // 创建一个图片对象 const image = this.data.canvas.createImage(); image.src = https://www.it610.com/article/tempFilePath; image.onload = () => { // 将图片绘制到canvas上 this.data.ctx.drawImage(image, 0, 0, imgInfo.width, imgInfo.height) // 设置文字字号及字体 this.data.ctx.font = '32px sans-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链接列表 }) } })