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

added flashcanvas integration and some legacy IE bug fixes

Browse Source
This commit is contained in:
Niklas von Hertzen 2012-02-26 00:19:16 +02:00
parent c4cc1fe180
commit b65357c55d
8 changed files with 9121 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8969
external/jquery-1.6.2.js vendored
View File

File diff suppressed because one or more lines are too long

16
src/Core.js
View File

@ -47,12 +47,14 @@ html2canvas.Util.Bounds = function getBounds (el) {
bounds.top = clientRect.top; bounds.top = clientRect.top;
bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height); bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
bounds.left = clientRect.left; bounds.left = clientRect.left;
bounds.width = clientRect.width;
bounds.height = clientRect.height; // older IE doesn't have width/height, but top/bottom instead
bounds.width = clientRect.width || (clientRect.right - clientRect.left);
bounds.height = clientRect.height || (clientRect.bottom - clientRect.top);
return bounds; return bounds;
} /*else{ } /*else{
p = $(el).offset(); p = $(el).offset();
@ -109,6 +111,14 @@ html2canvas.Util.getCSS = function (el, attribute) {
}*/ }*/
// val = $(el).css(attribute); // val = $(el).css(attribute);
// } // }
/*
var val = $(el).css(attribute);
if (val === "medium") {
val = 3;
}*/
return $(el).css(attribute); return $(el).css(attribute);

28
src/Parse.js
View File

@ -108,7 +108,8 @@ html2canvas.Parse = function (element, images, opts) {
var getCSS = html2canvas.Util.getCSS; var getCSS = html2canvas.Util.getCSS;
function getCSSInt(element, attribute) { function getCSSInt(element, attribute) {
return parseInt(getCSS(element, attribute), 10); var val = parseInt(getCSS(element, attribute), 10);
return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
} }
// Drawing a rectangle // Drawing a rectangle
@ -587,7 +588,7 @@ html2canvas.Parse = function (element, images, opts) {
borders.push({ borders.push({
width: getCSSInt(el, 'border' + sides[s] + 'Width'), width: getCSSInt(el, 'border' + sides[s] + 'Width'),
color: getCSS(el, 'border' + sides[s] + 'Color') color: getCSS(el, 'border' + sides[s] + 'Color')
}); });
} }
return borders; return borders;
@ -662,7 +663,13 @@ html2canvas.Parse = function (element, images, opts) {
for (i = 0, arrLen = cssArr.length; i < arrLen; i+=1){ for (i = 0, arrLen = cssArr.length; i < arrLen; i+=1){
style = cssArr[i]; style = cssArr[i];
try {
valueWrap.style[style] = getCSS(el, style); valueWrap.style[style] = getCSS(el, style);
} catch( e ) {
// Older IE has issues with "border"
html2canvas.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
}
} }
@ -702,13 +709,22 @@ html2canvas.Parse = function (element, images, opts) {
function getBackgroundPosition(el, bounds, image){ function getBackgroundPosition(el, bounds, image){
// TODO add support for multi image backgrounds // TODO add support for multi image backgrounds
var bgpos = getCSS(el, "backgroundPosition").split(",")[0] || "0 0", var bgposition = (function( bgp ){
bgposition = bgpos.split(" "),
if (bgp !== undefined) {
return (bgp.split(",")[0] || "0 0").split(" ");
} else {
// Older IE uses -x and -y
return [ getCSS(el, "backgroundPositionX"), getCSS(el, "backgroundPositionY") ];
}
})( getCSS(el, "backgroundPosition") ),
topPos, topPos,
left, left,
percentage, percentage,
val; val;
if (bgposition.length === 1){ if (bgposition.length === 1){
val = bgposition; val = bgposition;
@ -1106,7 +1122,7 @@ html2canvas.Parse = function (element, images, opts) {
} }
if (bgbounds.height > 0 && bgbounds.width > 0){ if (bgbounds.height > 0 && bgbounds.width > 0){
renderRect( renderRect(
ctx, ctx,

38
src/Preload.js
View File

@ -63,9 +63,9 @@ html2canvas.Preload = function(element, opts){
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!
@ -180,8 +180,12 @@ html2canvas.Preload = function(element, opts){
if (elNodeType === 1 || elNodeType === undefined){ if (elNodeType === 1 || elNodeType === undefined){
background_image = html2canvas.Util.getCSS(el, 'backgroundImage'); // opera throws exception on external-content.html
try {
background_image = html2canvas.Util.getCSS(el, 'backgroundImage');
}catch(e) {
html2canvas.log("html2canvas: failed to get background-image - Exception: " + e.message);
}
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
@ -191,7 +195,10 @@ html2canvas.Preload = function(element, opts){
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();
@ -221,7 +228,10 @@ html2canvas.Preload = function(element, opts){
//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();
@ -229,7 +239,9 @@ html2canvas.Preload = function(element, opts){
}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() {
@ -250,7 +262,9 @@ html2canvas.Preload = function(element, opts){
}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 );
} }
@ -302,9 +316,9 @@ html2canvas.Preload = function(element, opts){
} }
}, },
renderingDone: function() { renderingDone: function() {
if (timeoutTimer) { if (timeoutTimer) {
window.clearTimeout(timeoutTimer); window.clearTimeout(timeoutTimer);
} }
} }
}; };

98
src/Renderer.js
View File

@ -15,6 +15,8 @@ html2canvas.Renderer = function(parseQueue, opts){
}, },
queue = [], queue = [],
canvas, canvas,
usingFlashcanvas = false,
flashMaxSize = 2880, // flash bitmap limited to 2880x2880px // http://stackoverflow.com/questions/2033792/argumenterror-error-2015-invalid-bitmapdata
doc = document; doc = document;
options = html2canvas.Util.Extend(opts, options); options = html2canvas.Util.Extend(opts, options);
@ -83,9 +85,9 @@ html2canvas.Renderer = function(parseQueue, opts){
renderItem, renderItem,
fstyle; fstyle;
canvas.width = options.width || zStack.ctx.width; canvas.width = canvas.style.width = (!usingFlashcanvas) ? options.width || zStack.ctx.width : Math.min(flashMaxSize, (options.width || zStack.ctx.width) );
canvas.height = options.height || zStack.ctx.height; canvas.height = canvas.style.height = (!usingFlashcanvas) ? options.height || zStack.ctx.height : Math.min(flashMaxSize, (options.height || zStack.ctx.height) );
fstyle = ctx.fillStyle; fstyle = ctx.fillStyle;
ctx.fillStyle = "#fff"; ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
@ -116,7 +118,6 @@ html2canvas.Renderer = function(parseQueue, opts){
renderItem = storageContext.ctx.storage[a]; renderItem = storageContext.ctx.storage[a];
switch(renderItem.type){ switch(renderItem.type){
case "variable": case "variable":
@ -124,21 +125,26 @@ html2canvas.Renderer = function(parseQueue, opts){
break; break;
case "function": case "function":
if (renderItem.name === "fillRect") { if (renderItem.name === "fillRect") {
ctx.fillRect( if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) {
renderItem['arguments'][0], ctx.fillRect(
renderItem['arguments'][1], renderItem['arguments'][0],
renderItem['arguments'][2], renderItem['arguments'][1],
renderItem['arguments'][3] renderItem['arguments'][2],
); renderItem['arguments'][3]
);
}
}else if(renderItem.name === "fillText") { }else if(renderItem.name === "fillText") {
// console.log(renderItem.arguments[0]); if (!usingFlashcanvas || renderItem['arguments'][1] < flashMaxSize && renderItem['arguments'][2] < flashMaxSize) {
ctx.fillText(renderItem['arguments'][0],renderItem['arguments'][1],renderItem['arguments'][2]); ctx.fillText(
renderItem['arguments'][0],
renderItem['arguments'][1],
renderItem['arguments'][2]
);
}
}else if(renderItem.name === "drawImage") { }else if(renderItem.name === "drawImage") {
// console.log(renderItem);
// console.log(renderItem.arguments[0].width); if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
ctx.drawImage( ctx.drawImage(
renderItem['arguments'][0], renderItem['arguments'][0],
renderItem['arguments'][1], renderItem['arguments'][1],
@ -149,7 +155,7 @@ html2canvas.Renderer = function(parseQueue, opts){
renderItem['arguments'][6], renderItem['arguments'][6],
renderItem['arguments'][7], renderItem['arguments'][7],
renderItem['arguments'][8] renderItem['arguments'][8]
); );
} }
} }
@ -176,20 +182,21 @@ html2canvas.Renderer = function(parseQueue, opts){
queueLen = options.elements.length; queueLen = options.elements.length;
if (queueLen === 1) { if (queueLen === 1) {
if (options.elements[ 0 ] instanceof Element && options.elements[ 0 ].nodeName !== "BODY") { if (typeof options.elements[ 0 ] === "object" && options.elements[ 0 ].nodeName !== "BODY" && usingFlashcanvas === false) {
// crop image to the bounds of selected (single) element // crop image to the bounds of selected (single) element
bounds = html2canvas.Util.Bounds( options.elements[ 0 ] ); bounds = html2canvas.Util.Bounds( options.elements[ 0 ] );
newCanvas = doc.createElement('canvas'); newCanvas = doc.createElement('canvas');
newCanvas.width = bounds.width; newCanvas.width = bounds.width;
newCanvas.height = bounds.height; newCanvas.height = bounds.height;
ctx = newCanvas.getContext("2d"); ctx = newCanvas.getContext("2d");
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height ); ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
delete canvas; delete canvas;
return newCanvas; return newCanvas;
} }
} else { } else {
// TODO clip and resize multiple elements // TODO clip and resize multiple elements
/* /*
for ( i = 0; i < queueLen; i+=1 ) { for ( i = 0; i < queueLen; i+=1 ) {
if (options.elements[ i ] instanceof Element) { if (options.elements[ i ] instanceof Element) {
@ -400,6 +407,55 @@ html2canvas.Renderer = function(parseQueue, opts){
if (canvas.getContext){ if (canvas.getContext){
html2canvas.log("html2canvas: Renderer: using canvas renderer"); html2canvas.log("html2canvas: Renderer: using canvas renderer");
return canvasRenderer(parseQueue); return canvasRenderer(parseQueue);
} else {
usingFlashcanvas = true;
html2canvas.log("html2canvas: Renderer: canvas not available, using flashcanvas");
var script = doc.createElement("script");
script.src = options.flashcanvas;
script.onload = (function(script, func){
var intervalFunc;
if (script.onload === undefined) {
// IE lack of support for script onload
if( script.onreadystatechange !== undefined ) {
intervalFunc = function() {
if (script.readyState !== "loaded" && script.readyState !== "complete") {
window.setTimeout( intervalFunc, 250 );
} else {
// it is loaded
func();
}
};
window.setTimeout( intervalFunc, 250 );
} else {
html2canvas.log("html2canvas: Renderer: Can't track when flashcanvas is loaded");
}
} else {
return func;
}
})(script, function(){
if (typeof FlashCanvas !== "undefined") {
html2canvas.log("html2canvas: Renderer: Flashcanvas initialized");
FlashCanvas.initElement( canvas );
canvasRenderer(parseQueue);
}
});
doc.body.appendChild( script );
return canvas;
} }
break; break;
case "svg": case "svg":

9
src/plugins/jquery.plugin.html2canvas.js
View File

@ -12,10 +12,10 @@
timer = date.getTime(); timer = date.getTime();
options = options || {}; options = options || {};
options.elements = this; options.elements = this;
options.flashcanvas = "../external/flashcanvas.min.js";
html2canvas.logging = options && options.logging; html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({ options.complete = function(images){
complete: function(images){
var queue = html2canvas.Parse(this[0], images, options), var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)), $canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date(); finishTime = new Date();
@ -31,8 +31,9 @@
throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden")); throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden"));
}); });
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000); throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
}
}, options)); };
html2canvas.Preload(this[0], options);
function throwMessage(msg,duration){ function throwMessage(msg,duration){
window.clearTimeout(timeoutTimer); window.clearTimeout(timeoutTimer);

18
tests/images.html
View File

@ -8,13 +8,17 @@
<script type="text/javascript" src="test.js"></script> <script type="text/javascript" src="test.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function setUp() { function setUp() {
var ctx = $('#testcanvas')[0].getContext('2d'); if ($('#testcanvas')[0].getContext) {
var ctx = $('#testcanvas')[0].getContext('2d');
ctx.fillStyle = "rgb(200,0,0)"; ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50); ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50); ctx.fillRect (30, 30, 55, 50);
} else {
$('#testcanvas').remove();
}
}; };
</script> </script>
@ -58,8 +62,8 @@
<img src="image.jpg" style="width:0px;height:0px;" /> <img src="image.jpg" style="width:0px;height:0px;" />
<canvas id="testcanvas" style="width:100px;height:100px;"></canvas> <canvas id="testcanvas" style="width:100px;height:100px;"></canvas>
<br /> <br />
Image without src attribute, should not crash: Image without src attribute, should not crash:
<img style="width:50px;height:50px;border:1px solid red;display:block;" /> <img style="width:50px;height:50px;border:1px solid red;display:block;" />
</body> </body>

2
tests/test.js
View File

@ -7,7 +7,7 @@
*/ */
(function(document, window) { (function(document, window) {
var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>'; var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
document.write(scrStart + '../external/jquery-1.6.2.min.js' + scrEnd); document.write(scrStart + '../external/jquery-1.6.2.js' + scrEnd);
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'plugins/jquery.plugin.html2canvas'], i; var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'plugins/jquery.plugin.html2canvas'], i;
for (i = 0; i < html2canvas.length; ++i) { for (i = 0; i < html2canvas.length; ++i) {
document.write(scrStart + '../src/' + html2canvas[i] + '.js' + scrEnd); document.write(scrStart + '../src/' + html2canvas[i] + '.js' + scrEnd);