3
Я пытаюсь сделать снимок экрана, который снимает скриншот всей страницы, перемещая окно с помощью scrollTo и сшивая изображения вместе на холсте во всплывающем окне. Тем не менее, моя проблема заключается в том, что все образы im, возвращающиеся назад, не выводятся/не отображаются на холсте.chrome extention canvas not drawing images внутри цикла
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 «Вызов нового параметра (), новый Image(), новый конструктор DOM() DOM на странице делает недействительным один и тот же конструктор в сценариях контента (и наоборот) ») –
нет, это не решило – Raptrex