小程序应用 canvas 给图片增加水印

操作 canvas 相干的 api 应用的是微信最新提供的 (一路过去踩了好多坑...)

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

效果图

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

WXML

<view class="container">  <button bindtap="chooseImages">抉择图片</button>  <view>    <image src="{{imgsrc}}" mode="aspectFit" bindtap="prevImage"></image>  </view></view><canvas style="position:fixed;top: 0;left: -100%" type="2d" id="Canvas"></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 = 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链接列表    })  }})

有问题能够评论区或者私信探讨哈