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) {
this.src = src;
this.image = new Image();
var image = this.image;
var self = this;
this.promise = new Promise(function(resolve, reject) {
image.onload = resolve;
image.onerror = reject;
self.image.onload = resolve;
self.image.onerror = reject;
if (cors) {
image.crossOrigin = "anonymous";
self.image.crossOrigin = "anonymous";
}
image.src = src;
if (image.complete === true) {
resolve(image);
self.image.src = src;
if (self.image.complete === true) {
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;
this.src = src;
this.image = new Image();
var image = this.image;
var self = this;
this.promise = new Promise(function(resolve, reject) {
image.onload = resolve;
image.onerror = reject;
self.image.onload = resolve;
self.image.onerror = reject;
window[callbackName] = function(a){
if (a.substring(0,6) === "error:"){
reject();
} 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)
try {
@ -27,6 +27,11 @@ function ProxyImageContainer(src, proxy) {
script.setAttribute("type", "text/javascript");
script.setAttribute("src", requestUrl);
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>
Image without src attribute, should not crash:
<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>
</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.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;
for (i = 0; i < html2canvas.length; ++i) {
document.write(srcStart + '/src/' + html2canvas[i] + '.js?' + Math.random() + scrEnd);