1、上js代码：
// 压缩图片
//file图片文件(必选)
//maxWidth限制宽度(必选)
//callback压缩完成回调方法(可选)
compress(file, maxWidth, maxHeight, callback) { //接收传过来的图片
var that = this;
//获取原图片信息
wx.getImageInfo({
src: file,
success: function (res) {
wx.showLoading({
title: "正在加载图片",
mask: true
})
var width = res.width, height = res.height;
if (width > maxWidth) {
//超出限制宽度
height = (maxWidth / width) * height;
width = parseInt(maxWidth);
}
if (res.height > maxHeight && maxHeight) {
//超出限制高度
var ratio = that.data.thumbHeight / res.height;//计算比例
width = (maxHeight / height) * width.toFixed(2);
height = maxHeight.toFixed(2);
}
that.setData({ thumbWidth: width, thumbHeight: height }); //设定画布的宽高
let roleNameInfo = that.data.RoleName + " : " + that.data.RealName;
let time = util.date_time();
let houseLocation = that.data.HouseLocation;
//按比例压缩图片
const ctx = wx.createCanvasContext('firstCanvas');
ctx.drawImage(file, 0, 0, width, height); //先画出图片
//将声明的时间放入canvas
ctx.setFontSize(18) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle('white');
ctx.fillText(roleNameInfo, 5, height - 62);
ctx.setFontSize(14);
ctx.fillText(time, 5, height - 45);
// ctx.fillText(houseLocation, 5, height - 30);
var lineWidth = 0;
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < houseLocation.length; i++) {
lineWidth += ctx.measureText(houseLocation[i]).width;
if (lineWidth >= width-10) {
ctx.fillText(houseLocation.substring(lastSubStrIndex, i), 5, height - 30);//绘制截取部分
lastSubStrIndex = i;
i = houseLocation.length + 2;
}
}
if (lastSubStrIndex < houseLocation.length) {
ctx.fillText(houseLocation.substring(lastSubStrIndex), 5, height - 15);
}
// if (lastSubStrIndex < houseLocation.length) {
// ctx.fillText(houseLocation.substring(lastSubStrIndex, houseLocation.length - lastSubStrIndex), 5, height - 15);
// }
ctx.draw(false, function () {
setTimeout(function(){
//绘画完成回调
//生成图片
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: function (ress) {
wx.hideLoading();
wx.saveImageToPhotosAlbum({ //将带有水印的图片保存到相册里
filePath: ress.tempFilePath,
success(resp) {
}
})
console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径
typeof callback == "function" && callback(ress);
}
})
},600)
})
}
})
}
上面就是图片加水印的整个过程，ctx.draw方法是异步的，所以加了一个600毫秒的延迟，因为开发中出现过bug，这里是个小坑吧，如果直接画到画布上就没有这个顾虑了，但是要是想要把draw得到的带水印的照片保存到相册，或者是将带水印的图片显示在指定的页面位置等，就需要加上延迟方法。
水印的内容是文字，这里涉及到一个文字换行的问题，主要用到的方法是ctx.measureText,用于测量文本尺寸信息，能够返回文本的宽度，通过for循环测量每个字的宽度，进行累加，当>=指定宽度时，进行文字截图，并将截取到的文字fillText填充到画布上，其中填充时的高度需要大家按照实际情况进行自己的加工，这里因为开发项目，涉及到换行的文字只有两行，所以高度上没有进行严格的处理。
2、下面放一点儿wxml吧
<canvas style="width: {{thumbWidth}}px; height: {{thumbHeight}}px;border:1px solid black;position: absolute; left: -1000px; top:-1000px;"
canvas-id="firstCanvas"></canvas>
上面的代码是一个隐藏的画布，因为我是想让用户看到上传后加了水印的图片，并且需要上传多张，所以每次只是用了这个画布容器作为一个载体吧算是。
3、其他的关于上传的方法
// 选择图片
chooseImage(e) {
var _this = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['camera'], //可选择性开放访问相机
success: res => {
// 加水印
res.tempFilePaths.forEach(function (item) {
_this.compress(item, '300', false, function (ress) {
_this.setData({
imagesurl: _this.data.imagesurl.concat(ress.tempFilePath),
/ })
});
})
}
})
},
就这些了，有问题欢迎大家留言，一起学习进步！