एक पीएनजी या जेपीजी

Question

के रूप में कैनवास सहेजना मैं बेस 64-एन्कोडेड छवि के रूप में इसे एक नई विंडो में खोलने के बिना, कैनवास को पीएनजी के रूप में सहेजना चाहता हूं।

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

    }); 

मैं बटन एक PNG या JPG के रूप में छवि को बचाने बनाना चाहते:

मैं इस कोड का इस्तेमाल किया।

Answer 1

canvas.toDataURL('png') एक स्ट्रिंग ला ला data:image/png;base64,XYZ प्रदान करता है। आप इसे <a href="%dataURI%" download>download</a> में रख सकते हैं (संभवतः तत्व पर एक क्लिक ईवेंट ट्रिगर करें)। Downloading resources in HTML5: a[download]

वर्तमान में केवल Google क्रोम द्वारा समर्थित है।

Answer 2

मैं अपने 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

script.js में दाखिल

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

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