removed jQuery.css dependancy and few general CSS bug fixes
This commit is contained in:
Niklas von Hertzen
parent
e84d505f46
commit
4579fb25c6
|
|
@ -6,9 +6,6 @@
|
|||
/tests/flashcanvas.html
|
||||
/lib/
|
||||
/build/
|
||||
index.html
|
||||
image.jpg
|
||||
screenshots.html
|
||||
screenshots_local.html
|
||||
/.project
|
||||
/.settings/
|
||||
|
|
|
|||
150
src/Core.js
150
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,
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue