data:img 画像に注意してください...それらをメモリから削除する方法がわかりません。また、document.images にはそれらが含まれていません...
私はChrome拡張機能を書いています。ハイブリッド スクリーンショット アプリのようなもので、基本的にユーザーがスクロールすると、ユーザーがスクロールした画面の新しい部分を取得し、それをサイト全体のマスター スクリーンショットに追加します (Google スクリーンショット アプリを使用しました)。私のコードは機能しますが、拡張機能からコンテンツ スクリプトに 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();
}
