Chrome插件：图片缩放为头像（128*128）

前置条件：

安装有chrome谷歌浏览器的电脑

使用步骤：

1.打开chrome扩展插件

2.点击管理扩展程序

3.加载已解压的扩展程序

4.选择对应文件夹

5.成功后会出现一个扩展小程序

6.点击对应小程序

7.使用小程序

8.拖拽成功后会自动保存到下载

代码：

 1.manifest.json

{
  "manifest_version": 3,
  "name": "图片缩放器",
  "version": "1.0",
  "description": "将图片缩放至128x128像素",
  "permissions": [
    "contextMenus",
    "downloads"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
} 

2.popup.js

document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');

    // 点击上传区域触发文件选择
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    // 处理拖拽事件
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleImage(files[0]);
        }
    });

    // 处理文件选择
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleImage(e.target.files[0]);
        }
    });

    // 处理图片
    function handleImage(file) {
        if (!file.type.startsWith('image/')) {
            alert('请选择图片文件！');
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                // 创建canvas进行缩放
                const canvas = document.createElement('canvas');
                canvas.width = 128;
                canvas.height = 128;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, 128, 128);

                // 显示预览
                preview.src = canvas.toDataURL();
                preview.style.display = 'block';

                // 下载图片
                canvas.toBlob((blob) => {
                    const filename = 'resized_' + file.name;
                    chrome.downloads.download({
                        url: URL.createObjectURL(blob),
                        filename: filename
                    });
                });
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
}); 

3.popup.html

  
  


  
图片缩放器
  

    拖拽图片到这里或点击上传
    
  
  
  

 

4.background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "resizeImage",
    title: "缩放至128x128",
    contexts: ["image"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "resizeImage") {
    const imgUrl = info.srcUrl;
    
    // 创建一个临时的图片元素
    const img = new Image();
    img.crossOrigin = "Anonymous";
    
    img.onload = function() {
      // 创建canvas
      const canvas = new OffscreenCanvas(128, 128);
      const ctx = canvas.getContext("2d");
      
      // 绘制缩放后的图片
      ctx.drawImage(img, 0, 0, 128, 128);
      
      // 转换为blob
      canvas.convertToBlob().then(blob => {
        // 下载文件，移除 saveAs 选项使其自动下载
        const filename = "resized_" + imgUrl.split("/").pop();
        chrome.downloads.download({
          url: URL.createObjectURL(blob),
          filename: filename
        });
      });
    };
    
    img.src = imgUrl;
  }
});