小程序 上传图片加水印（图片和文字）

在小程序中上传图片并添加水印，可以在服务器端完成，以下是使用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环境中，并确保你有一个可以处理图片上传的小程序前端部分。