在小程序中上传图片并添加水印，可以在服务器端完成，以下是使用Node.js和Express框架的示例代码：
首先，安装express和canvas库：
npm install express canvas
然后，创建一个简单的Express服务器来处理上传的图片并添加水印：
const express = require('express');
const canvas = require('canvas');
const fs = require('fs');
const multer = require('multer');
const app = express();
const port = 3000;
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), async (req, res) => {
const imagePath = req.file.path;
const canvasImage = await canvas.loadImage(imagePath);
const canvasWidth = canvasImage.width;
const canvasHeight = canvasImage.height;
const canvasInstance = canvas.createCanvas(canvasWidth, canvasHeight);
const ctx = canvasInstance.getContext('2d');
ctx.drawImage(canvasImage, 0, 0);
// 水印文字
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillText('Watermark', 10, 50);
// 水印图片
const watermarkImage = await canvas.loadImage('path_to_watermark_image.png');
ctx.drawImage(watermarkImage, canvasWidth - watermarkImage.width, canvasHeight - watermarkImage.height);
const newImagePath = 'watermarked_' + imagePath;
const imgStream = fs.createWriteStream(newImagePath);
canvasInstance.createJPEGStream().pipe(imgStream);
imgStream.on('finish', () => {
// 发送新图片的路径给小程序
res.json({ imageUrl: newImagePath });
});
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
在这个例子中，我们使用了multer来处理上传的图片，并使用canvas库来绘制水印。服务器接收到小程序上传的图片后，加载图片，在上面绘制文字和图片水印，然后保存新的图片文件。最后，将新图片的路径返回给小程序。
确保你有一个名为path_to_watermark_image.png的水印图片，或者修改代码以指向正确的水印图片路径。
这个服务器端代码需要运行在一个Node.js环境中，并确保你有一个可以处理图片上传的小程序前端部分。