rgba图片添加水印

可以使用HTML5的Canvas元素来实现图片添加水印的效果。具体步骤如下：

1. 创建一个Canvas元素，并将要添加水印的图片绘制到Canvas上。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
};
img.src = 'your_image_url';

2. 将水印绘制到Canvas上。

ctx.font = '20px Arial'; // 设置字体大小和样式
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // 设置水印颜色和透明度
ctx.fillText('your_watermark_text', x, y); // 绘制水印文字

3. 将Canvas内容转换为图片并替换原来的图片。

var newImg = new Image();
newImg.src = canvas.toDataURL('image/png');
document.body.appendChild(newImg); // 将新的图片添加到页面上

完整代码示例：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  ctx.font = '20px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('your_watermark_text', x, y);

  var newImg = new Image();
  newImg.src = canvas.toDataURL('image/png');
  document.body.appendChild(newImg);
};
img.src = 'your_image_url';