帮我写一段微信小程序中为图片添加水印的完整代码

以下是为图片添加水印的微信小程序代码：

1. 在 wxml 文件中添加一个 image 标签和一个 text 标签，用于显示图片和水印文字。

<view class="container">
<image src="{{imageUrl}}" mode="aspectFit" class="image"></image>
<text class="watermark">{{watermarkText}}</text>
</view>

2. 在 js 文件中定义 imageUrl 和 watermarkText 变量，并在 onLoad 函数中获取图片路径。

Page({
data: {
imageUrl: '',
watermarkText: '这是水印文字'
},
onLoad: function (options) {
this.setData({
imageUrl: options.imageUrl
})
}
})

3. 在 wxss 文件中定义水印文字的样式。

.watermark {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

4. 在 app.json 文件中添加权限设置，允许小程序保存图片到相册。

{
"pages": [
"pages/index/index"
],
"permission": {
"scope.writePhotosAlbum": {
"desc": "保存图片到相册"
}
}
}

5. 在 js 文件中添加保存图片的函数，并在点击保存按钮时调用该函数。

saveImage: function () {
wx.showLoading({
title: '正在保存',
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 1000,
destWidth: 750,
destHeight: 1000,
canvasId: 'canvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
wx.hideLoading()
wx.showToast({
title: '保存成功',
})
},
fail: function () {
wx.hideLoading()
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
})
}

6. 在 wxml 文件中添加一个 canvas 标签，并在 js 文件中获取 canvas 上下文，将图片和水印文字绘制到 canvas 上。

<canvas canvas-id="canvas" class="canvas"></canvas>

Page({
onReady: function () {
var that = this
wx.createSelectorQuery().select('#canvas').fields({
node: true,
size: true,
}).exec(function (res) {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.drawImage(that.data.imageUrl, 0, 0, 750, 1000)
ctx.font = '16px sans-serif'
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
ctx.shadowOffsetX = 1
ctx.shadowOffsetY = 1
ctx.shadowBlur = 1
ctx.fillText(that.data.watermarkText, 690, 980)
})
}
})

以上就是为图片添加水印的微信小程序完整代码。