Question

注意数据：img images ...我不知道如何从内存和document.images中删除它们...

too many data:img being saved in memory and are slowing me down

我正在撰写Chrome扩展程序。它有点像一个混合截图应用程序，基本上当用户滚动它需要用户滚动到屏幕的新部分并将其附加到整个网站的主屏幕截图（是的，我已经使用谷歌截图应用程序）。我的代码有效，但是当我将img从扩展名传递给内容脚本时，它将数据存储：img sources到我无法访问的内存中的某个地方。我已经尝试过document.images并进行了测试，看看它们是否可以插入但没有运气。

如果您有兴趣，请提供代码。

page.js

var ovr = 0;
var run = (window==window.top)?1:0;
if(run&&ovr){
function obj(){
    window.onload = function(){
        obj.conversion = .5;
        obj.screenShot();
        obj.startRecordingScroll();
        obj.showShot(); 
    };

}
obj.showShot = function(){
    obj.fullShot = document.createElement('canvas');
    obj.fullShot.zIndex = -100;
    obj.fullShot.style.position = 'fixed';
    obj.fullShot.style.top = '70px';
    obj.fullShot.style.right = '20px';
    obj.fullShot.style.backgroundColor = '#999999';
    obj.fullShot.width = window.innerWidth*obj.conversion;
    obj.fullShot.height = document.height*obj.conversion;
    document.body.appendChild(obj.fullShot);
    obj.ctx = obj.fullShot.getContext('2d');
};
obj.startRecordingScroll = function(){
    document.onscroll = function(){
        obj.scroll();
    };
};
obj.scroll = function(){
    var pagxoff = window.pageXOffset;
    var pagyoff = window.pageYOffset;
    alert(document.images.length);
    console.log("scroll");
    obj.screenShot();

};
obj.displayScreenShot = function(img){
    console.log('displayScreenShot');
    var ycur = window.pageYOffset;
    var yMaxCur = window.innerHeight+window.pageYOffset;
    var distance = yMaxCur - obj.lastMaxYSeen;
    distance = Math.abs(distance);
    if(!obj.firstRunShot){
        obj.lastMinYSeen = window.pageYOffset;
        obj.lastMinXSeen = window.pageXOffset;
        obj.lastMaxYSeen = (window.innerHeight+window.pageYOffset);
        obj.lastMaxXSeen = (window.innerWidth+window.pageXOffset);
        var shot = document.createElement('img');
        shot.src = img;
        console.log(img);
        shot.onload = function(){
            obj.ctx.drawImage(
                shot,
                0, // 0 right
                0, // 0 down
                window.innerWidth, // viewport width
                window.innerHeight, // viewport height
                0, // 0 right
                0, // 0 down
                window.innerWidth*obj.conversion,
                window.innerHeight*obj.conversion
            );
        };
        obj.firstRunShot = true;
        return;
    }

    if(obj.firstRunShot){
        if(ycur>obj.lastMinYSeen){
            obj.lastMinYSeen = window.pageYOffset;
            obj.lastMinXSeen = window.pageXOffset;
            obj.lastMaxYSeen = (window.innerHeight+window.pageYOffset);
            obj.lastMaxXSeen = (window.innerWidth+window.pageXOffset);
            var xshot = document.createElement('img');
            xshot.src = img;
            xshot.onload = function(){
                obj.ctx.drawImage(
                    xshot,
                    0,
                    window.innerHeight-distance,
                    window.innerWidth,
                    distance,
                    0,
                    (obj.lastMaxYSeen-distance)*obj.conversion,
                    window.innerWidth*obj.conversion,
                    (distance)*obj.conversion
                );
            };
            return;
        }
    }
};
obj.screenShot = function(){
    var port = chrome.extension.connect({
        name: "screenshot"
    });
    port.postMessage({
        request: "screenshot"
    });
    port.onMessage.addListener(function (msg) {
        obj.displayScreenShot(msg);
    });
    console.log('screenShot');
};

var builder = new obj();
}

Answer 1

如果您想通过删除节点删除某些资源修改DOM，则可以使用chrome.devtools.inspectedWindow API跟踪这些资源的所有内容added和manipulate。

document.images确实包含资源。

enter image description here

Resources panel可让您检查已检查页面中加载的资源，您是否将图像加载到已检查的页面中以显示在此处？

如果您尝试使用FILE API将图像存储到本地磁盘，请记住它们是沙盒并且无法通过其他方式访问。

我如何处理数据：img元素填充在我的资源中？

1 个答案:

参考