huhb-book/mobile/src/utils/index.js

// 专门用于收藏品图片的水印处理方法
export function addWatermarkToCollectionImage(imageUrl, options = {}) {
  return new Promise((resolve, reject) => {
      // console.log('开始处理水印，原图URL:', imageUrl);
      
      // 默认选项
      const {
          position = 'bottom-right',
          opacity = 0.6,
          scale = 0.15,
          margin = 15
      } = options;
      
      const image = new Image();
      const watermark = new Image();
      
      // 设置跨域属性，如果图片来自不同域
      image.crossOrigin = 'anonymous';
      watermark.crossOrigin = 'anonymous';
      
      let imagesLoaded = 0;
      
      function onImageLoad() {
          imagesLoaded++;
          // console.log(`图片加载完成 ${imagesLoaded}/2`);
          if (imagesLoaded === 2) {
              try {
                  // 两张图片都加载完成
                  const canvas = document.createElement('canvas');
                  const ctx = canvas.getContext('2d');
                  
                  // 设置Canvas尺寸与主图片相同
                  canvas.width = image.width;
                  canvas.height = image.height;
                  
                  // console.log('Canvas尺寸:', canvas.width, 'x', canvas.height);
                  // console.log('水印图片尺寸:', watermark.width, 'x', watermark.height);
                  
                  // 绘制主图片
                  ctx.drawImage(image, 0, 0);
                  
                  // 计算水印尺寸
                  const watermarkWidth = image.width * scale;
                  const watermarkHeight = (watermark.height / watermark.width) * watermarkWidth;
                  
                  // console.log('计算后的水印尺寸:', watermarkWidth, 'x', watermarkHeight);
                  
                  // 设置透明度
                  ctx.globalAlpha = opacity;
                  
                  // 计算水印位置
                  let x, y;
                  
                  switch(position) {
                      case 'top-left':
                          x = margin;
                          y = margin;
                          break;
                      case 'top-right':
                          x = canvas.width - watermarkWidth - margin;
                          y = margin;
                          break;
                      case 'bottom-left':
                          x = margin;
                          y = canvas.height - watermarkHeight - margin;
                          break;
                      case 'bottom-right':
                          x = canvas.width - watermarkWidth - margin;
                          y = canvas.height - watermarkHeight - margin;
                          break;
                      case 'center':
                          x = (canvas.width - watermarkWidth) / 2;
                          y = (canvas.height - watermarkHeight) / 2;
                          break;
                      default:
                          x = canvas.width - watermarkWidth - margin;
                          y = canvas.height - watermarkHeight - margin;
                  }
                  
                  // console.log('水印位置:', x, y);
                  
                  // 绘制水印
                  ctx.drawImage(watermark, x, y, watermarkWidth, watermarkHeight);
                  
                  // 将Canvas转换为Data URL
                  const watermarkedImageUrl = canvas.toDataURL('image/png', 0.9);
                  // console.log('水印处理完成，生成的URL长度:', watermarkedImageUrl.length);
                  resolve(watermarkedImageUrl);
              } catch (error) {
                  reject(new Error('图片加载失败'));
              }
          }
      }
      
      image.onload = onImageLoad;
      watermark.onload = onImageLoad;
      
      // 主图或水印加载失败时，直接返回原链接，避免继续添加水印造成反复报错
      image.onerror = () => {
          resolve(imageUrl);
      };
      watermark.onerror = () => {
          resolve(imageUrl);
      };
      
      // 开始加载图片
      // console.log('开始加载主图片:', imageUrl);
      image.src = imageUrl;
      
      // 直接使用相对路径加载水印图片
      // 测试使用
    //   watermark.src = '/src/assets/img/waterMar.png';
    // 正式使用
    watermark.src = './waterMar.png';
  });
}