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

add svg powered rendering

Browse Source
This commit is contained in:
MoyuScript 2012-03-06 17:11:10 +02:00
parent eefb32fdba
commit 69d87d5497
3 changed files with 160 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/Parse.js
View File

@ -14,8 +14,8 @@ _html2canvas.Parse = function ( images, options ) {
window.scroll(0,0); window.scroll(0,0);
var support = { var support = {
rangeBounds: false rangeBounds: false,
/*,svgRendering: (function( ){ svgRendering: options.svgRendering && (function( ){
var img = new Image(), var img = new Image(),
canvas = document.createElement("canvas"), canvas = document.createElement("canvas"),
ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d"); ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
@ -43,7 +43,7 @@ _html2canvas.Parse = function ( images, options ) {
h2clog('html2canvas: Parse: SVG powered rendering available'); h2clog('html2canvas: Parse: SVG powered rendering available');
return true; return true;
})()*/ })()
}, },
element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
needReorder = false, needReorder = false,
@ -63,85 +63,23 @@ _html2canvas.Parse = function ( images, options ) {
children, children,
childrenLen; childrenLen;
/*
SVG powered HTML rendering, non-tainted canvas available from FF 11+ onwards,
but due to bug https://bugzilla.mozilla.org/show_bug.cgi?id=733345 excluding this code out for now
if (support.svgRendering || true) { function docSize(){
(function( body, width, height ){
var img = new Image(),
html = "";
function parseDOM( el ) { return {
var children = _html2canvas.Util.Children( el ), width: Math.max(
len = children.length, Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
attr, Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
a, Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
alen, ),
elm, height: Math.max(
i; Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
for ( i = 0; i < len; i+=1 ) { Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
elm = children[ i ]; Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
if ( elm.nodeType === 3 ) { )
// Text node
html += elm.nodeValue.replace(/\</g,"&lt;").replace(/\>/g,"&gt;");
} else if ( elm.nodeType === 1 ) {
// Element
if ( !/^(script|meta|title)$/.test(elm.nodeName.toLowerCase()) ) {
html += "<" + elm.nodeName.toLowerCase();
// add attributes
if ( elm.hasAttributes() ) {
attr = elm.attributes;
alen = attr.length;
for ( a = 0; a < alen; a+=1 ) {
html += " " + attr[ a ].name + '="' + attr[ a ].value + '"';
}
}
html += '>';
parseDOM( elm );
html += "</" + elm.nodeName.toLowerCase() + ">";
}
}
}
}
parseDOM( body );
img.src = [
"data:image/svg+xml,",
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='" + width + "' height='" + height + "'>",
"<foreignObject width='" + width + "' height='" + height + "'>",
"<html xmlns='http://www.w3.org/1999/xhtml' style='margin:0;'>",
html,
"</html>",
"</foreignObject>",
"</svg>"
].join("");
console.log(img.src);
img.onerror = function(e) {
console.log(e);
}; };
img.onload = function() {
console.log("loaded");
};
document.body.appendChild(img);
})( document.documentElement, 1280, 1024 );
} }
return;
*/
images = images || {}; images = images || {};
@ -183,22 +121,7 @@ _html2canvas.Parse = function ( images, options ) {
*/ */
function docSize(){
return {
width: Math.max(
Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
),
height: Math.max(
Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
)
};
}
var getCSS = _html2canvas.Util.getCSS; var getCSS = _html2canvas.Util.getCSS;
function getCSSInt(element, attribute) { function getCSSInt(element, attribute) {
@ -930,7 +853,7 @@ _html2canvas.Parse = function ( images, options ) {
bgp = _html2canvas.Util.BackgroundPosition(el, bounds, image); bgp = _html2canvas.Util.BackgroundPosition(el, bounds, image);
// TODO add support for background-origin
if ( image ){ if ( image ){
switch ( background_repeat ) { switch ( background_repeat ) {
@ -1297,6 +1220,83 @@ _html2canvas.Parse = function ( images, options ) {
stack = renderElement(element, null); stack = renderElement(element, null);
/*
SVG powered HTML rendering, non-tainted canvas available from FF 11+ onwards
*/
if ( support.svgRendering ) {
(function( body ){
var img = new Image(),
size = docSize(),
html = "";
function parseDOM( el ) {
var children = _html2canvas.Util.Children( el ),
len = children.length,
attr,
a,
alen,
elm,
i;
for ( i = 0; i < len; i+=1 ) {
elm = children[ i ];
if ( elm.nodeType === 3 ) {
// Text node
html += elm.nodeValue.replace(/\</g,"&lt;").replace(/\>/g,"&gt;");
} else if ( elm.nodeType === 1 ) {
// Element
if ( !/^(script|meta|title)$/.test(elm.nodeName.toLowerCase()) ) {
html += "<" + elm.nodeName.toLowerCase();
// add attributes
if ( elm.hasAttributes() ) {
attr = elm.attributes;
alen = attr.length;
for ( a = 0; a < alen; a+=1 ) {
html += " " + attr[ a ].name + '="' + attr[ a ].value + '"';
}
}
html += '>';
parseDOM( elm );
html += "</" + elm.nodeName.toLowerCase() + ">";
}
}
}
}
parseDOM( body );
img.src = [
"data:image/svg+xml,",
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='" + size.width + "' height='" + size.height + "'>",
"<foreignObject width='" + size.width + "' height='" + size.height + "'>",
"<html xmlns='http://www.w3.org/1999/xhtml' style='margin:0;'>",
html.replace(/\#/g,"%23"),
"</html>",
"</foreignObject>",
"</svg>"
].join("");
img.onload = function() {
stack.svgRender = img;
};
})( document.documentElement );
}
// parse every child element // parse every child element
for (i = 0, children = element.children, childrenLen = children.length; i < childrenLen; i+=1){ for (i = 0, children = element.children, childrenLen = children.length; i < childrenLen; i+=1){
parseElement(children[i], stack); parseElement(children[i], stack);

1
src/Util.js
View File

@ -23,6 +23,7 @@ html2canvas = function( elements, opts ) {
allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
// parse options // parse options
svgRendering: false, // use svg powered rendering where available (FF11+)
iframeDefault: "default", iframeDefault: "default",
ignoreElements: "IFRAME|OBJECT|PARAM", ignoreElements: "IFRAME|OBJECT|PARAM",
useOverflow: true, useOverflow: true,

11
src/renderers/Canvas.js
View File

@ -107,7 +107,11 @@ html2canvas.Renderer.Canvas = function( options ) {
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = fstyle; ctx.fillStyle = fstyle;
for (i = 0, queueLen = queue.length; i < queueLen; i+=1){ if ( options.svgRendering && zStack.svgRender !== undefined ) {
// TODO: enable async rendering to support this
ctx.drawImage( zStack.svgRender, 0, 0 );
} else {
for ( i = 0, queueLen = queue.length; i < queueLen; i+=1 ) {
storageContext = queue.splice(0, 1)[0]; storageContext = queue.splice(0, 1)[0];
storageContext.canvasPosition = storageContext.canvasPosition || {}; storageContext.canvasPosition = storageContext.canvasPosition || {};
@ -182,10 +186,9 @@ html2canvas.Renderer.Canvas = function( options ) {
ctx.restore(); ctx.restore();
} }
} }
}
h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj"); h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
queueLen = options.elements.length; queueLen = options.elements.length;