Question

有一个包含10个或更多图片的网站，比如说

<div class="container"><img src="some_URL"></div>

我想为它们生成缩略图以将图像保存到扩展程序的存储中，这样我就可以在不离线或没有繁忙流量的情况下查看它们。该网站不允许跨图像使用图像，因此我正在尝试使用下一个“算法”：

在页面中包含以下脚本（include2page.js）。
从0开始循环到页面上的图像数量。
获取图像的可见位置和大小。
向其滚动页面，通过chrome.runtime.sendMessage()将坐标发送到扩展程序的后台脚本（background.js）。
使用chrome.tabs.captureVisibleTab()以后台脚本获取图片。
将其复制到画布，缩小并裁剪为所需的缩略图大小。
将缩略图保存为chrome.storage.local作为base64。

include2page.js：

var list = document.getElementsByClassName('container');
for (var i = 0; i < list.length; i++) {
    var img = list[i].getElementsByTagName('img')[0];
    chrome.runtime.sendMessage(null, {
        'type': 'imgData',
        'data': {
            x: img.x,
            y: img.y,
            w: img.width,
            h: img.height
        }
    });
}

background.js（为简单起见，输出到控制台）：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "imgData") {
        var imgData = request.data;
        chrome.tabs.executeScript(null, {code: "window.scrollTo(0, "+imgData.y+");"});
        chrome.tabs.captureVisibleTab(null, {format: 'png', quality: 100}, function(src) {
            var canvas = document.createElement("canvas");
                canvas.width = 96;
                canvas.height = 96;
            var ctx = canvas.getContext('2d');
            var image = new Image();
                image.src = src;
                image.onload = function(){
                ctx.drawImage(image, imgData.x, imgData.y, imgData.w, imgData.h, 0, 0, 96, 96);
        console.log(canvas.toDataURL("image/png", ""));
                }
        });

});

但是有一个问题：由于扩展功能的异步性质，它在连续循环中不能很好地工作，我可以为所有图像分配2-3个缩略图，即生成的不同图像获得一个缩略图。

也许有一些更简单的解决方案？或者，如果没有，我该如何更换一个循环？

Answer 1

注意：我不确定这个答案是否有效。如果没有，我很乐意将其删除。

您可以尝试绕过跨域权限，而不是使用captureVisibleTab的严厉方法。

假设图像是从cdn.images.com提供的。您需要在清单中添加（或者如果有许多服务器的相应匹配模式）：

"permissions" : [
   "*://cdn.images.com/*",
   ...
]

这可以从扩展程序的背景页面启用跨源XHR。

然后你应能够将图像作为带有XHR的blob获得;因为这会清除它的起源，你现在可以用它来生成你的缩略图。

This question处理如何操作。

在扩展中获取图像的缩略图

1 个答案: