CODEWITHSUNDEEP
javascripthtmlcanvas
shabbir.rang
shabbir.rang

Reputation: 279

Issues downloading image drawn on canvas

Javascript Code : 

window.onload = function () {
var canvas=document.getElementById("can");
var img=canvas.toDataURL("image/png");
var button = document.getElementById('saveImage');

    img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
                'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
               '9TXL0Y4OHwAAAABJRU5ErkJggg==';
    button.onclick = function () {
    window.location.href = img.replace("image/png", "image/octet-stream");
    window.location.href = prev;
             };
     };

HTML: 

<canvas id="can" width="500" height="200"></canvas><br />
<input type="button" value="Done" id="saveImage">

I am able to display the image on div from canvas but when i try to download it using above javascript function it downloads blank image. I want to know how can i get the picture drawn from the canvas.

Upvotes: 1

Views: 1191

Answers (1)

MassivePenguin
MassivePenguin

Reputation: 3711

Try looking here: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

The biggest problem you're likely to face is that you can only save the image on the same server as the page which has the canvas element. You'll then have to retrieve that saved image (either server or client side) and prompt the user to save it.

EDIT:

Maybe this would be better, though you need a little bit of server-side code: http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

Upvotes: 1

Related Questions