Saving canvas as a PNG or JPG

问题:

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.

回答1:

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 }); 

回答2:

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.

回答3:

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';     } 

文章来源: Saving canvas as a PNG or JPG