mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Added a sublime-project file for Sublime Text 2 that contains the detected linting and standards set. Allows Sublime Text 2 to automatically follow the standards and have live linting enabled. Trimmed useless whitespace.
This commit is contained in:
Benjamin Lupton
@@ -10,7 +10,7 @@
|
||||
_html2canvas.Renderer.Canvas = function( options ) {
|
||||
|
||||
options = options || {};
|
||||
|
||||
|
||||
var doc = document,
|
||||
canvas = options.canvas || doc.createElement('canvas'),
|
||||
usingFlashcanvas = false,
|
||||
@@ -19,7 +19,7 @@ _html2canvas.Renderer.Canvas = function( options ) {
|
||||
methods,
|
||||
flashMaxSize = 2880; // flash bitmap limited to 2880x2880px // http://stackoverflow.com/questions/2033792/argumenterror-error-2015-invalid-bitmapdata
|
||||
|
||||
|
||||
|
||||
if (canvas.getContext){
|
||||
h2clog("html2canvas: Renderer: using canvas renderer");
|
||||
canvasReadyToDraw = true;
|
||||
@@ -28,62 +28,62 @@ _html2canvas.Renderer.Canvas = function( options ) {
|
||||
h2clog("html2canvas: Renderer: canvas not available, using flashcanvas");
|
||||
var script = doc.createElement("script");
|
||||
script.src = options.flashcanvas;
|
||||
|
||||
|
||||
script.onload = (function(script, func){
|
||||
var intervalFunc;
|
||||
|
||||
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 {
|
||||
h2clog("html2canvas: Renderer: Can't track when flashcanvas is loaded");
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
return func;
|
||||
}
|
||||
|
||||
|
||||
})(script, function(){
|
||||
|
||||
|
||||
if (typeof window.FlashCanvas !== "undefined") {
|
||||
h2clog("html2canvas: Renderer: Flashcanvas initialized");
|
||||
window.FlashCanvas.initElement( canvas );
|
||||
|
||||
|
||||
canvasReadyToDraw = true;
|
||||
if ( _createCalled !== false ) {
|
||||
methods._create.apply( null, _createCalled );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
doc.body.appendChild( script );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
methods = {
|
||||
_create: function( zStack, options, doc, queue, _html2canvas ) {
|
||||
|
||||
|
||||
if ( !canvasReadyToDraw ) {
|
||||
_createCalled = arguments;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
|
||||
var ctx = canvas.getContext("2d"),
|
||||
storageContext,
|
||||
i,
|
||||
@@ -98,52 +98,52 @@ _html2canvas.Renderer.Canvas = function( options ) {
|
||||
testctx = ( hasCTX ) ? testCanvas.getContext("2d") : {},
|
||||
safeImages = [],
|
||||
fstyle;
|
||||
|
||||
|
||||
canvas.width = canvas.style.width = (!usingFlashcanvas) ? options.width || zStack.ctx.width : Math.min(flashMaxSize, (options.width || zStack.ctx.width) );
|
||||
canvas.height = canvas.style.height = (!usingFlashcanvas) ? options.height || zStack.ctx.height : Math.min(flashMaxSize, (options.height || zStack.ctx.height) );
|
||||
|
||||
|
||||
fstyle = ctx.fillStyle;
|
||||
ctx.fillStyle = zStack.backgroundColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = fstyle;
|
||||
|
||||
if ( options.svgRendering && zStack.svgRender !== undefined ) {
|
||||
// TODO: enable async rendering to support this
|
||||
// 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.canvasPosition = storageContext.canvasPosition || {};
|
||||
|
||||
//this.canvasRenderContext(storageContext,parentctx);
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
|
||||
//this.canvasRenderContext(storageContext,parentctx);
|
||||
|
||||
// set common settings for canvas
|
||||
ctx.textBaseline = "bottom";
|
||||
|
||||
|
||||
if (storageContext.clip){
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
// console.log(storageContext);
|
||||
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
||||
ctx.clip();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (storageContext.ctx.storage){
|
||||
|
||||
|
||||
for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
|
||||
|
||||
|
||||
renderItem = storageContext.ctx.storage[a];
|
||||
|
||||
|
||||
|
||||
|
||||
switch(renderItem.type){
|
||||
case "variable":
|
||||
ctx[renderItem.name] = renderItem['arguments'];
|
||||
ctx[renderItem.name] = renderItem['arguments'];
|
||||
break;
|
||||
case "function":
|
||||
if (renderItem.name === "fillRect") {
|
||||
|
||||
|
||||
if (!usingFlashcanvas || renderItem['arguments'][0] + renderItem['arguments'][2] < flashMaxSize && renderItem['arguments'][1] + renderItem['arguments'][3] < flashMaxSize) {
|
||||
ctx.fillRect.apply( ctx, renderItem['arguments'] );
|
||||
}
|
||||
@@ -152,45 +152,45 @@ _html2canvas.Renderer.Canvas = function( options ) {
|
||||
ctx.fillText.apply( ctx, renderItem['arguments'] );
|
||||
}
|
||||
}else if(renderItem.name === "drawImage") {
|
||||
|
||||
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
|
||||
|
||||
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
|
||||
if ( hasCTX && options.taintTest ) {
|
||||
if ( safeImages.indexOf( renderItem['arguments'][ 0 ].src ) === -1 ) {
|
||||
testctx.drawImage( renderItem['arguments'][ 0 ], 0, 0 );
|
||||
try {
|
||||
testctx.getImageData( 0, 0, 1, 1 );
|
||||
} catch(e) {
|
||||
} catch(e) {
|
||||
testCanvas = doc.createElement("canvas");
|
||||
testctx = testCanvas.getContext("2d");
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
safeImages.push( renderItem['arguments'][ 0 ].src );
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
ctx.drawImage.apply( ctx, renderItem['arguments'] );
|
||||
}
|
||||
ctx.drawImage.apply( ctx, renderItem['arguments'] );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h2clog("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
|
||||
|
||||
|
||||
queueLen = options.elements.length;
|
||||
|
||||
if (queueLen === 1) {
|
||||
@@ -201,29 +201,29 @@ _html2canvas.Renderer.Canvas = function( options ) {
|
||||
newCanvas.width = bounds.width;
|
||||
newCanvas.height = bounds.height;
|
||||
ctx = newCanvas.getContext("2d");
|
||||
|
||||
|
||||
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
|
||||
canvas = null;
|
||||
return newCanvas;
|
||||
}
|
||||
} /*else {
|
||||
// TODO clip and resize multiple elements
|
||||
|
||||
|
||||
for ( i = 0; i < queueLen; i+=1 ) {
|
||||
if (options.elements[ i ] instanceof Element) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return canvas;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return methods;
|
||||
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
_html2canvas.Renderer.SVG = function( options ) {
|
||||
|
||||
options = options || {};
|
||||
|
||||
|
||||
var doc = document,
|
||||
svgNS = "http://www.w3.org/2000/svg",
|
||||
svg = doc.createElementNS(svgNS, "svg"),
|
||||
@@ -30,8 +30,8 @@ _html2canvas.Renderer.SVG = function( options ) {
|
||||
fontStyle,
|
||||
clipId = 0,
|
||||
methods;
|
||||
|
||||
|
||||
|
||||
|
||||
methods = {
|
||||
_create: function( zStack, options, doc, queue, _html2canvas ) {
|
||||
svg.setAttribute("version", "1.1");
|
||||
@@ -42,17 +42,17 @@ _html2canvas.Renderer.SVG = function( options ) {
|
||||
svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px");
|
||||
svg.setAttribute("preserveAspectRatio", "none");
|
||||
svg.appendChild(defs);
|
||||
|
||||
|
||||
|
||||
for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
|
||||
|
||||
storageContext = queue.splice(0, 1)[0];
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
|
||||
//this.canvasRenderContext(storageContext,parentctx);
|
||||
|
||||
|
||||
|
||||
|
||||
for (i = 0, queueLen = queue.length; i < queueLen; i+=1){
|
||||
|
||||
storageContext = queue.splice(0, 1)[0];
|
||||
storageContext.canvasPosition = storageContext.canvasPosition || {};
|
||||
|
||||
//this.canvasRenderContext(storageContext,parentctx);
|
||||
|
||||
|
||||
/*
|
||||
if (storageContext.clip){
|
||||
ctx.save();
|
||||
@@ -60,24 +60,24 @@ _html2canvas.Renderer.SVG = function( options ) {
|
||||
// console.log(storageContext);
|
||||
ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
|
||||
ctx.clip();
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
if (storageContext.ctx.storage){
|
||||
|
||||
|
||||
for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){
|
||||
|
||||
|
||||
renderItem = storageContext.ctx.storage[a];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
switch(renderItem.type){
|
||||
case "variable":
|
||||
settings[renderItem.name] = renderItem['arguments'];
|
||||
settings[renderItem.name] = renderItem['arguments'];
|
||||
break;
|
||||
case "function":
|
||||
if (renderItem.name === "fillRect") {
|
||||
|
||||
|
||||
el = doc.createElementNS(svgNS, "rect");
|
||||
el.setAttribute("x", renderItem['arguments'][0]);
|
||||
el.setAttribute("y", renderItem['arguments'][1]);
|
||||
@@ -88,67 +88,67 @@ _html2canvas.Renderer.SVG = function( options ) {
|
||||
|
||||
} else if(renderItem.name === "fillText") {
|
||||
el = doc.createElementNS(svgNS, "text");
|
||||
|
||||
|
||||
fontStyle = settings.font.split(" ");
|
||||
|
||||
|
||||
el.style.fontVariant = fontStyle.splice(0, 1)[0];
|
||||
el.style.fontWeight = fontStyle.splice(0, 1)[0];
|
||||
el.style.fontStyle = fontStyle.splice(0, 1)[0];
|
||||
el.style.fontSize = fontStyle.splice(0, 1)[0];
|
||||
|
||||
el.setAttribute("x", renderItem['arguments'][1]);
|
||||
|
||||
el.setAttribute("x", renderItem['arguments'][1]);
|
||||
el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3));
|
||||
|
||||
|
||||
el.setAttribute("fill", settings.fillStyle);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// TODO get proper baseline
|
||||
el.style.dominantBaseline = "text-before-edge";
|
||||
el.style.fontFamily = fontStyle.join(" ");
|
||||
|
||||
text = doc.createTextNode(renderItem['arguments'][0]);
|
||||
el.appendChild(text);
|
||||
|
||||
|
||||
|
||||
|
||||
svg.appendChild(el);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} else if(renderItem.name === "drawImage") {
|
||||
|
||||
if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){
|
||||
|
||||
|
||||
// TODO check whether even any clipping is necessary for this particular image
|
||||
el = doc.createElementNS(svgNS, "clipPath");
|
||||
el.setAttribute("id", "clipId" + clipId);
|
||||
|
||||
el.setAttribute("id", "clipId" + clipId);
|
||||
|
||||
text = doc.createElementNS(svgNS, "rect");
|
||||
text.setAttribute("x", renderItem['arguments'][5] );
|
||||
text.setAttribute("x", renderItem['arguments'][5] );
|
||||
text.setAttribute("y", renderItem['arguments'][6]);
|
||||
|
||||
text.setAttribute("width", renderItem['arguments'][3]);
|
||||
|
||||
text.setAttribute("width", renderItem['arguments'][3]);
|
||||
text.setAttribute("height", renderItem['arguments'][4]);
|
||||
el.appendChild(text);
|
||||
defs.appendChild(el);
|
||||
|
||||
|
||||
el = doc.createElementNS(svgNS, "image");
|
||||
el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src);
|
||||
el.setAttribute("width", renderItem['arguments'][7]);
|
||||
el.setAttribute("height", renderItem['arguments'][8]);
|
||||
el.setAttribute("x", renderItem['arguments'][5]);
|
||||
el.setAttribute("width", renderItem['arguments'][7]);
|
||||
el.setAttribute("height", renderItem['arguments'][8]);
|
||||
el.setAttribute("x", renderItem['arguments'][5]);
|
||||
el.setAttribute("y", renderItem['arguments'][6]);
|
||||
el.setAttribute("clip-path", "url(#clipId" + clipId + ")");
|
||||
// el.setAttribute("xlink:href", );
|
||||
|
||||
|
||||
|
||||
el.setAttribute("preserveAspectRatio", "none");
|
||||
|
||||
|
||||
svg.appendChild(el);
|
||||
|
||||
|
||||
clipId += 1;
|
||||
|
||||
|
||||
clipId += 1;
|
||||
/*
|
||||
ctx.drawImage(
|
||||
renderItem['arguments'][0],
|
||||
@@ -162,45 +162,45 @@ _html2canvas.Renderer.SVG = function( options ) {
|
||||
renderItem['arguments'][8]
|
||||
);
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/*
|
||||
if (storageContext.clip){
|
||||
ctx.restore();
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
h2clog("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
|
||||
|
||||
|
||||
return svg;
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
return methods;
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user