4

I'm using a plugin called html2canvas to convert some html on my page into a canvas element. I then want to save that canvas as an image. Unfortunately I keep encountering the error in the title. I have tried with different variable names, with different html, etc. But keep encountering the same error. Here is my code (triggered on a button click):

JS

function generate(){
        html2canvas($('#b2_1'), {
            onrendered: function(canvas) {
                canvas.setAttribute("id", "canvas");
                document.body.appendChild(canvas);
            }
        });//this all works, the canvas appears as expected

        var myCanvas = $(document).find('#canvas');
        myCanvas.css("margin-left", "50px");//this was to test I was selecting the right element, the canvas moves
        var myImg = myCanvas.toDataURL();//code breaks here
    }
gaynorvader
  • 2,619
  • 3
  • 18
  • 32
  • 3
    Don't do what i just did for an hour: make sure the URL part of `toDataURL()` is capitalized. I was positive all my code was correct but still getting this error....because `toDataUrl()` with lowercase Url isn't actually a function no matter how hard one may believe it is, haha. – dhaupin Jun 17 '16 at 19:45

1 Answers1

16

Ok, I found my problem was I was trying to call toDataURL() on my jQuery object rather than my canvas element. To fix this I used .get(0). Full code below:

function generate(){
        html2canvas($('#b2_1'), {
            onrendered: function(canvas) {
                canvas.setAttribute("id", "canvas");
                document.body.appendChild(canvas);
            }
        });//this all works, the canvas appears as expected

        var myCanvas = $(document).find('#canvas');
        myCanvas.css("margin-left", "50px");
        var myImg = myCanvas.get(0).toDataURL();//have to get the canvas element from the jquery object
    }
gaynorvader
  • 2,619
  • 3
  • 18
  • 32
  • Is there a way how to force used filename and extension in the dialog? Thank you – tomexx Mar 04 '15 at 12:02
  • @tomexx this just creates the image as a bit array. It is up to you how you handle it from there, if you want to save it somewhere or convert it you'd need to use some server side code, I don't think it's possible to use just jQuery for this. – gaynorvader Mar 04 '15 at 14:33