【uniapp】图片添加canvas水印

需求&背景

需求：拍照后给图片添加水印, 水印包含经纬度、用户信息、公司logo等信息。
效果图：

方案：使用canvas添加水印。
具体实现：上传图片组件是项目里现有的，主要还是使用uni.chooseImage，这里不做赘述。
在上传图片组件中增加一个参数判断是否添加水印，在获取到图片、上传到后端之前对图片进行加工。

实现

在模板中添加canvas。
template：

<template><view class="md-upload"><!-- 其他组件上传图片逻辑 --><canvas v-if="waterMarkParams.display" canvas-id="waterMarkCanvas" :style="canvasStyle" /></view>
</template>

props：

props: {//其他props参数。。。waterMask: { // 是否添加水印type: Boolean,default: () => false}},

其他的一些数据

//这个放data
waterMarkParams: {display: false, // 控制 canvas 创建与销毁canvasWidth: 300, // 默认宽度canvasHeight: 225 // 默认高度
},
latitude: "",
longitude: "",
address: "",
orgFullName: "",
userName: "",
currentTime: ""//这个放computed
canvasStyle() {
return {position: 'fixed', // 移除到屏幕外left: '9999px',width: this.waterMarkParams.canvasWidth + 'px',height: this.waterMarkParams.canvasHeight + 'px'};
}

地理位置

这里有一个小问题，尝试了很多方法都没办法在success回调中去绘制canvas，退而其次选择在mounted里去获得地理位置，不知道有没有更好的写法欢迎指正。
注：如果要获取地理位置，type只能选择gcj02，而且这个type只适用于app，用h5开发调试会显示不出来。

mounted() {uni.getLocation({type: 'gcj02',geocode: true,success: (res) => {//经纬度this.longitude = res.longitude; this.latitude = res.latitude;//拼接地址this.address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;}})},

添加水印

入参的src是uni.chooseImage的success回调里返回的path

// 添加水印async getWaterMark(src) {//绘图方法startfunction fillText(context, x, y, content, font, fontStyle, textAlign) {context.save();context.font = font;context.fillStyle = fontStyle;context.textAlign = textAlign;context.fillText(content, x, y);}function fillCircle(context, x, y, r, fillStyle) {context.save();context.beginPath();context.arc(x, y, r, 0, 2 * Math.PI);context.fillStyle = fillStyle;context.fill();context.closePath();}function fillRect(context, x, y, width, height, fillStyle) {context.save();context.fillStyle = fillStyle;context.fillRect(x, y, width, height);}//绘图方法endlet that = this;that.waterMarkParams.display = true;this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); //获取当前时间if(!this.orgFullName){ //获取运营商信息await this.getOrgFullName();}this.userName = uni.getStorageSync("userInfo").userTitle; //获取用户信息return new Promise((resolve, reject) => {// 获取图片信息，配置 canvas 尺寸uni.getImageInfo({src,success: (res) => {try {console.log("成功获取图片信息",res);// 修复部分手机(如红米9)手机屏幕比较窄拍摄出来的图片水印压缩着覆盖的问题that.waterMarkParams.canvasWidth = Math.max(res.width, 886);that.waterMarkParams.canvasHeight = res.height;// 等待 canvas 元素创建that.$nextTick(async () => {let context = uni.createCanvasContext('waterMarkCanvas', that);const { canvasWidth, canvasHeight } = that.waterMarkParams;// 绘制前清空画布context.clearRect(0, 0, canvasWidth, canvasHeight);// 将图片src放到cancas内，宽高必须为图片大小context.drawImage(src, 0, 0, canvasWidth, canvasHeight, canvasWidth, canvasHeight);const fangweiY = 320;// 保证水印能完整显示出来 x是画布宽度两倍 y是画布高度减去防伪码位置和字体大小const [x, y] = [canvasWidth / 2, canvasHeight - (fangweiY + 100)];// 坐标原点移动到画布左下角context.translate(0, canvasHeight);const icon_site = require("./site.png");const icon_camera = require("./camera.png");const icon_icon = require("./icon.png");context.drawImage(icon_site, 40,-360,30,46);fillText(context, 80, -326, this.siteName, '500 40px "Microsoft YaHei"', 'white', 'left');fillRect(context, 40, -290, 10, 260, "#FF0000");fillText(context, 70, -250, "时间：" + this.currentTime, '30px "Microsoft YaHei"', 'white', 'left');fillText(context, 70, -190, "运维商：" + this.orgFullName, '30px "Microsoft YaHei"', 'white', 'left');fillText(context, 70, -130, "经纬度：" + that.longitude + ", " + that.latitude, '30px "Microsoft YaHei"', 'white', 'left');if(that.address.length > 15){ //地址过长时截断显示fillText(context, 70, -70, "地址：" + that.address.slice(0,15), '30px "Microsoft YaHei"', 'white', 'left');fillText(context, 70, -40, "" + that.address.slice(15), '30px "Microsoft YaHei"', 'white', 'left');}else {fillText(context, 70, -70, "地址：" + that.address, '30px "Microsoft YaHei"', 'white', 'left');}//移动到右下角let textLength = that.userName.length * 30;context.translate(canvasWidth, 0);if(that.address.length > 15){context.drawImage(icon_icon, -180, -130,72,35);fillText(context, -40, -100, "光伏", '30px "Microsoft YaHei"', 'white', 'right');context.drawImage(icon_camera, -1 * textLength - 130, -70,38,34);fillText(context, -40, -40, that.userName + "  拍摄", '30px "Microsoft YaHei"', 'white', 'right');}else{context.drawImage(icon_icon, -180, -160,72,35);fillText(context, -40, -130, "光伏", '30px "Microsoft YaHei"', 'white', 'right');context.drawImage(icon_camera, -1 * textLength - 130, -100,38,34);fillText(context, -40, -70, that.userName + "  拍摄", '30px "Microsoft YaHei"', 'white', 'right');}// 一定要加上一个定时器否则进入到页面第一次可能会无法正常拍照，后几次才正常setTimeout(() => {// 本次绘画完重开开始绘画，并且在绘画完毕之后再保存图片，不然页面可能会出现白屏等情况context.draw(false, () => {console.log('!!!!!开始绘画', canvasWidth, canvasHeight);uni.canvasToTempFilePath({canvasId: 'waterMarkCanvas',fileType: 'jpg',width: canvasWidth,height: canvasHeight,destWidth: canvasWidth,destHeight: canvasHeight,success: ({ tempFilePath }) => {console.log('绘制成功');that.waterMarkParams.display = false;resolve(tempFilePath);},fail: (err) => {reject(err);console.log(err);}},that);});}, 1000);console.log("完成绘制");});} catch (error) {console.log(error);}},fail: (err) => {reject(err);console.log(err);}});});},

最后用这个方法返回的url替换原本上传时的url，就是添加了水印的图片

let waterUrl = await this.getWaterMark(lists[i].url);
lists[i].filePath = waterUrl;

ios补充

如果ios出现了图片空白，把方法里的定时器时间加长（我从1000加到了2500），uni.chooseImage也选择压缩不要选择原图