图片工具函数

图片背景图片透明

/**
 * 将图片背景设置为透明，基于给定的容差来判断哪些像素应该被设置为透明
 * @param {string} imgBase64 图片的Base64编码字符串
 * @param {number} [tolerance=20] 容差大小，用于判断像素颜色是否接近背景色
 * @returns {Promise<string>} 返回一个Promise，解析为处理后的图片的Base64编码字符串
 */
async function makeBackgroundTransparent(
  imgBase64: string,
  tolerance: number = 20
): Promise<string> {
  // 创建canvas和context
  const canvas = document.createElement("canvas");
  // 使用非空断言，因为已经创建了context
  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);

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

      // 遍历所有像素，根据容差来判断是否将像素设置为透明
      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(
          (pixelColor.r - backgroundColor.r) ** 2 +
            (pixelColor.g - backgroundColor.g) ** 2 +
            (pixelColor.b - backgroundColor.b) ** 2
        );

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

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

      // 将处理后的图片转换为Base64编码字符串
      resolve(canvas.toDataURL("image/png"));
    };

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

    // 设置图片的源为传入的Base64编码字符串
    img.src = imgBase64;
  });
}

动态切换网页图标

/**
 * 动态切换网页图标
 * @param {string} iconUrl 图标Url
 */
function changeFavicon(iconUrl: string) {
  if (!iconUrl) {
    throw new Error("Icon URL must be provided.");
  }

  // 尝试查找已存在的具有相同 href 的 link 元素
  const existingLink = document.querySelector<HTMLLinkElement>(
    `link[rel*='icon'][href='${iconUrl}']`
  );
  // 如果已存在，则不执行任何操作
  if (existingLink) return

  // 查找用于设置图标的 link 元素，或者创建一个新的
  const link =
    document.querySelector("link[rel*='icon']") ||
    document.createElement("link");

  // 设置 link 元素的属性
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  // 设置图标 URL
  link.href = iconUrl; 

  // 将 link 元素添加到文档的 head 部分
  const head = document.head;
  if (!head.contains(link)) {
    head.appendChild(link);
  }
}