3
我想通過使用scrollTo移動窗口並在彈出窗口的畫布上拼接圖像來製作截取整個頁面的屏幕截圖。但是，我的問題是，所有的圖像回來都沒有被繪製/不顯示在畫布上。鉻擴展畫布不在循環內繪製圖像
popup.js
function draw(ctx, image, x ,y) {
console.log(image);
var img = new Image();
img.src = image;
img.onload = function() {
ctx.drawImage(img, x, y);
console.log('x',x);
console.log('y',y);
};
}
function screenshot(response) {
console.log('screenshot');
var canvas = document.getElementById('imagecanvas'),
fullHeight = response.height,
fullWidth = response.width,
visibleHeight = response.visibleHeight,
visibleWidth = response.visibleWidth,
x = 0,
y = 0;
canvas.height = fullHeight;
canvas.width = fullWidth;
var ctx = canvas.getContext('2d');
// console.log('canvas', canvas);
// console.log('context', ctx);
//start at the top
window.scrollTo(0, 0);
while (y <= fullHeight) {
chrome.tabs.captureVisibleTab(null, {
format: 'png'
}, function (image) {
draw(ctx, image, x, y);
});
// console.log('x',x);
// console.log('y',y);
y += visibleHeight;
window.scrollTo(x, y);
}
}
chrome.tabs.query({
'active': true,
'currentWindow':true
}, function(tab){
console.log('sending message');
chrome.tabs.sendMessage(tab[0].id, {
message: 'dom'
}, function(response){
console.log('response', response);
screenshot(response);
});
});
popup.html
<!doctype html>
<html>
<head>
<title>Chrome Snapshot</title>
<style>
#imagecanvas {
z-index: 100;
}
</style>
<script src="jquery-2.0.2.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<canvas id="imagecanvas"> </canvas>
</body>
</html>
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.message === 'dom') {
sendResponse({
height: document.height,
width: document.width,
visibleHeight: window.innerHeight,
visibleWidth: window.innerWidth
});
}
});
的manifest.json
{
"manifest_version": 2,
"name": "test",
"description": "Save images and screenshots of sites to Dropbox.",
"version": "1.0",
"permissions": [
"<all_urls>",
"tabs"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [
"jquery-2.0.2.min.js"
],
"persistent": false
},
"content_scripts" : [{
"all_frames": true,
"matches" : ["*://*/*"],
"js" : ["content.js"],
"run_at": "document_end"
}]
}
編輯迴應羅布的評論
繼承人是我迄今爲止：我可以看到被滾動的頁面，但現在，從captureVisibleTab圖像返回爲未定義。
popup.js
var ctx,
fullHeight,
fullWidth,
x,
y,
visibleHeight,
visibleWidth;
function draw(ctx, image, x ,y) {
console.log(image);
var img = new Image();
img.src = image;
img.onload = function() {
ctx.drawImage(img, x, y);
// console.log('x',x);
// console.log('y',y);
};
}
function next(tabID) {
chrome.tabs.captureVisibleTab(null, {
format: 'png'
}, function(image) {
console.log(image);
draw(ctx, image, x, y);
y += visibleHeight;
if (y < fullHeight) {
chrome.tabs.sendMessage(tabID, {
message: 'scroll',
x: x,
y: y
}, function() {
next(tabID);
});
}
});
}
function screenshot(response, tabID) {
console.log('screenshot');
var canvas = document.getElementById('imagecanvas');
fullHeight = response.height;
fullWidth = response.width;
visibleHeight = response.visibleHeight,
visibleWidth = response.visibleWidth;
x = 0,
y = 0;
canvas.height = fullHeight;
canvas.width = fullWidth;
ctx = canvas.getContext('2d');
chrome.tabs.sendMessage(tabID, {
message: 'scroll',
x: x,
y: y
}, function() {
next(tabID);
});
}
chrome.tabs.query({
active:true,
lastFocusedWindow:true
}, function(tab){
var tabID = tab[0].id;
console.log('sending message', tabID);
chrome.tabs.sendMessage(tabID, {
message: 'dom'
}, function(response){
console.log('dom info', response);
screenshot(response, tabID);
});
});
content.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.message === 'dom') {
sendResponse({
height: document.height,
width: document.width,
visibleHeight: window.innerHeight,
visibleWidth: window.innerWidth
});
} else if (request.message == 'scroll') {
window.scrollTo(request.x, request.y);
sendResponse();
}
});
嘗試'文檔。createElement（'img'）;'而不是'new Image（）;'。在Image構造函數的實現中存在一個錯誤 - 請參閱[http://crbug.com/245296]（https://code.google.com/p/chromium/issues/detail?id=245296「調用新選項（ ），新的圖像（），新的音頻（）在一個頁面的DOM構造函數在內容腳本無效相同的構造函數（反之亦然）「） –
沒有解決不了 – Raptrex