Guardar lienzo como PNG o JPG

Question

Quiero guardar lienzo como PNG, sin abrirlo en una ventana nueva como imagen codificada en base64.

que utiliza este código:

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

    }); 

Quiero hacer el botón Guardar la imagen como PNG o JPG.

Answer 1

canvas.toDataURL('png') proporciona una cadena a la data:image/png;base64,XYZ. Podría meter eso en un <a href="%dataURI%" download>download</a> (posiblemente desencadenar un evento de clic en el elemento). Ver Downloading resources in HTML5: a[download]

Actualmente solo es compatible con Google Chrome.

Answer 2

yo uso esto en mi 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 
}); 

Answer 3

En script.js el archivo

$(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"); 
       } 
      }); 
    }); 

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