谷歌插件实战开发：图片分割器

扶风吹细柳、

已于 2024-03-05 15:40:15 修改

阅读量385

点赞数 8

文章标签： chrome

于 2024-01-17 09:18:22 首次发布

本文链接：https://blog.csdn.net/qq_45106093/article/details/135640738

版权

功能介绍

AI绘画技术的热度持续攀升，其生成的独特艺术作品受到了广大公众的热烈欢迎。然而，这些由AI创作的图片常常是由四张独立的图片巧妙地拼接而成，这可能在一定程度上影响了人们的观赏体验。为了解决这个问题，我们专门开发了一款插件，它可以将这些拼接的图片精准地切割为四个独立的部分。

在这里插入图片描述

实现思路

制作弹窗界面。
用户选择需要上传的图片。
程序后台进行拆分。
拆分完成后自动将图片下载到本地。

搭建步骤

搭建谷歌插件架构,创建 manifest.json 文件。

{
  "manifest_version": 3,
  "name": "Image Splitter",
  "version": "1.0",
  "description": "Splits an uploaded image into 4 and downloads them."
}

绘制弹窗界面

这次我们需要新增操作界面，因此在清单中声明 action 。

"action": {"default_popup": "popup.html"}

创建 popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Splitter</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="splitBtn">Split and Download</button>

    <script src="popup.js"></script>
</body>
</html>

编写后台处理逻辑，创建 popup.js 文件。

document.getElementById('splitBtn').addEventListener('click', function() {
    let fileInput = document.getElementById('fileInput');
    if (fileInput.files && fileInput.files[0]) {
        let file = fileInput.files[0];
        let reader = new FileReader();
        reader.onload = function(e) {
            let img = new Image();
            img.onload = function() {
                let width = img.width / 2;
                let height = img.height / 2;
                for (let i = 0; i < 2; i++) {
                    for (let j = 0; j < 2; j++) {
                        let canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = height;
                        let ctx = canvas.getContext('2d');
                        ctx.drawImage(img, i * width, j * height, width, height, 0, 0, width, height);
                        let downloadLink = document.createElement('a');
                        downloadLink.href = canvas.toDataURL('image/png');
                        downloadLink.download = `split_${i}_${j}.png`;
                        document.body.appendChild(downloadLink);
                        downloadLink.click();
                        document.body.removeChild(downloadLink);
                    }
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

最终代码
manifest.json

{
  "manifest_version": 3,
  "name": "Image Splitter",
  "version": "1.0",
  "description": "Splits an uploaded image into 4 and downloads them.",
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Splitter</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="splitBtn">Split and Download</button>
    <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('splitBtn').addEventListener('click', function() {
    let fileInput = document.getElementById('fileInput');
    if (fileInput.files && fileInput.files[0]) {
        let file = fileInput.files[0];
        let reader = new FileReader();
        reader.onload = function(e) {
            let img = new Image();
            img.onload = function() {
                let width = img.width / 2;
                let height = img.height / 2;
                for (let i = 0; i < 2; i++) {
                    for (let j = 0; j < 2; j++) {
                        let canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = height;
                        let ctx = canvas.getContext('2d');
                        ctx.drawImage(img, i * width, j * height, width, height, 0, 0, width, height);
                        let downloadLink = document.createElement('a');
                        downloadLink.href = canvas.toDataURL('image/png');
                        downloadLink.download = `split_${i}_${j}.png`;
                        document.body.appendChild(downloadLink);
                        downloadLink.click();
                        document.body.removeChild(downloadLink);
                    }
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});