Convert canvas to an image with JavaScript [duplicate]

You have the right idea, and it will work in very simple cases such as:

var can = document.getElementById('canvas1');var ctx = can.getContext('2d');ctx.fillRect(50,50,50,50);var img = new Image();img.src = can.toDataURL();document.body.appendChild(img);

http://jsfiddle.net/simonsarris/vgmFN/

But it becomes problematic if you have "dirtied" your canvas. This is done by drawing images to the canvas that are from a different origin. For instance, if your canvas is hosted at www.example.com, and you use images from www.wikipedia.org, then your canvas' origin-clean flag is set to false internally.

Once the origin-clean flag is set to false, you are no longer allowed to call toDataURL or getImageData

Technically, images are of the same origin if domains, protocols, and ports match.

If you are working locally (file://) then any image drawn will set off the flag. This makes debugging annoying, but with Chrome you can start it with the flag --allow-file-access-from-files to allow this.

This worked for me

//after creating your plot dovar imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img datavar imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it$('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ //