uni-app 水印
时间: 2023-11-27 14:02:45 浏览: 38
在uni-app中添加水印可以通过以下步骤实现:
1. 调用uni.getImageInfo获取图片信息,包括图片宽高等信息。
```javascript
uni.getImageInfo({
src: 'image.png',
success: function (res) {
console.log(res.width)
console.log(res.height)
}
})
```
2. 创建canvas画布,并将图片绘制到画布上。
```javascript
const ctx = uni.createCanvasContext('myCanvas')
ctx.drawImage('image.png', 0, 0, res.width, res.height)
```
3. 在画布上添加水印,可以使用fillText方法添加文本水印,也可以使用drawImage方法添加图片水印。
```javascript
ctx.setFontSize(20)
ctx.setFillStyle('rgba(255, 255, 255, 0.5)')
ctx.fillText('watermark', 10, 50)
```
4. 将画布转换为图片,并上传到服务器。
```javascript
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
uni.uploadFile({
url: 'https://example.com/upload',
filePath: res.tempFilePath,
name: 'file',
success: function (res) {
console.log(res.data)
}
})
}
})
})
```