uniapp 拍照图片加水印
时间: 2023-12-23 08:05:49 浏览: 298
图片加水印软件
5星 · 资源好评率100%
在uniapp中,可以使用uni-app插件来实现拍照图片加水印的功能。下面是一个示例代码:
```javascript
// 引入uni-app插件
import watermark from '@/uni_modules/watermark/watermark.js'
// 拍照并加水印
uni.chooseImage({
count: 1,
sourceType: ['camera'],
success: function (res) {
// 获取拍照的图片路径
const imagePath = res.tempFilePaths[0]
// 加载水印图片
const watermarkImage = new Image()
watermarkImage.src = '/static/watermark.png'
watermarkImage.onload = function () {
// 创建canvas
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// 设置canvas的宽高与图片一致
canvas.width = watermarkImage.width
canvas.height = watermarkImage.height
// 绘制原始图片
const image = new Image()
image.src = imagePath
image.onload = function () {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
// 绘制水印图片
ctx.drawImage(watermarkImage, 0, 0, canvas.width, canvas.height)
// 将canvas转换为图片路径
const resultImagePath = canvas.toDataURL('image/jpeg')
// 保存图片
uni.saveImageToPhotosAlbum({
filePath: resultImagePath,
success: function () {
uni.showToast({
title: '图片保存成功'
})
},
fail: function () {
uni.showToast({
title: '图片保存失败',
icon: 'none'
})
}
})
}
}
}
})
```
这段代码首先使用`uni.chooseImage`方法拍照获取图片路径,然后使用`canvas`绘制原始图片和水印图片,最后将绘制好的图片保存到相册中。你可以根据自己的需求修改水印图片的路径和样式。
阅读全文