mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

removed jQuery.css dependancy and few general CSS bug fixes

Browse Source
This commit is contained in:
Niklas von Hertzen 2012-03-03 19:18:39 +02:00
parent e84d505f46
commit 4579fb25c6
7 changed files with 129 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -6,9 +6,6 @@
/tests/flashcanvas.html
/lib/
/build/
index.html
image.jpg
screenshots.html
screenshots_local.html
/.project
/.settings/

150
src/Core.js
View File

@ -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,

6
src/Generate.js
View File

@ -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];

17
src/Preload.js
View File

@ -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.
}

13
tests/qunit/index.html
View File

@ -34,11 +34,16 @@
width:50px;
height:50px;
}
#paddingPercentage div {
width:50px;
height:50px;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture" style="display:none;">
<div id="qunit-fixture" style="visibility:none; height:1px; overflow:scroll;">
<div id="borders">
<div style="border-width: 1px 0;"></div>
<div style="border-width: 1em 0;"></div>
@ -55,13 +60,17 @@
<div style="padding: 1px 0;"></div>
<div style="padding: 1em 0;"></div>
<div style="padding: thin medium thick;"></div>
<div style="padding: 5% 6px 12%;"></div>
<div style="padding: 5em 5ex 5in 5cm;"></div>
<div style="padding: 500em 500ex 500in 500cm;"></div>
<div style="padding: 5mm 5pt 5pc 5px;"></div>
<div style="padding: 500mm 500pt 500pc 500px;"></div>
<div style="padding: 1px 5%;"></div>
<div style="padding: 15% 0 3%;"></div>
</div>
<div id="backgroundPosition">
<div style="background-position: 1px 0;"></div>
<div style="background-position: 1em 0;"></div>

28
tests/qunit/unit/css.js
View File

@ -1,9 +1,3 @@
/*
* @author Niklas von Hertzen <niklas at hertzen.com>
* @created 3.3.2012
* @website http://hertzen.com
*/
module("CSS");
$(function() {
@ -76,7 +70,7 @@ $(function() {
} else if (expect === "thick") {
expect = "5px";
}
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + expect );
});
});
@ -97,6 +91,8 @@ $(function() {
});
});
var propsToTest3 = ["backgroundPosition"],
@ -109,11 +105,17 @@ $(function() {
var img = new Image();
img.width = 50;
img.height = 50;
var item = _html2canvas.Util.getCSS(el, prop),
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img);
var split = $(el).css(prop).split(" ");
var item = _html2canvas.Util.getCSS(el, prop),
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img),
split;
if ( window.getComputedStyle ) {
split = $(el).css(prop).split(" ");
} else {
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")]
}
var testEl = $('<div />').css({
'position': 'absolute',
'left': split[0],
@ -125,8 +127,8 @@ $(function() {
QUnit.equal( pos.left, parseFloat(testEl.css('left'), 10), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item );
QUnit.equal( pos.top, parseFloat(testEl.css('top'), 10), "div #" + (i + 1) + " background-position-y equals " + pos.top );
QUnit.equal( pos.left, Math.round(parseFloat(testEl.css('left'), 10)), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item );
QUnit.equal( pos.top, Math.round(parseFloat(testEl.css('top'), 10)), "div #" + (i + 1) + " background-position-y equals " + pos.top );
testEl.remove();

4
tests/test.js
View File

@ -5,7 +5,7 @@
Released under MIT License
*/
var h2cSelector = document.body, h2cOptions;
var h2cSelector, h2cOptions;
(function(document, window) {
var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
document.write(scrStart + '../external/jquery-1.6.2.js' + scrEnd);
@ -17,7 +17,9 @@ var h2cSelector = document.body, h2cOptions;
if (window.setUp) {
window.setUp();
}
h2cSelector = [document.body];
setTimeout(function() {
$(h2cSelector).html2canvas($.extend({
flashcanvas: "../external/flashcanvas.min.js",
logging: true,