mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
IE fix
This commit is contained in:
MoyuScript
parent
76e41772f2
commit
e4837f83eb
680
src/Preload.js
680
src/Preload.js
@ -1,340 +1,340 @@
|
|||||||
/*
|
/*
|
||||||
html2canvas @VERSION@ <http://html2canvas.hertzen.com>
|
html2canvas @VERSION@ <http://html2canvas.hertzen.com>
|
||||||
Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
Copyright (c) 2011 Niklas von Hertzen. All rights reserved.
|
||||||
http://www.twitter.com/niklasvh
|
http://www.twitter.com/niklasvh
|
||||||
|
|
||||||
Released under MIT License
|
Released under MIT License
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html2canvas.Preload = function(element, opts){
|
html2canvas.Preload = function(element, opts){
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
proxy: "http://html2canvas.appspot.com/",
|
proxy: "http://html2canvas.appspot.com/",
|
||||||
timeout: 0 // no timeout
|
timeout: 0 // no timeout
|
||||||
},
|
},
|
||||||
images = {
|
images = {
|
||||||
numLoaded: 0, // also failed are counted here
|
numLoaded: 0, // also failed are counted here
|
||||||
numFailed: 0,
|
numFailed: 0,
|
||||||
numTotal: 0,
|
numTotal: 0,
|
||||||
cleanupDone: false
|
cleanupDone: false
|
||||||
},
|
},
|
||||||
pageOrigin = window.location.protocol + window.location.host,
|
pageOrigin,
|
||||||
methods,
|
methods,
|
||||||
i,
|
i,
|
||||||
count = 0,
|
count = 0,
|
||||||
doc = element.ownerDocument,
|
doc = element.ownerDocument,
|
||||||
domImages = doc.images, // TODO probably should limit it to images present in the element only
|
domImages = doc.images, // TODO probably should limit it to images present in the element only
|
||||||
imgLen = domImages.length,
|
imgLen = domImages.length,
|
||||||
link = doc.createElement("a");
|
link = doc.createElement("a");
|
||||||
|
|
||||||
link.href = window.location.href;
|
link.href = window.location.href;
|
||||||
pageOrigin = link.protocol + link.host;
|
pageOrigin = link.protocol + link.host;
|
||||||
opts = opts || {};
|
opts = opts || {};
|
||||||
|
|
||||||
options = html2canvas.Util.Extend(opts, options);
|
options = html2canvas.Util.Extend(opts, options);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
element = element || doc.body;
|
element = element || doc.body;
|
||||||
|
|
||||||
function isSameOrigin(url){
|
function isSameOrigin(url){
|
||||||
link.href = url;
|
link.href = url;
|
||||||
var origin = link.protocol + link.host;
|
var origin = link.protocol + link.host;
|
||||||
return ":" === origin || (origin === pageOrigin);
|
return ":" === origin || (origin === pageOrigin);
|
||||||
}
|
}
|
||||||
|
|
||||||
function start(){
|
function start(){
|
||||||
html2canvas.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
|
html2canvas.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
|
||||||
if (!images.firstRun && images.numLoaded >= images.numTotal){
|
if (!images.firstRun && images.numLoaded >= images.numTotal){
|
||||||
|
|
||||||
/*
|
/*
|
||||||
this.log('Finished loading '+this.imagesLoaded+' images, Started parsing');
|
this.log('Finished loading '+this.imagesLoaded+' images, Started parsing');
|
||||||
this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
|
this.bodyOverflow = document.getElementsByTagName('body')[0].style.overflow;
|
||||||
document.getElementsByTagName('body')[0].style.overflow = "hidden";
|
document.getElementsByTagName('body')[0].style.overflow = "hidden";
|
||||||
*/
|
*/
|
||||||
if (typeof options.complete === "function"){
|
if (typeof options.complete === "function"){
|
||||||
options.complete(images);
|
options.complete(images);
|
||||||
}
|
}
|
||||||
|
|
||||||
html2canvas.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
|
html2canvas.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function proxyGetImage(url, img){
|
function proxyGetImage(url, img){
|
||||||
var callback_name,
|
var callback_name,
|
||||||
scriptUrl = options.proxy,
|
scriptUrl = options.proxy,
|
||||||
script,
|
script,
|
||||||
imgObj = images[url];
|
imgObj = images[url];
|
||||||
|
|
||||||
link.href = url;
|
link.href = url;
|
||||||
url = link.href; // work around for pages with base href="" set - WARNING: this may change the url -> so access imgObj from images map before changing that url!
|
url = link.href; // work around for pages with base href="" set - WARNING: this may change the url -> so access imgObj from images map before changing that url!
|
||||||
|
|
||||||
callback_name = 'html2canvas_' + count;
|
callback_name = 'html2canvas_' + count;
|
||||||
imgObj.callbackname = callback_name;
|
imgObj.callbackname = callback_name;
|
||||||
|
|
||||||
if (scriptUrl.indexOf("?") > -1) {
|
if (scriptUrl.indexOf("?") > -1) {
|
||||||
scriptUrl += "&";
|
scriptUrl += "&";
|
||||||
} else {
|
} else {
|
||||||
scriptUrl += "?";
|
scriptUrl += "?";
|
||||||
}
|
}
|
||||||
scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
|
scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
|
||||||
|
|
||||||
window[callback_name] = function(a){
|
window[callback_name] = function(a){
|
||||||
if (a.substring(0,6) === "error:"){
|
if (a.substring(0,6) === "error:"){
|
||||||
imgObj.succeeded = false;
|
imgObj.succeeded = false;
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
images.numFailed++;
|
images.numFailed++;
|
||||||
start();
|
start();
|
||||||
} else {
|
} else {
|
||||||
img.onload = function(){
|
img.onload = function(){
|
||||||
imgObj.succeeded = true;
|
imgObj.succeeded = true;
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
start();
|
start();
|
||||||
};
|
};
|
||||||
img.src = a;
|
img.src = a;
|
||||||
}
|
}
|
||||||
window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
|
window[callback_name] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
|
||||||
try {
|
try {
|
||||||
delete window[callback_name]; // for all browser that support this
|
delete window[callback_name]; // for all browser that support this
|
||||||
} catch(ex) {}
|
} catch(ex) {}
|
||||||
script.parentNode.removeChild(script);
|
script.parentNode.removeChild(script);
|
||||||
script = null;
|
script = null;
|
||||||
imgObj.callbackname = undefined;
|
imgObj.callbackname = undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
count += 1;
|
count += 1;
|
||||||
|
|
||||||
script = doc.createElement("script");
|
script = doc.createElement("script");
|
||||||
script.setAttribute("src", scriptUrl);
|
script.setAttribute("src", scriptUrl);
|
||||||
script.setAttribute("type", "text/javascript");
|
script.setAttribute("type", "text/javascript");
|
||||||
imgObj.script = script;
|
imgObj.script = script;
|
||||||
window.document.body.appendChild(script);
|
window.document.body.appendChild(script);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
// enable xhr2 requests where available (no need for base64 / json)
|
// enable xhr2 requests where available (no need for base64 / json)
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
data:{
|
data:{
|
||||||
xhr2:false,
|
xhr2:false,
|
||||||
url:url
|
url:url
|
||||||
},
|
},
|
||||||
url: options.proxy,
|
url: options.proxy,
|
||||||
dataType: "jsonp",
|
dataType: "jsonp",
|
||||||
success: function(a){
|
success: function(a){
|
||||||
|
|
||||||
if (a.substring(0,6) === "error:"){
|
if (a.substring(0,6) === "error:"){
|
||||||
images.splice(getIndex(images, url), 2);
|
images.splice(getIndex(images, url), 2);
|
||||||
start();
|
start();
|
||||||
}else{
|
}else{
|
||||||
img.onload = function(){
|
img.onload = function(){
|
||||||
imagesLoaded+=1;
|
imagesLoaded+=1;
|
||||||
start();
|
start();
|
||||||
|
|
||||||
};
|
};
|
||||||
img.src = a;
|
img.src = a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
error: function(){
|
error: function(){
|
||||||
images.splice(getIndex(images, url), 2);
|
images.splice(getIndex(images, url), 2);
|
||||||
start();
|
start();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
function getImages (el) {
|
function getImages (el) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// if (!this.ignoreRe.test(el.nodeName)){
|
// if (!this.ignoreRe.test(el.nodeName)){
|
||||||
//
|
//
|
||||||
|
|
||||||
var contents = html2canvas.Util.Children(el),
|
var contents = html2canvas.Util.Children(el),
|
||||||
i,
|
i,
|
||||||
contentsLen = contents.length,
|
contentsLen = contents.length,
|
||||||
background_image,
|
background_image,
|
||||||
src,
|
src,
|
||||||
img,
|
img,
|
||||||
elNodeType = false;
|
elNodeType = false;
|
||||||
|
|
||||||
for (i = 0; i < contentsLen; i+=1 ){
|
for (i = 0; i < contentsLen; i+=1 ){
|
||||||
// var ignRe = new RegExp("("+this.ignoreElements+")");
|
// var ignRe = new RegExp("("+this.ignoreElements+")");
|
||||||
// if (!ignRe.test(element.nodeName)){
|
// if (!ignRe.test(element.nodeName)){
|
||||||
getImages(contents[i]);
|
getImages(contents[i]);
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// }
|
// }
|
||||||
try {
|
try {
|
||||||
elNodeType = el.nodeType;
|
elNodeType = el.nodeType;
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
elNodeType = false;
|
elNodeType = false;
|
||||||
html2canvas.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
|
html2canvas.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (elNodeType === 1 || elNodeType === undefined){
|
if (elNodeType === 1 || elNodeType === undefined){
|
||||||
|
|
||||||
background_image = html2canvas.Util.getCSS(el, 'backgroundImage');
|
background_image = html2canvas.Util.getCSS(el, 'backgroundImage');
|
||||||
|
|
||||||
if ( background_image && background_image !== "1" && background_image !== "none" ) {
|
if ( background_image && background_image !== "1" && background_image !== "none" ) {
|
||||||
|
|
||||||
// TODO add multi image background support
|
// TODO add multi image background support
|
||||||
|
|
||||||
if (background_image.substring(0,7) === "-webkit" || background_image.substring(0,3) === "-o-" || background_image.substring(0,4) === "-moz") {
|
if (background_image.substring(0,7) === "-webkit" || background_image.substring(0,3) === "-o-" || background_image.substring(0,4) === "-moz") {
|
||||||
|
|
||||||
img = html2canvas.Generate.Gradient( background_image, html2canvas.Util.Bounds( el ) );
|
img = html2canvas.Generate.Gradient( background_image, html2canvas.Util.Bounds( el ) );
|
||||||
|
|
||||||
if ( img !== undefined ){
|
if ( img !== undefined ){
|
||||||
images[background_image] = { img: img, succeeded: true };
|
images[background_image] = { img: img, succeeded: true };
|
||||||
images.numTotal++;
|
images.numTotal++;
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
start();
|
start();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
src = html2canvas.Util.backgroundImage(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]);
|
src = html2canvas.Util.backgroundImage(background_image.match(/data:image\/.*;base64,/i) ? background_image : background_image.split(",")[0]);
|
||||||
methods.loadImage(src);
|
methods.loadImage(src);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
if (background_image && background_image !== "1" && background_image !== "none" && background_image.substring(0,7) !== "-webkit" && background_image.substring(0,3)!== "-o-" && background_image.substring(0,4) !== "-moz"){
|
if (background_image && background_image !== "1" && background_image !== "none" && background_image.substring(0,7) !== "-webkit" && background_image.substring(0,3)!== "-o-" && background_image.substring(0,4) !== "-moz"){
|
||||||
// TODO add multi image background support
|
// TODO add multi image background support
|
||||||
src = html2canvas.Util.backgroundImage(background_image.split(",")[0]);
|
src = html2canvas.Util.backgroundImage(background_image.split(",")[0]);
|
||||||
methods.loadImage(src); */
|
methods.loadImage(src); */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
methods = {
|
methods = {
|
||||||
loadImage: function( src ) {
|
loadImage: function( src ) {
|
||||||
var img;
|
var img;
|
||||||
if ( images[src] === undefined ) {
|
if ( images[src] === undefined ) {
|
||||||
if ( src.match(/data:image\/.*;base64,/i) ) {
|
if ( src.match(/data:image\/.*;base64,/i) ) {
|
||||||
|
|
||||||
//Base64 src
|
//Base64 src
|
||||||
img = new Image();
|
img = new Image();
|
||||||
img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
|
img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
|
||||||
images[src] = { img: img, succeeded: true };
|
images[src] = { img: img, succeeded: true };
|
||||||
images.numTotal++;
|
images.numTotal++;
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
start();
|
start();
|
||||||
|
|
||||||
}else if ( isSameOrigin( src ) ) {
|
}else if ( isSameOrigin( src ) ) {
|
||||||
|
|
||||||
img = new Image();
|
img = new Image();
|
||||||
images[src] = { img: img };
|
images[src] = { img: img };
|
||||||
images.numTotal++;
|
images.numTotal++;
|
||||||
|
|
||||||
img.onload = function() {
|
img.onload = function() {
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
images[src].succeeded = true;
|
images[src].succeeded = true;
|
||||||
start();
|
start();
|
||||||
};
|
};
|
||||||
|
|
||||||
img.onerror = function() {
|
img.onerror = function() {
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
images.numFailed++;
|
images.numFailed++;
|
||||||
images[src].succeeded = false;
|
images[src].succeeded = false;
|
||||||
start();
|
start();
|
||||||
};
|
};
|
||||||
|
|
||||||
img.src = src;
|
img.src = src;
|
||||||
|
|
||||||
}else if ( options.proxy ){
|
}else if ( options.proxy ){
|
||||||
// console.log('b'+src);
|
// console.log('b'+src);
|
||||||
img = new Image();
|
img = new Image();
|
||||||
images[src] = { img: img };
|
images[src] = { img: img };
|
||||||
images.numTotal++;
|
images.numTotal++;
|
||||||
proxyGetImage( src, img );
|
proxyGetImage( src, img );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
cleanupDOM: function(cause) {
|
cleanupDOM: function(cause) {
|
||||||
var img;
|
var img;
|
||||||
if (!images.cleanupDone) {
|
if (!images.cleanupDone) {
|
||||||
if (cause && typeof cause === "string") {
|
if (cause && typeof cause === "string") {
|
||||||
html2canvas.log("html2canvas: Cleanup because: " + cause);
|
html2canvas.log("html2canvas: Cleanup because: " + cause);
|
||||||
} else {
|
} else {
|
||||||
html2canvas.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
|
html2canvas.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (src in images) {
|
for (src in images) {
|
||||||
if (images.hasOwnProperty(src)) {
|
if (images.hasOwnProperty(src)) {
|
||||||
img = images[src];
|
img = images[src];
|
||||||
if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
|
if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
|
||||||
// cancel proxy image request
|
// cancel proxy image request
|
||||||
window[img.callbackname] = undefined; // to work with IE<9 // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
|
window[img.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 {
|
||||||
delete window[img.callbackname]; // for all browser that support this
|
delete window[img.callbackname]; // for all browser that support this
|
||||||
} catch(ex) {}
|
} catch(ex) {}
|
||||||
if (img.script && img.script.parentNode) {
|
if (img.script && img.script.parentNode) {
|
||||||
img.script.setAttribute("src", "about:blank"); // try to cancel running request
|
img.script.setAttribute("src", "about:blank"); // try to cancel running request
|
||||||
img.script.parentNode.removeChild(img.script);
|
img.script.parentNode.removeChild(img.script);
|
||||||
}
|
}
|
||||||
images.numLoaded++;
|
images.numLoaded++;
|
||||||
images.numFailed++;
|
images.numFailed++;
|
||||||
html2canvas.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
|
html2canvas.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// cancel any pending requests
|
// cancel any pending requests
|
||||||
if(window.stop !== undefined) {
|
if(window.stop !== undefined) {
|
||||||
window.stop();
|
window.stop();
|
||||||
} else if(document.execCommand !== undefined) {
|
} else if(document.execCommand !== undefined) {
|
||||||
document.execCommand("Stop", false);
|
document.execCommand("Stop", false);
|
||||||
}
|
}
|
||||||
if (document.close !== undefined) {
|
if (document.close !== undefined) {
|
||||||
document.close();
|
document.close();
|
||||||
}
|
}
|
||||||
images.cleanupDone = true;
|
images.cleanupDone = true;
|
||||||
if (!(cause && typeof cause === "string")) {
|
if (!(cause && typeof cause === "string")) {
|
||||||
start();
|
start();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
renderingDone: function() {
|
renderingDone: function() {
|
||||||
if (timeoutTimer) {
|
if (timeoutTimer) {
|
||||||
window.clearTimeout(timeoutTimer);
|
window.clearTimeout(timeoutTimer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (options.timeout > 0) {
|
if (options.timeout > 0) {
|
||||||
timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
|
timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
|
||||||
}
|
}
|
||||||
var startTime = (new Date()).getTime();
|
var startTime = (new Date()).getTime();
|
||||||
this.log('html2canvas: Preload starts: finding background-images');
|
this.log('html2canvas: Preload starts: finding background-images');
|
||||||
images.firstRun = true;
|
images.firstRun = true;
|
||||||
|
|
||||||
getImages( element );
|
getImages( element );
|
||||||
|
|
||||||
this.log('html2canvas: Preload: Finding images');
|
this.log('html2canvas: Preload: Finding images');
|
||||||
// load <img> images
|
// load <img> images
|
||||||
for (i = 0; i < imgLen; i+=1){
|
for (i = 0; i < imgLen; i+=1){
|
||||||
var imgSrc = domImages[i].getAttribute( "src" );
|
var imgSrc = domImages[i].getAttribute( "src" );
|
||||||
if ( imgSrc ) {
|
if ( imgSrc ) {
|
||||||
methods.loadImage( imgSrc );
|
methods.loadImage( imgSrc );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
images.firstRun = false;
|
images.firstRun = false;
|
||||||
this.log('html2canvas: Preload: Done.');
|
this.log('html2canvas: Preload: Done.');
|
||||||
if ( images.numTotal === images.numLoaded ) {
|
if ( images.numTotal === images.numLoaded ) {
|
||||||
start();
|
start();
|
||||||
}
|
}
|
||||||
|
|
||||||
return methods;
|
return methods;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user