前端vue给下载jpg图片添加水印

在Vue前端开发中，给下载的JPG图片添加水印通常是通过Canvas API来实现的。以下是一个简单的步骤：

1. 首先，你需要创建一个`downloadImageWithWatermark`函数，接收图片URL和水印文字作为参数。

async function downloadImageWithWatermark(imageUrl, watermarkText) {
  // 创建一个新的canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置图片的大小
  const img = new Image();
  img.src = imageUrl;
  await img.decode(); // 等待图片加载完成
  canvas.width = img.width;
  canvas.height = img.height;

  // 绘制图片到canvas上
  ctx.drawImage(img, 0, 0);

  // 添加水印文字
  ctx.font = '24px Arial'; // 设置字体样式
  ctx.fillStyle = '#ffffff'; // 设置颜色
  ctx.textAlign = 'center';
  ctx.fillText(watermarkText, canvas.width / 2, canvas.height - 16); // 文字位置

  // 将canvas内容转换为DataURL
  const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 0.8表示压缩质量，可根据需要调整

  // 创建下载链接
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = `watermarked_${new Date().getTime()}.jpg`; // 下载文件名
  link.click();

  // 立即移除临时下载链接，防止浏览器阻止下载
  document.body.removeChild(link);
}

你可以像这样调用这个函数：

downloadImageWithWatermark('your-image-url.jpg', 'Your Watermark Text');