图片工具函数

本文档整理了常用的图片处理工具函数。

图片背景透明处理

实现代码

/**
 * 将图片背景设置为透明，基于给定的容差来判断哪些像素应该被设置为透明
 * @param {string} imgBase64 - 图片的Base64编码字符串
 * @param {number} [tolerance=20] - 容差大小，用于判断像素颜色是否接近背景色
 * @returns {Promise<string>} 返回一个Promise，解析为处理后的图片的Base64编码字符串
 */
async function makeBackgroundTransparent(imgBase64, tolerance = 20) {
  // 创建canvas和2D渲染上下文
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  // 创建图片对象
  const img = new Image();

  // 返回Promise以处理异步图片加载
  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 设置canvas尺寸与图片一致
      canvas.width = img.width;
      canvas.height = img.height;

      // 在canvas上绘制原始图片
      context.drawImage(img, 0, 0);

      // 获取图片的像素数据
      const imgData = context.getImageData(0, 0, img.width, img.height);

      // 获取图片左上角像素作为背景色参考（RGBA格式）
      const backgroundColor = {
        r: imgData.data[0],
        g: imgData.data[1],
        b: imgData.data[2],
      };

      // 遍历所有像素点，每4个值代表一个像素的RGBA
      for (let i = 0; i < imgData.data.length; i += 4) {
        const pixelColor = {
          r: imgData.data[i],
          g: imgData.data[i + 1],
          b: imgData.data[i + 2],
          a: imgData.data[i + 3],
        };

        // 计算当前像素与背景色的欧氏距离
        const distance = Math.sqrt(
          Math.pow(pixelColor.r - backgroundColor.r, 2) +
            Math.pow(pixelColor.g - backgroundColor.g, 2) +
            Math.pow(pixelColor.b - backgroundColor.b, 2)
        );

        // 如果距离小于等于容差，将该像素设为透明
        if (distance <= tolerance) {
          imgData.data[i + 3] = 0; // 设置alpha通道为0
        }
      }

      // 将处理后的像素数据放回canvas
      context.putImageData(imgData, 0, 0);

      // 将canvas内容转换为PNG格式的Base64编码
      resolve(canvas.toDataURL("image/png"));
    };

    // 处理图片加载失败的情况
    img.onerror = () => {
      reject(new Error("Image failed to load."));
    };

    // 设置图片源并开始加载
    img.src = imgBase64;
    // 防止跨域问题
    img.crossOrigin = "anonymous";
  });
}

代码解析

1. 图片加载处理：通过创建 Image 对象并使用 Promise 封装异步加载过程，确保图片完全加载后再进行处理。
2. Canvas 操作：利用 Canvas API 创建与原图尺寸相同的画布，并获取 2D 渲染上下文。
3. 像素级处理：使用getImageData()获取图片的像素数据，遍历每个像素点并计算其与背景色的欧氏距离。
4. 透明度设置：当像素颜色与背景色的差距小于等于指定容差时，将该像素的 alpha 通道设置为 0，使其变为完全透明。
5. 结果输出：处理完成后，将 Canvas 内容转换为 PNG 格式的 Base64 编码返回。

使用方法

// 示例：将带有白色背景的图片处理为透明背景
async function processImage() {
  try {
    // 假设有一个图片的Base64编码
    const originalImage =
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";

    // 调用函数处理图片，设置容差为30
    const transparentImage = await makeBackgroundTransparent(originalImage, 30);

    // 使用处理后的图片，例如设置为img标签的src
    const imgElement = document.createElement("img");
    imgElement.src = transparentImage;
    document.body.appendChild(imgElement);
  } catch (error) {
    console.error("图片处理失败:", error);
  }
}

// 调用处理函数
processImage();