Don't fail on broken images

This commit is contained in:
Niklas von Hertzen 2014-03-15 13:20:05 +02:00
parent 25d892f525
commit 81c22866bc
5 changed files with 42 additions and 12 deletions

View File

@ -0,0 +1,17 @@
function DummyImageContainer(src) {
this.src = src;
log("DummyImageContainer for", src);
if (!this.promise || !this.image) {
log("Initiating DummyImageContainer");
DummyImageContainer.prototype.image = new Image();
var image = this.image;
DummyImageContainer.prototype.promise = new Promise(function(resolve, reject) {
image.onload = resolve;
image.onerror = reject;
image.src = smallImage();
if (image.complete === true) {
resolve(image);
}
});
}
}

View File

@ -1,16 +1,21 @@
function ImageContainer(src, cors) { function ImageContainer(src, cors) {
this.src = src; this.src = src;
this.image = new Image(); this.image = new Image();
var image = this.image; var self = this;
this.promise = new Promise(function(resolve, reject) { this.promise = new Promise(function(resolve, reject) {
image.onload = resolve; self.image.onload = resolve;
image.onerror = reject; self.image.onerror = reject;
if (cors) { if (cors) {
image.crossOrigin = "anonymous"; self.image.crossOrigin = "anonymous";
} }
image.src = src; self.image.src = src;
if (image.complete === true) { if (self.image.complete === true) {
resolve(image); resolve(self.image);
} }
})['catch'](function() {
var dummy = new DummyImageContainer(src);
return dummy.promise.then(function(image) {
self.image = image;
});
}); });
} }

View File

@ -7,16 +7,16 @@ function ProxyImageContainer(src, proxy) {
var requestUrl = proxy + ((proxy.indexOf("?") > -1) ? "&" : "?" ) + 'url=' + encodeURIComponent(src) + '&callback=' + callbackName; var requestUrl = proxy + ((proxy.indexOf("?") > -1) ? "&" : "?" ) + 'url=' + encodeURIComponent(src) + '&callback=' + callbackName;
this.src = src; this.src = src;
this.image = new Image(); this.image = new Image();
var image = this.image; var self = this;
this.promise = new Promise(function(resolve, reject) { this.promise = new Promise(function(resolve, reject) {
image.onload = resolve; self.image.onload = resolve;
image.onerror = reject; self.image.onerror = reject;
window[callbackName] = function(a){ window[callbackName] = function(a){
if (a.substring(0,6) === "error:"){ if (a.substring(0,6) === "error:"){
reject(); reject();
} else { } else {
image.src = a; self.image.src = a;
} }
window[callbackName] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9) window[callbackName] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
try { try {
@ -27,6 +27,11 @@ function ProxyImageContainer(src, proxy) {
script.setAttribute("type", "text/javascript"); script.setAttribute("type", "text/javascript");
script.setAttribute("src", requestUrl); script.setAttribute("src", requestUrl);
document.body.appendChild(script); document.body.appendChild(script);
})['catch'](function() {
var dummy = new DummyImageContainer(src);
return dummy.promise.then(function(image) {
self.image = image;
});
}); });
} }

View File

@ -8,6 +8,9 @@
<body> <body>
Image without src attribute, should not crash: Image without src attribute, should not crash:
<img style="width:50px;height:50px;border:1px solid red;display:block;" /> <img style="width:50px;height:50px;border:1px solid red;display:block;" />
Image with broken src attribute, should not crash:
<img src="404" style="width:50px;height:50px;border:1px solid red;display:block;" />
<img src="404_2" style="width:50px;height:50px;border:1px solid red;display:block;" />
</body> </body>
</html> </html>

View File

@ -11,7 +11,7 @@ var h2cSelector, h2cOptions;
document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd); document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd);
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd); document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
var html2canvas = ['log', 'nodecontainer', 'stackingcontext', 'textcontainer', 'support', 'imagecontainer', 'proxyimagecontainer', 'gradientcontainer', 'lineargradientcontainer', 'webkitgradientcontainer', var html2canvas = ['log', 'nodecontainer', 'stackingcontext', 'textcontainer', 'support', 'imagecontainer', 'dummyimagecontainer', 'proxyimagecontainer', 'gradientcontainer', 'lineargradientcontainer', 'webkitgradientcontainer',
'imageloader', 'nodeparser', 'font', 'fontmetrics', 'core', 'renderer', 'promise', 'renderers/canvas'], i; 'imageloader', 'nodeparser', 'font', 'fontmetrics', 'core', 'renderer', 'promise', 'renderers/canvas'], i;
for (i = 0; i < html2canvas.length; ++i) { for (i = 0; i < html2canvas.length; ++i) {
document.write(srcStart + '/src/' + html2canvas[i] + '.js?' + Math.random() + scrEnd); document.write(srcStart + '/src/' + html2canvas[i] + '.js?' + Math.random() + scrEnd);