कैनवास को पीएनजी छवि के रूप में कैसे सहेजना है?

Question

मेरे पास एक ड्राइंग के साथ कैनवास तत्व है, और मैं एक बटन बनाना चाहता हूं जिस पर क्लिक किया गया, यह छवि को एक पीएनजी फ़ाइल के रूप में सहेज लेगा। तो यह सहेजें, खोलें, बंद करें संवाद बॉक्स को खोलने चाहिए ...

मैं इसे इस कोड

var canvas = document.getElementById("myCanvas"); 
window.open(canvas.toDataURL("image/png")); 

का उपयोग कर लेकिन जब मैंने उसे IE9 में बाहर का परीक्षण, एक नई विंडो कह "को खोलता है वेब पेज प्रदर्शित नहीं हो सकता " और इसका यूआरएल है:

डेटा: image/png, बेस 64, iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf/6el6/6ZnpSW/zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW/vkdrfx3H3yfT2tVzaP26X6hkw1q/BoeI/280/29JwznZxJPUyXtBQBAQBAQ BQaBcECjefmi56BWlZYtAeqajx/WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9/ldau + h + TX/8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi/UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK/eTuQU1YuccCQBW7dyIq38/j5a/एफ एन/ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J/bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + गुर्क + उम/+ ई + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2/6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6/eK7eJ/Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ/XP + PlLtEcs3huGQhO/r17K3rBvuGrEUt8i5HPAkHC/Yt6lKuwYKiuRM9TtGbY0rcerTBLwC/KY1fSNJ/MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5 PR3/zvFZJni/7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk/OiwZViHPQk/LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu/hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O/L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU/SgUJ7WNLjOVH9g8/Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy/HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY9Y0inIeE + YqQ + cqGGj3dgDtvJjC/mKm7BHmG68lGjO + 0T

किसी को भी पता है कि कैसे ठीक करने के लिए इस?

Answer 1

कोशिश यह:

var c=document.getElementById("alpha"); 
var d=c.toDataURL("image/png"); 
var w=window.open('about:blank','image from canvas'); 
w.document.write("<img src='"+d+"' alt='from canvas'/>"); 

इस नए पेज पर कैनवास से छवि दिखाता है, लेकिन अगर आप open popup in new tab है की स्थापना यह पता पट्टी में about:blank को दर्शाता है।

संपादित करें: - हालांकि window.open("<img src='"+ c.toDataURL('image/png') +"'/>") एफएफ या क्रोम में हालांकि प्रतिपादन क्या कैनवास पर दिखाया जाता है से कुछ अलग है काम नहीं करता है, तो निम्न काम करता है, मुझे लगता है कि पारदर्शिता मुद्दा है:

window.open(c.toDataURL('image/png')); 

Answer 2

FileSaver.js में सक्षम होना चाहिए यहां आपकी मदद करें

var canvas = document.getElementById("my-canvas"); 
// draw to canvas... 
canvas.toBlob(function(blob) { 
    saveAs(blob, "pretty image.png"); 
}); 

Answer 3

मुझे शायद उपयोगकर्ता को "छवि को बचाने के लिए" दायाँ क्लिक करने के लिए मजबूर करने के लिए एक बेहतर तरीका खोजा गया है। बस लिंक के href में कैनवास बेस 64 कोड ड्रा करें और इसे संशोधित करें ताकि डाउनलोड स्वचालित रूप से प्रारंभ हो जाए। मैं नहीं जानता कि इसका सार्वभौमिक ब्राउज़र संगत है लेकिन इसे मुख्य/नए ब्राउज़र के साथ काम करना चाहिए।

var canvas = document.getElementById('your-canvas'); 
    if (canvas.getContext) { 
     var C = canvas.getContext('2d'); 
    } 

$('#your-canvas').mousedown(function(event) { 
    // feel free to choose your event ;) 

    // just for example 
    // var OFFSET = $(this).offset(); 
    // var x = event.pageX - OFFSET.left; 
    // var y = event.pageY - OFFSET.top; 

    // standard data to url 
    var imgdata = canvas.toDataURL('image/png'); 
    // modify the dataUrl so the browser starts downloading it instead of just showing it 
    var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream'); 
    // give the link the values it needs 
     $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata); 

}); 

आप चाहते हैं कुछ भी चारों ओर एक रैप करने के लिए स्वतंत्र लग रहा है, उम्मीद है कि मदद करता है एक सा

Answer 4

मैं इस समाधान का इस्तेमाल किया फ़ाइल नाम स्थापित करने के लिए:

HTML:

<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a> 
<canvas id="canvas"></canvas> 

जावास्क्रिप्ट:

function download(){ 
    document.getElementById("downloader").download = "image.png"; 
    document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream'); 
} 

Answer 5

इस प्रयास करें:

jQuery('body').after('<a id="Download" target="_blank">Click Here</a>'); 

var canvas = document.getElementById('canvasID'); 
var ctx = canvas.getContext('2d'); 

document.getElementById('Download').addEventListener('click', function() { 
    downloadCanvas(this, 'canvas', 'test.png'); 
}, false); 

function downloadCanvas(link, canvasId, filename) { 
    link.href = document.getElementById(canvasId).toDataURL(); 
    link.Download = filename; 
} 

तुम बस फ़ायरफ़ॉक्स या chrom में कंसोल में इस कोड डाल सकते हैं और यह ऊपर स्क्रिप्ट में अपने कैनवस टैग आईडी बदल के बाद और कंसोल में इस स्क्रिप्ट को चलाने।

इस कोड को निष्पादित करने के बाद आप HTML पृष्ठ के नीचे "यहां क्लिक करें" टेक्स्ट के रूप में लिंक देखेंगे। इस लिंक पर क्लिक करें और नई विंडो में एक पीएनजी छवि के रूप में कैनवास ड्राइंग खोलें छवि को सहेजें।

Answer 6

मैं इस समस्या थी और यह किसी भी बाहरी या अतिरिक्त स्क्रिप्ट पुस्तकालयों के बिना सबसे अच्छा समाधान है: जावास्क्रिप्ट टैग में या फ़ाइल इस समारोह बनाने के लिए: हम यहाँ मान लेते हैं कि कैनवास अपने कैनवास है:

function download(){ 
     var download = document.getElementById("download"); 
     var image = document.getElementById("canvas").toDataURL("image/png") 
        .replace("image/png", "image/octet-stream"); 
     download.setAttribute("href", image); 

    } 

में आपके एचटीएमएल का बॉडी हिस्सा बटन निर्दिष्ट करें:

<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a> 

यह काम कर रहा है और डाउनलोड लिंक एक बटन जैसा दिखता है। फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया।

Answer 7

एक रूप है जो कैनवास toDataURL ('छवि/png') जैसे का मूल्य

// JAVASCRIPT

var canvas = document.getElementById("canvas"); 
    var url = canvas.toDataUrl('image/png'); 

साथ एक इनपुट शामिल जमा करें फार्म पर अपने छिपे हुए इनपुट करने के लिए यूआरएल के मान सम्मिलित करें तत्व।

// पीएचपी

$data = $_POST['photo']; 
    $data = str_replace('data:image/png;base64,', '', $data); 
    $data = base64_decode($data); 
    file_put_contents("i". rand(0, 50).".png", $data); 

Answer 8

var canvasId = chart.id + '-canvas'; 
var canvasDownloadId = chart.id + '-download-canvas'; 
var canvasHtml = Ext.String.format('<canvas id="{0}" width="{1}" height="{2}"></canvas><a id="{3}"/>', 
canvasId, 
chart.getWidth(), 
chart.getHeight(), 
canvasDownloadId); 
var canvasElement = reportBuilder.add({ html: canvasHtml }); 

var canvas = document.getElementById(canvasId); 

var canvasDownload = document.getElementById(canvasDownloadId); 
canvasDownload.href = chart.getImage().data; 
canvasDownload.download = 'chart'; 

canvasDownload.click(); 

Answer 9

पूर्ण कार्य एचटीएमएल कोड। कट + नया .HTML फ़ाइल में पेस्ट करें:

शामिल दो उदाहरण:

HTML फ़ाइल में

1. कैनवस।
2. कैनवास गतिशील रूप से जावास्क्रिप्ट के साथ बनाया गया।

में परीक्षण किया:

1. क्रोम
2. इंटरनेट एक्सप्लोरर
3. * एज (शीर्षक नाम दिखाई नहीं देता)
4. फ़ायरफ़ॉक्स
5. ओपेरा

---

<!DOCTYPE HTML > 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title> #SAVE_CANVAS_TEST# </title> 
    <meta 
     name ="author" 
     content="John Mark Isaac Madison" 
    > 
    <!-- EMAIL: J4M4I5M7 -[ＡＴ]- Hotmail.com --> 
</head> 
<body> 

<div id="about_the_code"> 
    Illustrates: 
    <ol> 
    <li>How to save a canvas from HTML page.  </li> 
    <li>How to save a dynamically created canvas.</li> 
    </ol> 
</div> 

<canvas id="DOM_CANVAS" 
     width ="300" 
     height="300" 
></canvas> 

<div id="controls"> 
    <button type="button" style="width:300px;" 
      onclick="obj.SAVE_CANVAS()"> 
     SAVE_CANVAS (Dynamically Made Canvas) 
    </button> 

    <button type="button" style="width:300px;" 
      onclick="obj.SAVE_CANVAS('DOM_CANVAS')"> 
     SAVE_CANVAS (Canvas In HTML Code) 
    </button> 
</div> 

<script> 
var obj = new MyTestCodeClass(); 
function MyTestCodeClass(){ 

    //Publically exposed functions: 
    this.SAVE_CANVAS = SAVE_CANVAS; 

    //:Private: 
    var _canvas; 
    var _canvas_id = "ID_OF_DYNAMIC_CANVAS"; 
    var _name_hash_counter = 0; 

    //:Create Canvas: 
    (function _constructor(){ 
     var D = document; 
     var CE = D.createElement.bind(D); 
     _canvas = CE("canvas"); 
     _canvas.width = 300; 
     _canvas.height= 300; 
     _canvas.id = _canvas_id; 
    })(); 

    //:Before saving the canvas, fill it so 
    //:we can see it. For demonstration of code. 
    function _fillCanvas(input_canvas, r,g,b){ 
     var ctx = input_canvas.getContext("2d"); 
     var c = input_canvas; 

     ctx.fillStyle = "rgb("+r+","+g+","+b+")"; 
     ctx.fillRect(0, 0, c.width, c.height); 
    } 

    //:Saves canvas. If optional_id supplied, 
    //:will save canvas off the DOM. If not, 
    //:will save the dynamically created canvas. 
    function SAVE_CANVAS(optional_id){ 

     var c = _getCanvas(optional_id); 

     //:Debug Code: Color canvas from DOM 
     //:green, internal canvas red. 
     if(optional_id){ 
      _fillCanvas(c,0,255,0); 
     }else{ 
      _fillCanvas(c,255,0,0); 
     } 

     _saveCanvas(c); 
    } 

    //:If optional_id supplied, get canvas 
    //:from DOM. Else, get internal dynamically 
    //:created canvas. 
    function _getCanvas(optional_id){ 
     var c = null; //:canvas. 
     if(typeof optional_id == "string"){ 
      var id = optional_id; 
      var d = document; 
      var c = d.getElementById(id); 
     }else{ 
      c = _canvas; 
     } 
     return c; 
    } 

    function _saveCanvas(canvas){ 
     if(!window){ alert("[WINDOW_IS_NULL]"); } 

     //:We want to give the window a unique 
     //:name so that we can save multiple times 
     //:without having to close previous 
     //:windows. 
     _name_hash_counter++    ; 
     var NHC = _name_hash_counter  ; 
     var URL = 'about:blank'   ; 
     var name= 'UNIQUE_WINDOW_ID' + NHC; 
     var w=window.open(URL, name) ; 

     if(!w){ alert("[W_IS_NULL]");} 

     //:Create the page contents, 
     //:THEN set the tile. Order Matters. 
     var DW = ""      ; 
     DW += "<img src='"     ; 
     DW += canvas.toDataURL("image/png"); 
     DW += "' alt='from canvas'/>"  ; 
     w.document.write(DW)    ; 
     w.document.title = "NHC"+NHC  ; 

    } 

}//:end class 

</script> 

</body> 
<!-- In IE: Script cannot be outside of body. --> 
</html>