TypeError: element.getElementsByTagName is not a function

[Topgoona]

Hi,

I've been trying to get your script to work for a day or 2 now. I'm trying to capture the contents of a div and save them to image file. I have the file save part working ok but image is not being captured. I think I may be missing something. I.m getting this error (TypeError: element.getElementsByTagName is not a function) and firebug points to this line of code in your script .

domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
imgLen = domImages.length,
link = doc.createElement("a"),
supportCORS = (function( img ){
return (img.crossOrigin !== undefined);
})(new Image()),
timeoutTimer;

The capture function I am using is

function capture() {
html2canvas( $('#voucher_container'), {
logging: true,
onrendered: function( canvas ) {
var img = canvas.toDataURL();
$('#img_val').attr('value', img);
document.getElementById("myForm").submit();
}
});
}

Any code inside the onrendered callback is not executed.

Any help/advice you could give me would be greatly appreciated.

[mesutcakir]

I have a this problem.

[brcontainer]

Add an example of the problem with http://jsfiddle.net/

[Topgoona]

Hi br. Thank you for the reply. I've had an attempt on jsfiddle here http://jsfiddle.net/Topgoona/2fZuX/6/. Like I said I'm trying to save an image of the voucher but keep coming back with empty file. Obviously the form submit won't work on jsfiddle but it's the div capture I am having trouble with. Thanks for your help.

[brcontainer]

Replace body.append(canvas); by document.body.appendChild(canvas);, see (working): http://jsfiddle.net/2fZuX/10/

[Topgoona]

Thank you so much for the help br. Seems that I've been looking at the wrong area. Would you have an example of a way to POST and save the created image to file on the server. Thanks again for your help. Very much appreciated

[brcontainer]

@Topgoona Recommend using new FormData()

eg. http://stackoverflow.com/questions/18253378/javascript-blob-upload-with-formdata

Note: your problem is not a bug of html2canvas is it how you want to use it.

[Topgoona]

That's perfect. Thank you so much for all your help.

[heyswati06]

Hi Topgoona,

I am facing exactly the same problem that you were facing. However I am using this with Python, but I cant somehow get along with #brcontainer's answer as of 3rd Dec. Please let me know where the problem lies, I am strugging with this for quite sometime :(

I will repeat myself here-
function capture(){
var target = $('#report_link').closest('.table_wrapper');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
}
});
}

Somehow, this is not going inside the onrendered loop ang giving the error on the same line (in firebug) as u were getting-

"""
TypeError: element.getElementsByTagName is not a function
_html2canvas.Preload=function(options){var images={numLoaded:0,numFailed:0,numTotal:0,cleanupDone:false},pageOrigin,Util=_html2canvas.Util,methods,i,count=0,element=options.elements[0]||document.body,doc=element.ownerDocument,domImages=element.getElementsByTagName('img'),imgLen=domImages.length,link=doc.createElement("a"),supportCORS=(function(img){return(img.crossOrigin!==undefined);})(new Image()),timeoutTimer;link.href=window.location.href;pageOrigin=link.protocol+link.host;function isSameOrigin(url){link.href=url;link.href=link.href;var origin=link.protocol+link.host;return(origin===pageOrigin);}