uni-app为图片添加自定义水印（解决生成图片不全问题）
export default {
data() {
return {
waterMarkParams: {
display: false, // 控制 canvas 创建与销毁
canvasWidth: 300, // 默认宽度
canvasHeight: 225, // 默认高度
contentHeight: 150, // 将要被绘制到图像中的矩形的高度(px)
},
}
},
computed: {
canvasStyle() {
return {
position: 'fixed', // 移除到屏幕外
left: '9999px',
width: this.waterMarkParams.canvasWidth + 'px',
height: this.waterMarkParams.canvasHeight + 'px',
}
}
},
methods: {
chooseImage() {
uni.chooseImage({
sourceType: ['all'],
success: async ({ tempFilePaths, tempFiles }) => {
// 这里就得到了带水印的图片路径列表
const imgFileArr = await this.callAddWaterMark(tempFilePaths)
}
})
},
// 因为有可能在相册中选择多个图片，所以这里要依次生成水印
async callAddWaterMark(imgPathArr) {
let results = []
if(imgPathArr.length > 0) {
let addIndex = 0
while(addIndex < imgPathArr.length) {
const tempFilePath = await this.addWaterMark(imgPathArr[addIndex])
results.push(tempFilePath)
addIndex = addIndex + 1
}
}
return results
},
// 添加水印
addWaterMark(src) {
return new Promise((resolve, reject) => {
// 获取图片信息，配置 canvas 尺寸
uni.getImageInfo({
src,
success: res => {
// 修复部分手机(如红米9)手机屏幕比较窄拍摄出来的图片水印压缩着覆盖的问题
this.waterMarkParams.canvasWidth = Math.max(res.width, 886);
this.waterMarkParams.canvasHeight = res.height;
this.waterMarkParams.display = true
console.log('当前图片信息waterMarkParams：', this.waterMarkParams);
// 等待 canvas 元素创建
this.$nextTick(() => {
let context = uni.createCanvasContext("waterMarkCanvas", this);
/* 绘制 */
const { canvasWidth, canvasHeight, contentHeight } = this.waterMarkParams
// 绘制前清空画布
context.clearRect(0, 0, canvasWidth, canvasHeight);
// 将图片src放到cancas内，宽高必须为图片大小
context.drawImage(src, 0, 0, canvasWidth, canvasHeight, canvasWidth, canvasHeight);
// 设置边框的透明度
context.setGlobalAlpha(0.3);
context.beginPath();
// 绘制底部的白色背景
context.rect(0, canvasHeight - contentHeight, canvasWidth, contentHeight);
context.setFillStyle("white");
context.fill();
// 设置文字的透明度
context.setGlobalAlpha(1);
// 3.绘制底部的文字
context.setFontSize(32);
context.setTextAlign("left");
context.setFillStyle("black");
context.fillText(`拍摄人：${this.$store.state.userModule.name}`, 50 , canvasHeight - 90 );
context.fillText(`拍摄时间：${this.$u.timeFormat(new Date(), "yyyy-mm-dd hh:MM:ss")}`, 50, canvasHeight - 40);
// 一定要加上一个定时器否则进入到页面第一次可能会无法正常拍照，后几次才正常
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('绘制成功', tempFilePath);
this.waterMarkParams.display = false
resolve(tempFilePath)
},
fail: err => {
reject(err)
console.log(err);
}
}, this)
})
}, 1000);
})
}
})
})
},
}
}