diff --git a/.gitignore b/.gitignore index b9aa072..aa66a8c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,9 +6,6 @@ /tests/flashcanvas.html /lib/ /build/ -index.html image.jpg -screenshots.html -screenshots_local.html /.project /.settings/ diff --git a/src/Core.js b/src/Core.js index b503349..4609f9b 100644 --- a/src/Core.js +++ b/src/Core.js @@ -4,7 +4,7 @@ http://www.twitter.com/niklasvh Released under MIT License -*/ + */ "use strict"; var _html2canvas = {}, @@ -55,72 +55,98 @@ _html2canvas.Util.Bounds = function getBounds (el) { return bounds; - } /*else{ - - - p = $(el).offset(); - - return { - left: p.left + getCSS(el,"borderLeftWidth", true), - top: p.top + getCSS(el,"borderTopWidth", true), - width:$(el).innerWidth(), - height:$(el).innerHeight() - }; - - - } */ + } }; _html2canvas.Util.getCSS = function (el, attribute) { - // return jQuery(el).css(attribute); - /* - var val, - left, - rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ], - style = el.style; + // return $(el).css(attribute); - if ( el.currentStyle ) { - val = el.currentStyle[ attribute ]; - } else if (window.getComputedStyle) { - val = document.defaultView.getComputedStyle(el, null)[ attribute ]; - } - */ - // Check if we are not dealing with pixels, (Opera has issues with this) - // Ported from jQuery css.js - // From the awesome hack by Dean Edwards - // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 - - // If we're not dealing with a regular pixel number - // but a number that has a weird ending, we need to convert it to pixels + var val; - // if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) { - /* - // Remember the original values - left = style.left; + function toPX( attribute, val ) { + var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ], + left, + style = el.style; + + // Check if we are not dealing with pixels, (Opera has issues with this) + // Ported from jQuery css.js + // From the awesome hack by Dean Edwards + // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 + + // If we're not dealing with a regular pixel number + // but a number that has a weird ending, we need to convert it to pixels + if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) { + + // Remember the original values + left = style.left; + + // Put in the new values to get a computed value out + if ( rsLeft ) { + el.runtimeStyle.left = el.currentStyle.left; + } + style.left = attribute === "fontSize" ? "1em" : (val || 0); + val = style.pixelLeft + "px"; + + // Revert the changed values + style.left = left; + if ( rsLeft ) { + el.runtimeStyle.left = rsLeft; + } - // Put in the new values to get a computed value out - if ( rsLeft ) { - el.runtimeStyle.left = el.currentStyle.left; } - style.left = attribute === "fontSize" ? "1em" : (val || 0); - val = style.pixelLeft + "px"; + return val; + } + + + if ( window.getComputedStyle ) { + val = document.defaultView.getComputedStyle(el, null)[ attribute ]; + + if ( attribute === "backgroundPosition" ) { + + val = (val.split(",")[0] || "0 0").split(" "); + + val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ]; + val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always + val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ]; + } + + } else if ( el.currentStyle ) { + // IE 9> + if (attribute === "backgroundPosition") { + // Older IE uses -x and -y + val = [ toPX( attribute + "X", el.currentStyle[ attribute + "X" ] ), toPX( attribute + "Y", el.currentStyle[ attribute + "X" ] ) ]; + + } else { + + val = toPX( attribute, el.currentStyle[ attribute ] ); + + if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) { + switch (val) { + case "thin": + val = "1px"; + break; + case "medium": + val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around + break; + case "thick": + val = "5px"; + break; + } + } + } + + + + } + + - // Revert the changed values - style.left = left; - if ( rsLeft ) { - el.runtimeStyle.left = rsLeft; - }*/ - // val = $(el).css(attribute); - // } - /* - var val = $(el).css(attribute); + return val; - if (val === "medium") { - val = 3; - }*/ + - return $(el).css(attribute); +//return $(el).css(attribute); }; @@ -129,17 +155,7 @@ _html2canvas.Util.getCSS = function (el, attribute) { _html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) { // TODO add support for multi image backgrounds - var bgposition = (function( bgp ){ - - if (bgp !== undefined) { - return (bgp.split(",")[0] || "0 0").split(" "); - } else { - // Older IE uses -x and -y - return [ _html2canvas.Util.getCSS( el, "backgroundPositionX" ), _html2canvas.Util.getCSS( el, "backgroundPositionY" ) ]; - } - - - })( _html2canvas.Util.getCSS( el, "backgroundPosition" ) ), + var bgposition = _html2canvas.Util.getCSS( el, "backgroundPosition" ) , topPos, left, percentage, diff --git a/src/Generate.js b/src/Generate.js index 804c44a..932fca2 100644 --- a/src/Generate.js +++ b/src/Generate.js @@ -4,7 +4,7 @@ http://www.twitter.com/niklasvh Released under MIT License -*/ + */ _html2canvas.Generate = {}; @@ -30,7 +30,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) { canvas.width = bounds.width; canvas.height = bounds.height; - + function getColors(input) { var j = -1, color = '', @@ -51,7 +51,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) { } } } - + if ( (tmp = src.match(/-webkit-linear-gradient\((.*)\)/)) !== null ) { position = tmp[1].split( ",", 1 )[0]; diff --git a/src/Preload.js b/src/Preload.js index 9ab1904..6b77e2a 100644 --- a/src/Preload.js +++ b/src/Preload.js @@ -46,15 +46,15 @@ _html2canvas.Preload = function( options ) { function start(){ h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")"); if (!images.firstRun && images.numLoaded >= images.numTotal){ + h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")"); if (typeof options.complete === "function"){ options.complete(images); } - - h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")"); + } } - + // TODO modify proxy to serve images with CORS enabled, where available function proxyGetImage(url, img, imageObj){ var callback_name, @@ -179,6 +179,7 @@ _html2canvas.Preload = function( options ) { // CORS succeeded window.clearTimeout( imageObj.timer ); } + images.numLoaded++; imageObj.succeeded = true; start(); @@ -208,6 +209,16 @@ _html2canvas.Preload = function( options ) { start(); }; + + // TODO Opera has no load/error event for SVG images + + // Opera ninja onload's cached images + window.setTimeout(function(){ + if ( img.width !== 0 && imageObj.succeeded === undefined ) { + img.onload(); + } + }, 100); // needs a reflow for base64 encoded images? interestingly timeout of 0 doesn't work but 1 does. + } diff --git a/tests/qunit/index.html b/tests/qunit/index.html index 90bb23f..c5f2c47 100644 --- a/tests/qunit/index.html +++ b/tests/qunit/index.html @@ -34,11 +34,16 @@ width:50px; height:50px; } + + #paddingPercentage div { + width:50px; + height:50px; + }
-