js给base64图片添加水印

您可以使用Canvas来给Base64图片添加水印。以下是一个示例代码：

// 创建一个临时的Canvas元素
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// 创建一个新的Image对象
var image = new Image();

// 加载Base64图片
image.onload = function() {
  // 设置Canvas尺寸与图片尺寸一致
  canvas.width = image.width;
  canvas.height = image.height;

  // 在Canvas上绘制图片
  context.drawImage(image, 0, 0);

  // 添加水印文本
  context.font = '20px Arial';
  context.fillStyle = 'rgba(255, 0, 0, 0.5)';
  context.fillText('Watermark', 10, 50);

  // 获取添加水印后的Base64图片
  var watermarkedBase64 = canvas.toDataURL();

  // 在页面上显示添加水印后的图片
  var resultImage = document.createElement('img');
  resultImage.src = watermarkedBase64;
  document.body.appendChild(resultImage);
};

// 设置Base64图片源
image.src = 'data:image/png;base64,iVBORw0KG...'; // 替换为您的Base64图片数据

在上述示例中，我们首先创建了一个临时的Canvas元素，并从Base64图片创建一个新的Image对象。当图片加载完成后，我们将Canvas的尺寸设置为与图片尺寸一致，并使用`context.drawImage()`方法将图片绘制到Canvas上。

然后，我们使用`context.fillText()`方法在Canvas上添加水印文本。可以通过调整字体、颜色、位置等参数来自定义水印样式。

最后，通过调用Canvas的`toDataURL()`方法，可以获取添加水印后的Base64图片数据。您可以将其用于保存到服务器或显示在页面上。

请注意，由于浏览器的安全策略限制，如果您在尝试处理来自不同域的Base64图片时遇到问题，您可能需要进行跨域处理。