रूप

Question

मैं एक इनपुट बटन "छवि सहेजें" बनाना चाहते हैं जो एक div और सहेजें की एक छवि उत्पन्न कि:

1. एक div का एक स्क्रीन शॉट
2. पर "सहेजें" के बाद पूछना ले उपयोगकर्ता के कंप्यूटर

मैं html2canvas का उपयोग कर एक डुबकी का एक स्क्रीन बनाने का तरीका और एक नया टैब में खोलने के लिए मिल गया है, यह पूरी तरह से काम करता है:

function printDiv2(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var img = canvas.toDataURL(); 
      window.open(img); 
     } 
    }); 
} 

लेकिन के लिए तुमको भाग के रूप में सहेजें, कठिन हिस्सा की तरह है ... मैं दिलचस्प विषय मिल गया है, जैसा कि मैंने जे एस (और वस्तु) कोडिंग में, मैं थोड़ा उलझन में हूँ ... मुझे लगता है कि नए कर रहा हूँ मैं FileSaver.js उपयोग करने के लिए और एक नया ब्लॉब http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

बनाना होगा लेकिन मैं कैसे मेरे html2canvas, कैसे ठीक एक नया ब्लॉब कास्ट करने के लिए में SaveAs लागू करने के लिए नहीं मिलता है ...

function printDiv2(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var img = canvas.toDataURL(); 
      window.open(img); 

      var blob = new Blob(img, {type: "image/jpeg"}); 
      var filesaver = saveAs(blob, "my image.png"); 
     } 
    }); 
} 

इसके अलावा, मैं इस के साथ कुछ करने की कोशिश की, निर्मित किए गए URL बेस 64 निकाल कर, लेकिन यह बहुत जटिल है मुझे everyting को समझने के लिए: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

लेकिन कोई मुझे कुछ सुझाव दे और कृपया मेरी मदद करें?

Answer 1

यहाँ अंतिम कोड है, तो यह कर सकते हैं आप मदद करता है:

function PrintDiv(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL(); 
      downloadURI(myImage, "MaSimulation.png"); 
     } 
    }); 
} 

function downloadURI(uri, name) { 
    var link = document.createElement("a"); 

    link.download = name; 
    link.href = uri; 
    document.body.appendChild(link); 
    link.click(); 
    //after creating link you should delete dynamic link 
    //clearDynamicLink(link); 
} 

Answer 2

आप

पर ध्यान दिया है

http://eligrey.com/demos/FileSaver.js/

ऐसा लगता है कि आप की जरूरत क्या

Answer 3

आप इस दृष्टिकोण से कर सकता है:,

//Creating dynamic link that automatically click 
    function downloadURI(uri, name) { 
     var link = document.createElement("a"); 
     link.download = name; 
     link.href = uri; 
     link.click(); 
     //after creating link you should delete dynamic link 
     //clearDynamicLink(link); 
    } 

    //Your modified code. 
    function printToFile(div) { 
     html2canvas(div, { 
      onrendered: function (canvas) { 
       var myImage = canvas.toDataURL("image/png"); 
       //create your own dialog with warning before saving file 
       //beforeDownloadReadMessage(); 
       //Then download file 
       downloadURI("data:" + myImage, "yourImage.png"); 
      } 
     }); 
    }