帮我写一段在微信小程序中动态为图片添加水印的代码
时间: 2023-04-04 22:03:55 浏览: 71
可以使用canvas来实现在图片上添加水印的效果,以下是示例代码:
```javascript
// 获取图片信息
wx.getImageInfo({
src: '图片地址',
success: function (res) {
// 创建canvas对象
const ctx = wx.createCanvasContext('canvas-id');
// 设置canvas的宽高与图片一致
const canvasWidth = res.width;
const canvasHeight = res.height;
ctx.canvas.width = canvasWidth;
ctx.canvas.height = canvasHeight;
// 绘制图片
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
// 设置水印文字样式
ctx.setFontSize(20);
ctx.setFillStyle('rgba(255, 255, 255, 0.5)');
ctx.setTextAlign('center');
ctx.setTextBaseline('middle');
// 绘制水印文字
ctx.fillText('水印文字', canvasWidth / 2, canvasHeight / 2);
// 将canvas转换为图片
ctx.draw(false, function () {
wx.canvasToTempFilePath({
canvasId: 'canvas-id',
success: function (res) {
// 将添加水印后的图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
}
});
}
});
});
}
});
```
注意:需要在小程序的json文件中添加canvas组件,并设置id为'canvas-id'。