Correctly assign image loading method for <img> elements

This commit is contained in:
MoyuScript 2014-02-08 14:07:20 +02:00
parent 69390d6b8f
commit f1482b8c2f
6 changed files with 195 additions and 179 deletions

View File

@ -22,8 +22,8 @@ window.html2canvas = function(nodeList, options) {
});
};
function renderDocument(document, options, width, height) {
return createWindowClone(document, width, height).then(function(container) {
function renderDocument(document, options, windowWidth, windowHeight) {
return createWindowClone(document, windowWidth, windowHeight).then(function(container) {
log("Document cloned");
var clonedWindow = container.contentWindow;
//var element = (nodeList === undefined) ? document.body : nodeList[0];
@ -31,8 +31,8 @@ function renderDocument(document, options, width, height) {
var support = new Support();
var imageLoader = new ImageLoader(options, support);
var bounds = NodeParser.prototype.getBounds(node);
var width = options.type === "view" ? Math.min(bounds.width, width) : documentWidth();
var height = options.type === "view" ? Math.min(bounds.height, height) : documentHeight();
var width = options.type === "view" ? Math.min(bounds.width, windowWidth) : documentWidth();
var height = options.type === "view" ? Math.min(bounds.height, windowHeight) : documentHeight();
var renderer = new CanvasRenderer(width, height, imageLoader);
var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() {
@ -208,7 +208,7 @@ function ImageLoader(options, support) {
ImageLoader.prototype.findImages = function(nodes) {
var images = [];
nodes.filter(isImage).map(src).forEach(this.addImage(images, this.loadImage), this);
nodes.filter(isImage).map(urlImage).forEach(this.addImage(images, this.loadImage), this);
return images;
};
@ -294,8 +294,11 @@ function isImage(container) {
return container.node.nodeName === "IMG";
}
function src(container) {
return container.node.src;
function urlImage(container) {
return {
args: [container.node.src],
method: "url"
};
}
function LinearGradientContainer(imageData) {
@ -390,6 +393,7 @@ NodeContainer.prototype.fontWeight = function() {
};
NodeContainer.prototype.parseBackgroundImages = function() {
function parseBackgrounds(backgroundImage) {
var whitespace = ' \r\n\t',
method, definition, prefix, prefix_i, block, results = [],
mode = 0, numParen = 0, quote, args;
@ -418,7 +422,7 @@ NodeContainer.prototype.parseBackgroundImages = function() {
};
args = [];
method = prefix = definition = block = '';
this.css("backgroundImage").split("").forEach(function(c) {
backgroundImage.split("").forEach(function(c) {
if (mode === 0 && whitespace.indexOf(c) > -1) {
return;
}
@ -483,8 +487,10 @@ NodeContainer.prototype.parseBackgroundImages = function() {
});
appendResult();
return results;
}
return this.backgroundImages || (this.backgroundImages = results);
return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
};
NodeContainer.prototype.cssList = function(property, index) {
@ -1225,6 +1231,8 @@ Renderer.prototype.renderBackgroundImage = function(container, bounds) {
log("Error loading background-image", backgroundImage.args[0]);
}
break;
case "none":
break;
default:
log("Unknown background-image type", backgroundImage.args[0]);
}

File diff suppressed because one or more lines are too long

View File

@ -13,8 +13,8 @@ window.html2canvas = function(nodeList, options) {
});
};
function renderDocument(document, options, width, height) {
return createWindowClone(document, width, height).then(function(container) {
function renderDocument(document, options, windowWidth, windowHeight) {
return createWindowClone(document, windowWidth, windowHeight).then(function(container) {
log("Document cloned");
var clonedWindow = container.contentWindow;
//var element = (nodeList === undefined) ? document.body : nodeList[0];
@ -22,8 +22,8 @@ function renderDocument(document, options, width, height) {
var support = new Support();
var imageLoader = new ImageLoader(options, support);
var bounds = NodeParser.prototype.getBounds(node);
var width = options.type === "view" ? Math.min(bounds.width, width) : documentWidth();
var height = options.type === "view" ? Math.min(bounds.height, height) : documentHeight();
var width = options.type === "view" ? Math.min(bounds.width, windowWidth) : documentWidth();
var height = options.type === "view" ? Math.min(bounds.height, windowHeight) : documentHeight();
var renderer = new CanvasRenderer(width, height, imageLoader);
var parser = new NodeParser(node, renderer, support, imageLoader, options);
return parser.ready.then(function() {

View File

@ -7,7 +7,7 @@ function ImageLoader(options, support) {
ImageLoader.prototype.findImages = function(nodes) {
var images = [];
nodes.filter(isImage).map(src).forEach(this.addImage(images, this.loadImage), this);
nodes.filter(isImage).map(urlImage).forEach(this.addImage(images, this.loadImage), this);
return images;
};
@ -93,6 +93,9 @@ function isImage(container) {
return container.node.nodeName === "IMG";
}
function src(container) {
return container.node.src;
function urlImage(container) {
return {
args: [container.node.src],
method: "url"
};
}

View File

@ -50,6 +50,7 @@ NodeContainer.prototype.fontWeight = function() {
};
NodeContainer.prototype.parseBackgroundImages = function() {
function parseBackgrounds(backgroundImage) {
var whitespace = ' \r\n\t',
method, definition, prefix, prefix_i, block, results = [],
mode = 0, numParen = 0, quote, args;
@ -78,7 +79,7 @@ NodeContainer.prototype.parseBackgroundImages = function() {
};
args = [];
method = prefix = definition = block = '';
this.css("backgroundImage").split("").forEach(function(c) {
backgroundImage.split("").forEach(function(c) {
if (mode === 0 && whitespace.indexOf(c) > -1) {
return;
}
@ -143,8 +144,10 @@ NodeContainer.prototype.parseBackgroundImages = function() {
});
appendResult();
return results;
}
return this.backgroundImages || (this.backgroundImages = results);
return this.backgroundImages || (this.backgroundImages = parseBackgrounds(this.css("backgroundImage")));
};
NodeContainer.prototype.cssList = function(property, index) {

View File

@ -69,6 +69,8 @@ Renderer.prototype.renderBackgroundImage = function(container, bounds) {
log("Error loading background-image", backgroundImage.args[0]);
}
break;
case "none":
break;
default:
log("Unknown background-image type", backgroundImage.args[0]);
}