Saving canvas as a PNG or JPG

Question

I want to save canvas as PNG, without opening it in a new window as base64-encoded image.

I used this code:

jQuery("#btnPreview").click(function(){
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('Sorry, your browser is not supported.');
        }
        else {
            canvas.deactivateAll();
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.bringToFront(o);
                }
            });
            window.open(canvas.toDataURL('png'), "");
            canvas.forEachObject(function(o){
                if(o.get("title") == "||Watermark||"){
                    canvas.sendToBack(o);
                }
            });
            canvas.renderAll();
        }

    });

I want to make the button save the image as a PNG or JPG.

possible duplicate: [Capture HTML Canvas as gif/jpg/png/pdf?](http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) — Alexander, Jun 26 '12 at 12:09
I want to save canvas as 'png' Without opening it in new window as base64 encoding image. I want make the button save the image as a 'png' or 'jpg' i'm clear in that — UXX1, Jun 26 '12 at 12:16
@UXX1 - your question has only been up for roughly 30 minutes! Give it some more time. You can edit your question to include the PHP question as well so more can see it. — Jay, Jun 26 '12 at 12:40
In Firefox you can right click the canvas and choose "Save image as..." like you would with a normal image. — AnnanFay, May 10 '13 at 11:18

score 13 · Answer 1 · edited Apr 22 '15 at 14:28

13

I use this on my jquery:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

$('.save').attr({
    'download': 'YourProduct.png',  /// set filename
    'href'    : image              /// set data-uri
});

edited Apr 22 '15 at 14:28

ptCoder

2,229
3
24
38

answered Feb 14 '14 at 01:52

Dakshika

1,694
1
14
18

score 4 · Answer 2 · answered Jun 26 '12 at 12:34

canvas.toDataURL('png') provides a string a la data:image/png;base64,XYZ. You could stuff that into an <a href="%dataURI%" download>download</a> (possibly trigger a click event on the element). See Downloading resources in HTML5: a[download]

Currently supported only by Google Chrome, though.

saad · Answer 3 · 2016-04-12T09:50:27.987

In script.js file

  $(document).on('click','#btnPreview',function(){
     var img =$scope.canvas.toDataURL('image/png');
     $.ajax({
                type: "POST",   
                url: 'ajax.php', 
                data: {'img':img},
                success: function(data) { 
                    $("#loader_message").html("Image saved successfully"); 
                }
            });
  });

In ajax.php

    $encodedData=explode(',', $_POST["img"]);
    $data = base64_decode($encodedData[1]);
    $urlUploadImages = $_SERVER['DOCUMENT_ROOT'].$projName.'/images/canvas/';
    $nameImage = "test.png";
    $img = imagecreatefromstring($data);
     if($img) {
        imagepng($img, $urlUploadImages.$nameImage, 0);
        imagedestroy($img); 
        echo "OK";
    }
    else {
        echo 'ERROR';
    }

I mean the question was "how to save locally". I know what your code is supposed to do, that's why I'm pointing out it doesn't actually answers the question. — Kaiido, Apr 12 '16 at 10:34

Saving canvas as a PNG or JPG

3 Answers3

Linked