如何通过Web Extension获取网页图片Base64并实现模糊处理？

核心函数：URL转Base64编码 #

下面是异步函数实现，接收图片URL，返回其Base64编码字符串（包含data URI前缀）：

async function urlToBase64(imageUrl) {
  try {
    // 获取图片资源并转为Blob
    const response = await fetch(imageUrl);
    if (!response.ok) throw new Error(`请求图片失败: ${response.status}`);
    const blob = await response.blob();

    // 创建Image对象加载Blob并转Base64
    return new Promise((resolve, reject) => {
      const img = new Image();
      // 处理跨域图片（需配合扩展manifest权限配置）
      img.crossOrigin = 'anonymous';
      
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        
        // 可根据图片类型调整参数，如'image/jpeg'搭配质量值
        const base64 = canvas.toDataURL('image/png');
        resolve(base64);
      };
      
      img.onerror = () => reject(new Error(`加载图片失败: ${imageUrl}`));
      img.src = URL.createObjectURL(blob);
    });
  } catch (err) {
    console.error('转Base64出错:', err);
    return null;
  }
}

完整流程实现（Web Extension Content Script） #

遍历网页图片、调用API处理并替换原图的完整代码：

async function processAllImages() {
  const imgElements = document.querySelectorAll('img');
  
  for (const img of imgElements) {
    const originalUrl = img.src || img.dataset.src;
    if (!originalUrl) continue;

    // 转换图片为Base64
    const base64 = await urlToBase64(originalUrl);
    if (!base64) continue;

    // 调用后端API进行模糊处理
    try {
      const apiResponse = await fetch('你的后端API地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ imageBase64: base64 }),
      });
      
      if (!apiResponse.ok) throw new Error('API请求失败');
      const result = await apiResponse.json();
      const blurredBase64 = result.blurredImageBase64;

      // 替换原图
      img.src = blurredBase64;
    } catch (apiErr) {
      console.error('API处理出错:', apiErr);
    }
  }
}

// 页面加载完成后执行处理逻辑
if (document.readyState === 'complete') {
  processAllImages();
} else {
  window.addEventListener('load', processAllImages);
}

扩展Manifest配置注意事项 #

为解决跨域问题，需在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "host_permissions": ["<all_urls>"]
}

关键注意点 #

• 跨域图片必须设置img.crossOrigin = 'anonymous'，同时扩展需配置host_permissions，否则Canvas会被污染无法生成Base64。
• 可根据图片实际格式调整toDataURL的参数，比如JPEG格式用canvas.toDataURL('image/jpeg', 0.9)控制质量。
• 建议添加加载失败降级逻辑，比如保留原图或显示占位图。

内容的提问来源于stack exchange，提问作者Shkev