Merge pull request #41 from cobexer/for-niklasvh

a few fixes / improvements
This commit is contained in:
Niklas von Hertzen 2011-12-21 14:21:45 -08:00
commit 8bbbace790
7 changed files with 50 additions and 117 deletions

2
.gitignore vendored
View File

@ -11,3 +11,5 @@ index.html
image.jpg image.jpg
screenshots.html screenshots.html
screenshots_local.html screenshots_local.html
/.project
/.settings/

View File

@ -8,7 +8,7 @@
var html2canvas = {}; var html2canvas = {};
html2canvas.logging = true; html2canvas.logging = false;
html2canvas.log = function (a) { html2canvas.log = function (a) {
if (html2canvas.logging && window.console && window.console.log) { if (html2canvas.logging && window.console && window.console.log) {

View File

@ -42,17 +42,14 @@ html2canvas.Generate.Gradient = function(src, bounds) {
color += chr; color += chr;
steps.push( color ); steps.push( color );
color = ''; color = '';
j+=2; while (j++ < input.length && input.charAt( j ) !== ',') {
} else if (color || isValidColorStartChar(chr)) { }
} else {
color += chr; color += chr;
} }
} }
} }
function isValidColorStartChar(c) {
return c && /[^0-9%,]/.test(c);
}
if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) { if ( tmp = src.match(/-webkit-linear-gradient\((.*)\)/) ) {
position = tmp[1].split( ",", 1 )[0]; position = tmp[1].split( ",", 1 )[0];
@ -107,8 +104,13 @@ html2canvas.Generate.Gradient = function(src, bounds) {
increment = 1 / (steps.length - 1); increment = 1 / (steps.length - 1);
for (i = 0, len = steps.length; i < len; i+=1) { for (i = 0, len = steps.length; i < len; i+=1) {
try {
lingrad.addColorStop(increment * i, steps[i]); lingrad.addColorStop(increment * i, steps[i]);
} }
catch(e) {
html2canvas.log(['failed to add color stop: ', e, '; tried to add: ', steps[i], '; stop: ', i, '; in: ', src]);
}
}
ctx.fillStyle = lingrad; ctx.fillStyle = lingrad;

View File

@ -25,7 +25,8 @@ html2canvas.Preload = function(element, opts){
doc = element.ownerDocument, doc = element.ownerDocument,
domImages = doc.images, // TODO probably should limit it to images present in the element only domImages = doc.images, // TODO probably should limit it to images present in the element only
imgLen = domImages.length, imgLen = domImages.length,
link = doc.createElement("a"); link = doc.createElement("a"),
timeoutTimer;
link.href = window.location.href; link.href = window.location.href;
pageOrigin = link.protocol + link.host; pageOrigin = link.protocol + link.host;
@ -214,7 +215,7 @@ html2canvas.Preload = function(element, opts){
methods = { methods = {
loadImage: function( src ) { loadImage: function( src ) {
var img; var img;
if ( images[src] === undefined ) { if ( src && images[src] === undefined ) {
if ( src.match(/data:image\/.*;base64,/i) ) { if ( src.match(/data:image\/.*;base64,/i) ) {
//Base64 src //Base64 src
@ -257,7 +258,7 @@ html2canvas.Preload = function(element, opts){
}, },
cleanupDOM: function(cause) { cleanupDOM: function(cause) {
var img; var img, src;
if (!images.cleanupDone) { if (!images.cleanupDone) {
if (cause && typeof cause === "string") { if (cause && typeof cause === "string") {
html2canvas.log("html2canvas: Cleanup because: " + cause); html2canvas.log("html2canvas: Cleanup because: " + cause);
@ -320,10 +321,7 @@ html2canvas.Preload = function(element, opts){
this.log('html2canvas: Preload: Finding images'); this.log('html2canvas: Preload: Finding images');
// load <img> images // load <img> images
for (i = 0; i < imgLen; i+=1){ for (i = 0; i < imgLen; i+=1){
var imgSrc = domImages[i].getAttribute( "src" ); methods.loadImage( domImages[i].getAttribute( "src" ) );
if ( imgSrc ) {
methods.loadImage( imgSrc );
}
} }
images.firstRun = false; images.firstRun = false;

View File

@ -168,6 +168,7 @@ html2canvas.Renderer = function(parseQueue, opts){
} }
html2canvas.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
// this.canvasRenderStorage(queue,this.ctx); // this.canvasRenderStorage(queue,this.ctx);
return canvas; return canvas;
@ -352,7 +353,7 @@ html2canvas.Renderer = function(parseQueue, opts){
html2canvas.log("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj");
return svg; return svg;
@ -367,11 +368,13 @@ html2canvas.Renderer = function(parseQueue, opts){
case "canvas": case "canvas":
canvas = doc.createElement('canvas'); canvas = doc.createElement('canvas');
if (canvas.getContext){ if (canvas.getContext){
this.log("html2canvas: Renderer: using canvas renderer");
return canvasRenderer(parseQueue); return canvasRenderer(parseQueue);
} }
break; break;
case "svg": case "svg":
if (doc.createElementNS){ if (doc.createElementNS){
this.log("html2canvas: Renderer: using SVG renderer");
return svgRenderer(parseQueue); return svgRenderer(parseQueue);
} }
break; break;

View File

@ -1,117 +1,46 @@
/* /*
* jQuery helper plugin for examples and tests * jQuery helper plugin for examples and tests
*/ */
(function( $ ){ (function( $ ){
$.fn.html2canvas = function(options) { $.fn.html2canvas = function(options) {
var date = new Date(),
var date = new Date(); $message = null,
var message, timeoutTimer = false,
timeoutTimer,
timer = date.getTime(); timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function(images){
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
var preload = html2canvas.Preload(this[0], { $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
"complete": function(images){ $canvas.siblings().toggle();
var queue = html2canvas.Parse(this[0], images);
var canvas = $(html2canvas.Renderer(queue));
var finishTime = new Date();
canvas.css('position','absolute')
.css('left',0).css('top',0);
$('body').append(canvas);
$(canvas).siblings().toggle();
$(window).click(function(){ $(window).click(function(){
if (!canvas.is(':visible')){ if (!$canvas.is(':visible')){
$(canvas).toggle().siblings().toggle(); $canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible"); throwMessage("Canvas Render visible");
} else{ } else{
$(canvas).siblings().toggle(); $canvas.siblings().toggle();
$(canvas).toggle(); $canvas.toggle();
throwMessage("Canvas Render hidden"); throwMessage("Canvas Render hidden");
} }
}); });
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />",4000); throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />",4000);
} }
}); }, options));
/*
var date = new Date();
var message,
timeoutTimer,
timer = date.getTime();
var object = $.extend({},{
logging: false,
proxyUrl: "http://html2canvas.appspot.com/", // running html2canvas-python proxy
ready: function(renderer) {
var finishTime = new Date();
// console.log((finishTime.getTime()-timer)/1000);
document.body.appendChild(renderer.canvas);
var canvas = $(renderer.canvas);
canvas.css('position','absolute')
.css('left',0).css('top',0);
// $('body').append(canvas);
$(canvas).siblings().toggle();
throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)/1000) + " seconds<br />Total of "+renderer.numDraws+" draws performed",4000);
$(window).click(function(){
if (!canvas.is(':visible')){
$(canvas).toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else{
$(canvas).siblings().toggle();
$(canvas).toggle();
throwMessage("Canvas Render hidden");
}
});
}
},options)
new html2canvas(this.get(0), object);
*/
function throwMessage(msg,duration){ function throwMessage(msg,duration){
window.clearTimeout(timeoutTimer); window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function(){ timeoutTimer = window.setTimeout(function(){
message.fadeOut(function(){ $message.fadeOut(function(){
message.remove(); $message.remove();
}); });
},duration || 2000); },duration || 2000);
$(message).remove(); if ($message)
message = $('<div />').html(msg).css({ $message.remove();
$message = $('<div />').html(msg).css({
margin:0, margin:0,
padding:10, padding:10,
background: "#000", background: "#000",
@ -129,8 +58,5 @@
textDecoration:'none' textDecoration:'none'
}).hide().fadeIn().appendTo('body'); }).hide().fadeIn().appendTo('body');
} }
}; };
})( jQuery ); })( jQuery );

View File

@ -58,7 +58,9 @@
<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 />
Image without src attribute, should not crash:
<img style="width:50px;height:50px;border:1px solid red;display:block;" />
</body> </body>
</html> </html>