0

注意数据:img 图像...我不知道如何从内存中删除它们,并且 document.images 不包含它们...

数据太多:img 被保存在内存中,让我放慢了速度

我正在编写一个 Chrome 扩展程序。它有点像一个混合屏幕截图应用程序,基本上当用户滚动时,它会将用户滚动到的屏幕的新部分附加到整个网站的主屏幕截图上(是的,我使用过谷歌的屏幕截图应用程序)。我的代码有效,但是当我将 img 从扩展传递到内容脚本时,它将 data:img 源存储到内存中我无法访问的某个位置。我已经尝试过 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();
}
4

1 回答 1

0

如果您想通过删除节点来删除某些资源修改 DOM,您可以使用 API 跟踪正在添加的资源并操作这些资源的所有内容。chrome.devtools.inspectedWindow

document.images 确实包含资源。

在此处输入图像描述

资源面板允许您检查在检查页面中加载的资源,您是否将图像加载到检查页面以显示在这里?

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

参考

于 2012-12-28T05:40:52.670 回答