博客站

在 UniApp 中，图片水印是常见的需求之一，例如在用户上传的图片上添加版权信息、Logo 等。UniApp 本身没有直接提供图片水印功能，但可以通过结合 Canvas 或第三方库实现图片水印。以下是 UniApp 处理图片水印的常用方法：

一、使用 Canvas 添加水印

Canvas 是 HTML5 提供的绘图 API，可以在图片上绘制文字或图片水印。

1. 添加文字水印

• 示例：

  function addTextWatermark(imageSrc, text) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = imageSrc;
      image.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        ctx.font = '20px Arial';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.fillText(text, 10, 30);
        const watermarkedImage = canvas.toDataURL('image/jpeg');
        resolve(watermarkedImage);
      };
      image.onerror = (err) => {
        reject(err);
      };
    });
  }
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      addTextWatermark(tempFilePath, 'UniApp 水印').then((watermarkedImage) => {
        console.log('添加水印后的图片：', watermarkedImage);
      });
    }
  });
  

2. 添加图片水印

• 示例：

  function addImageWatermark(imageSrc, watermarkSrc) {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.src = imageSrc;
      image.onload = () => {
        const watermark = new Image();
        watermark.src = watermarkSrc;
        watermark.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
          ctx.drawImage(watermark, 10, 10, 100, 50);
          const watermarkedImage = canvas.toDataURL('image/jpeg');
          resolve(watermarkedImage);
        };
        watermark.onerror = (err) => {
          reject(err);
        };
      };
      image.onerror = (err) => {
        reject(err);
      };
    });
  }
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      addImageWatermark(tempFilePath, 'https://example.com/watermark.png').then((watermarkedImage) => {
        console.log('添加水印后的图片：', watermarkedImage);
      });
    }
  });
  

二、使用第三方图片处理库

如果需要更复杂的图片水印功能，可以使用第三方图片处理库，如 fabric.js。

1. 安装 fabric.js

• 安装 fabric.js：

  npm install fabric
  

2. 在 UniApp 中使用

• 示例：

  import { fabric } from 'fabric';
  
  function addTextWatermark(imageSrc, text) {
    return new Promise((resolve, reject) => {
      const canvas = new fabric.Canvas(null, {
        width: 500,
        height: 500
      });
      fabric.Image.fromURL(imageSrc, (img) => {
        canvas.add(img);
        const watermark = new fabric.Text(text, {
          left: 10,
          top: 10,
          fontSize: 20,
          fill: 'rgba(255, 255, 255, 0.5)'
        });
        canvas.add(watermark);
        const watermarkedImage = canvas.toDataURL('image/jpeg');
        resolve(watermarkedImage);
      });
    });
  }
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      addTextWatermark(tempFilePath, 'UniApp 水印').then((watermarkedImage) => {
        console.log('添加水印后的图片：', watermarkedImage);
      });
    }
  });
  

三、总结

UniApp 处理图片水印的步骤如下：

1. 使用 Canvas 添加水印：通过 Canvas 实现文字或图片水印。
2. 使用第三方图片处理库：通过 fabric.js 实现更复杂的图片水印功能。

以下是一个完整的 Canvas 添加文字水印示例：

function addTextWatermark(imageSrc, text) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = imageSrc;
    image.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.fillText(text, 10, 30);
      const watermarkedImage = canvas.toDataURL('image/jpeg');
      resolve(watermarkedImage);
    };
    image.onerror = (err) => {
      reject(err);
    };
  });
}

uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0];
    addTextWatermark(tempFilePath, 'UniApp 水印').then((watermarkedImage) => {
      console.log('添加水印后的图片：', watermarkedImage);
    });
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的图片水印功能，满足应用的需求。