mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Merge pull request #41 from cobexer/for-niklasvh
a few fixes / improvements
This commit is contained in:
commit
8bbbace790
2
.gitignore
vendored
2
.gitignore
vendored
@ -11,3 +11,5 @@ index.html
|
|||||||
image.jpg
|
image.jpg
|
||||||
screenshots.html
|
screenshots.html
|
||||||
screenshots_local.html
|
screenshots_local.html
|
||||||
|
/.project
|
||||||
|
/.settings/
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 );
|
||||||
|
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user