Skip to content

Commit 4579fb2

Browse files
niklasvhniklasvh
committed
removed jQuery.css dependancy and few general CSS bug fixes
1 parent e84d505 commit 4579fb2

7 files changed

Lines changed: 129 additions & 92 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66
/tests/flashcanvas.html
77
/lib/
88
/build/
9-
index.html
109
image.jpg
11-
screenshots.html
12-
screenshots_local.html
1310
/.project
1411
/.settings/

‎src/Core.js‎

Lines changed: 84 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
http://www.twitter.com/niklasvh
55
66
Released under MIT License
7-
*/
7+
*/
88
"use strict";
99

1010
var _html2canvas = {},
@@ -55,72 +55,98 @@ _html2canvas.Util.Bounds = function getBounds (el) {
5555

5656
return bounds;
5757

58-
} /*else{
59-
60-
61-
p = $(el).offset();
62-
63-
return {
64-
left: p.left + getCSS(el,"borderLeftWidth", true),
65-
top: p.top + getCSS(el,"borderTopWidth", true),
66-
width:$(el).innerWidth(),
67-
height:$(el).innerHeight()
68-
};
69-
70-
71-
} */
58+
}
7259
};
7360

7461
_html2canvas.Util.getCSS = function (el, attribute) {
75-
// return jQuery(el).css(attribute);
76-
/*
77-
var val,
78-
left,
79-
rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
80-
style = el.style;
62+
// return $(el).css(attribute);
8163

82-
if ( el.currentStyle ) {
83-
val = el.currentStyle[ attribute ];
84-
} else if (window.getComputedStyle) {
85-
val = document.defaultView.getComputedStyle(el, null)[ attribute ];
64+
var val;
65+
66+
function toPX( attribute, val ) {
67+
var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
68+
left,
69+
style = el.style;
70+
71+
// Check if we are not dealing with pixels, (Opera has issues with this)
72+
// Ported from jQuery css.js
73+
// From the awesome hack by Dean Edwards
74+
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
75+
76+
// If we're not dealing with a regular pixel number
77+
// but a number that has a weird ending, we need to convert it to pixels
78+
if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
79+
80+
// Remember the original values
81+
left = style.left;
82+
83+
// Put in the new values to get a computed value out
84+
if ( rsLeft ) {
85+
el.runtimeStyle.left = el.currentStyle.left;
86+
}
87+
style.left = attribute === "fontSize" ? "1em" : (val || 0);
88+
val = style.pixelLeft + "px";
89+
90+
// Revert the changed values
91+
style.left = left;
92+
if ( rsLeft ) {
93+
el.runtimeStyle.left = rsLeft;
94+
}
95+
96+
}
97+
return val;
8698
}
87-
*/
88-
// Check if we are not dealing with pixels, (Opera has issues with this)
89-
// Ported from jQuery css.js
90-
// From the awesome hack by Dean Edwards
91-
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
92-
93-
// If we're not dealing with a regular pixel number
94-
// but a number that has a weird ending, we need to convert it to pixels
9599

96-
// if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
97-
/*
98-
// Remember the original values
99-
left = style.left;
100-
101-
// Put in the new values to get a computed value out
102-
if ( rsLeft ) {
103-
el.runtimeStyle.left = el.currentStyle.left;
100+
101+
if ( window.getComputedStyle ) {
102+
val = document.defaultView.getComputedStyle(el, null)[ attribute ];
103+
104+
if ( attribute === "backgroundPosition" ) {
105+
106+
val = (val.split(",")[0] || "0 0").split(" ");
107+
108+
val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX( attribute + "X", val[ 0 ] ) : val[ 0 ];
109+
val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always
110+
val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX( attribute + "Y", val[ 1 ] ) : val[ 1 ];
111+
}
112+
113+
} else if ( el.currentStyle ) {
114+
// IE 9>
115+
if (attribute === "backgroundPosition") {
116+
// Older IE uses -x and -y
117+
val = [ toPX( attribute + "X", el.currentStyle[ attribute + "X" ] ), toPX( attribute + "Y", el.currentStyle[ attribute + "X" ] ) ];
118+
119+
} else {
120+
121+
val = toPX( attribute, el.currentStyle[ attribute ] );
122+
123+
if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {
124+
switch (val) {
125+
case "thin":
126+
val = "1px";
127+
break;
128+
case "medium":
129+
val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around
130+
break;
131+
case "thick":
132+
val = "5px";
133+
break;
134+
}
135+
}
104136
}
105-
style.left = attribute === "fontSize" ? "1em" : (val || 0);
106-
val = style.pixelLeft + "px";
107-
108-
// Revert the changed values
109-
style.left = left;
110-
if ( rsLeft ) {
111-
el.runtimeStyle.left = rsLeft;
112-
}*/
113-
// val = $(el).css(attribute);
114-
// }
137+
138+
139+
140+
}
141+
142+
143+
115144

116-
/*
117-
var val = $(el).css(attribute);
145+
return val;
118146

119-
if (val === "medium") {
120-
val = 3;
121-
}*/
147+
122148

123-
return $(el).css(attribute);
149+
//return $(el).css(attribute);
124150

125151

126152
};
@@ -129,17 +155,7 @@ _html2canvas.Util.getCSS = function (el, attribute) {
129155
_html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) {
130156
// TODO add support for multi image backgrounds
131157

132-
var bgposition = (function( bgp ){
133-
134-
if (bgp !== undefined) {
135-
return (bgp.split(",")[0] || "0 0").split(" ");
136-
} else {
137-
// Older IE uses -x and -y
138-
return [ _html2canvas.Util.getCSS( el, "backgroundPositionX" ), _html2canvas.Util.getCSS( el, "backgroundPositionY" ) ];
139-
}
140-
141-
142-
})( _html2canvas.Util.getCSS( el, "backgroundPosition" ) ),
158+
var bgposition = _html2canvas.Util.getCSS( el, "backgroundPosition" ) ,
143159
topPos,
144160
left,
145161
percentage,

‎src/Generate.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
http://www.twitter.com/niklasvh
55
66
Released under MIT License
7-
*/
7+
*/
88

99
_html2canvas.Generate = {};
1010

@@ -30,7 +30,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
3030
canvas.width = bounds.width;
3131
canvas.height = bounds.height;
3232

33-
33+
3434
function getColors(input) {
3535
var j = -1,
3636
color = '',
@@ -51,7 +51,7 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
5151
}
5252
}
5353
}
54-
54+
5555
if ( (tmp = src.match(/-webkit-linear-gradient\((.*)\)/)) !== null ) {
5656

5757
position = tmp[1].split( ",", 1 )[0];

‎src/Preload.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,15 @@ _html2canvas.Preload = function( options ) {
4646
function start(){
4747
h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
4848
if (!images.firstRun && images.numLoaded >= images.numTotal){
49+
h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
4950

5051
if (typeof options.complete === "function"){
5152
options.complete(images);
5253
}
53-
54-
h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
54+
5555
}
5656
}
57-
57+
5858
// TODO modify proxy to serve images with CORS enabled, where available
5959
function proxyGetImage(url, img, imageObj){
6060
var callback_name,
@@ -179,6 +179,7 @@ _html2canvas.Preload = function( options ) {
179179
// CORS succeeded
180180
window.clearTimeout( imageObj.timer );
181181
}
182+
182183
images.numLoaded++;
183184
imageObj.succeeded = true;
184185
start();
@@ -208,6 +209,16 @@ _html2canvas.Preload = function( options ) {
208209
start();
209210

210211
};
212+
213+
// TODO Opera has no load/error event for SVG images
214+
215+
// Opera ninja onload's cached images
216+
window.setTimeout(function(){
217+
if ( img.width !== 0 && imageObj.succeeded === undefined ) {
218+
img.onload();
219+
}
220+
}, 100); // needs a reflow for base64 encoded images? interestingly timeout of 0 doesn't work but 1 does.
221+
211222
}
212223

213224

‎tests/qunit/index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,16 @@
3434
width:50px;
3535
height:50px;
3636
}
37+
38+
#paddingPercentage div {
39+
width:50px;
40+
height:50px;
41+
}
3742
</style>
3843
</head>
3944
<body>
4045
<div id="qunit"></div>
41-
<div id="qunit-fixture" style="display:none;">
46+
<div id="qunit-fixture" style="visibility:none; height:1px; overflow:scroll;">
4247
<div id="borders">
4348
<div style="border-width: 1px 0;"></div>
4449
<div style="border-width: 1em 0;"></div>
@@ -55,13 +60,17 @@
5560
<div style="padding: 1px 0;"></div>
5661
<div style="padding: 1em 0;"></div>
5762
<div style="padding: thin medium thick;"></div>
58-
<div style="padding: 5% 6px 12%;"></div>
5963
<div style="padding: 5em 5ex 5in 5cm;"></div>
6064
<div style="padding: 500em 500ex 500in 500cm;"></div>
6165
<div style="padding: 5mm 5pt 5pc 5px;"></div>
6266
<div style="padding: 500mm 500pt 500pc 500px;"></div>
67+
<div style="padding: 1px 5%;"></div>
68+
<div style="padding: 15% 0 3%;"></div>
6369
</div>
6470

71+
72+
73+
6574
<div id="backgroundPosition">
6675
<div style="background-position: 1px 0;"></div>
6776
<div style="background-position: 1em 0;"></div>

‎tests/qunit/unit/css.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
/*
2-
* @author Niklas von Hertzen <niklas at hertzen.com>
3-
* @created 3.3.2012
4-
* @website http://hertzen.com
5-
*/
6-
71
module("CSS");
82
$(function() {
93

@@ -76,7 +70,7 @@ $(function() {
7670
} else if (expect === "thick") {
7771
expect = "5px";
7872
}
79-
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
73+
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + expect );
8074
});
8175

8276
});
@@ -97,6 +91,8 @@ $(function() {
9791
});
9892
});
9993

94+
95+
10096

10197

10298
var propsToTest3 = ["backgroundPosition"],
@@ -109,11 +105,17 @@ $(function() {
109105
var img = new Image();
110106
img.width = 50;
111107
img.height = 50;
108+
112109
var item = _html2canvas.Util.getCSS(el, prop),
113-
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img);
110+
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img),
111+
split;
112+
113+
if ( window.getComputedStyle ) {
114+
split = $(el).css(prop).split(" ");
115+
} else {
116+
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")]
117+
}
114118

115-
116-
var split = $(el).css(prop).split(" ");
117119
var testEl = $('<div />').css({
118120
'position': 'absolute',
119121
'left': split[0],
@@ -125,8 +127,8 @@ $(function() {
125127

126128

127129

128-
QUnit.equal( pos.left, parseFloat(testEl.css('left'), 10), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item );
129-
QUnit.equal( pos.top, parseFloat(testEl.css('top'), 10), "div #" + (i + 1) + " background-position-y equals " + pos.top );
130+
QUnit.equal( pos.left, Math.round(parseFloat(testEl.css('left'), 10)), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item );
131+
QUnit.equal( pos.top, Math.round(parseFloat(testEl.css('top'), 10)), "div #" + (i + 1) + " background-position-y equals " + pos.top );
130132

131133
testEl.remove();
132134

‎tests/test.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
66
Released under MIT License
77
*/
8-
var h2cSelector = document.body, h2cOptions;
8+
var h2cSelector, h2cOptions;
99
(function(document, window) {
1010
var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
1111
document.write(scrStart + '../external/jquery-1.6.2.js' + scrEnd);
@@ -17,7 +17,9 @@ var h2cSelector = document.body, h2cOptions;
1717
if (window.setUp) {
1818
window.setUp();
1919
}
20+
h2cSelector = [document.body];
2021
setTimeout(function() {
22+
2123
$(h2cSelector).html2canvas($.extend({
2224
flashcanvas: "../external/flashcanvas.min.js",
2325
logging: true,

0 commit comments

Comments
 (0)