Correctly assign image loading method for <img> elements

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

View File

@ -7,7 +7,7 @@ function ImageLoader(options, support) {
ImageLoader.prototype.findImages = function(nodes) { ImageLoader.prototype.findImages = function(nodes) {
var images = []; 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; return images;
}; };
@ -93,6 +93,9 @@ function isImage(container) {
return container.node.nodeName === "IMG"; return container.node.nodeName === "IMG";
} }
function src(container) { function urlImage(container) {
return container.node.src; return {
args: [container.node.src],
method: "url"
};
} }

View File

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