浏览器插件Base64: Image is not defined

Question

是这样，我想自己做一个便捷的插件。在edge上运行，
通过自定义的按钮将焦点图片url中的后缀_x.jpg去掉，以获得天猫中的大图，并复制进系统剪切板

1.通过按钮获得info.srcurl，
2.通过正则表达式获得 “原图url”

然后问题来了，
3.将url转换png的base64 (因为做了尝试，只有png能通过clipboardWrite写入剪切板)，
4.base64转换成blob复制进剪切板。这个方法在网页脚本上很顺利，

但是做成插件后运行就卡在 url转pngbase64这

Manifest
{
  "manifest_version": 3,
  "name": "Image URL Processor",
  "version": "1.0",
  "description": "A browser extension to process image URLs.",
  "permissions": [
    "contextMenus",
    "activeTab", // 允许访问当前活动标签页
    "clipboardWrite" // 允许写入剪贴板
  ],
  "background": {
    "service_worker": "background.js"
  } 
  }
}

```javascript

chrome.contextMenus.onClicked.addListener(function (info, tab) {
    if (info.menuItemId === "copyImage") {
        copyImageToClipboard(info.srcUrl);
    }
});


function copyImageToClipboard(jpgurl)
{   
    const aa = (async () => {
        try {
            const url = jpgurl; 
            const type = 'image/png';
            const img = new Image();
            const canvas = document.createElement('canvas');
            img.crossOrigin = '*';
            await new Promise((resolve, reject) => {
                img.onload = resolve;
                img.onerror = reject;
                img.src = url;
            });

            const width = img.width;
            const height = img.height;
            canvas.width = width;
            canvas.height = height;

            const ctx = canvas.getContext('2d');
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, width, height);
            const base64 = canvas.toDataURL(type);
            return base64;
        } catch (error) {
            throw new Error('Failed to convert image to Base64: ' + error.message);
        }
    })();

    const dd = (base64Data) => {
        const parts = base64Data.split(';base64,');
        const contentType = parts[0].split(':')[1];
        const raw = window.atob(parts[1]);
        const length = raw.length;
        const arr = new Uint8Array(length);

        for (let i = 0; i < length; i++) {
            arr[i] = raw.charCodeAt(i);
        }

        const blob = new Blob([arr], { type: contentType });
        return URL.createObjectURL(blob);
    };

    aa.then
        (result => {
            const imageUrl = dd(result);
            console.log('生成的图片 URL:', imageUrl);
            fetch(imageUrl)
                .then(response => response.blob())
                .then(blob => {
                    // 将 Blob 对象复制到剪贴板
                    navigator.clipboard.write([
                        new ClipboardItem({ "image/png": blob })
                    ]).then(function () {
                        console.log('图片已复制到剪贴板');
                    }).catch(function (error) {
                        console.error('复制图片到剪贴板失败:', error);
                    });
                }
            );
        })
        .catch(error =>
        {
            console.error(error.message);
        }
    );

我是兴趣向弄这些工具，没有什么代码基础，希望愿意帮忙的哥哥说的稍微详细点。 感谢

Answer 1

【以下回答由 GPT 生成】

问题是什么？请提供具体的问题描述。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^