如何在 uni.previewImage 中添加水印?
时间: 2024-06-19 19:02:39 浏览: 197
给图片添加水印
5星 · 资源好评率100%
在 `uni.previewImage` 中添加水印可以通过以下步骤实现:
1. 将要添加水印的图片转化为 `canvas` 画布
2. 在 `canvas` 上绘制水印
3. 将 `canvas` 转化为图片并返回给 `uni.previewImage` 函数
以下是示例代码,其中 `watermarkUrl` 是水印图片的地址,可以自行修改:
```
// 获取图片信息
uni.getImageInfo({
src: 'image path',
success: function (res) {
// 将图片转化为 canvas 画布
const canvas = uni.createCanvasContext('canvas-id')
canvas.drawImage(res.path, 0, 0, res.width, res.height)
// 绘制水印
canvas.drawImage('watermarkUrl', 10, 10, 50, 50)
// 将 canvas 转化为图片并返回给 uni.previewImage 函数
canvas.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'canvas-id',
success: function (res) {
uni.previewImage({
urls: [res.tempFilePath]
})
}
})
})
}
})
```
阅读全文