कैसे png छवि के रूप में कैनवास को बचाने के लिए?

Question 1

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

मैं इस कोड का उपयोग कर रहा हूँ

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

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

डेटा: छवि / पीएनजी; बेस 64;iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / BoeI / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + h + TX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 / j5a / एफ एन / ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J / bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gUrk + um / + e + QoVWfxxRJBQBAQQQBQUAQqBwE8uzCwiMiaEqowYRjj2/6Hl58nYHk0Pr1v1Ov62cTytXfe5f5r5f5xcmx16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ / XP + PlLtEcs3huGQhO / r17K3rBvuGrEUt8i5HPAkHC / Yt6lKuwYKiuRM9TtGbY0rcerTBLwC / KY1fSNJ / MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 / zvFZJni / 7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk / OiwZViHPQk / LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu / hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O / L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU / SgUJ7WNLjOVH9g8 / Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy / HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY9Y0inIeE + YqQ + cqGGj3dgDtvJjC / mKm7BHmG68lGjO + 0T

क्या किसी को पता है कि इसे कैसे ठीक करते हैं?

Question 2

इसे इस्तेमाल करे:

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

Question 3

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

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

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

Question 5

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

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

    }

आपके HTML के मुख्य भाग में बटन निर्दिष्ट करें:

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

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

Question 6

सभी तीन बिंदुओं को समायोजित करने के लिए:

बटन
छवि को png फ़ाइल के रूप में सहेजें
सेव, ओपन, क्लोज डायलॉग बॉक्स खोलें

फ़ाइल संवाद ब्राउज़र में एक सेटिंग है।

बटन / सेव पार्ट के लिए निम्नलिखित फ़ंक्शन असाइन करें, अन्य उत्तरों से उबला हुआ, आपके बटन पर क्लिक करें:

function DownloadCanvasAsImage(){
    let downloadLink = document.createElement('a');
    downloadLink.setAttribute('download', 'CanvasAsImage.png');
    let canvas = document.getElementById('myCanvas');
    let dataURL = canvas.toDataURL('image/png');
    let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');
    downloadLink.setAttribute('href', url);
    downloadLink.click();
}

कोडपेन पर उदाहरण

एक और, कुछ हद तक क्लीनर, Canvas.toBlob () का उपयोग कर रहा है :

function DownloadCanvasAsImage(){
    let downloadLink = document.createElement('a');
    downloadLink.setAttribute('download', 'CanvasAsImage.png');
    let canvas = document.getElementById('myCanvas');
    canvas.toBlob(function(blob) {
      let url = URL.createObjectURL(blob);
      downloadLink.setAttribute('href', url);
      downloadLink.click();
    });
}

कोडपेन पर उदाहरण

न तो समाधान 100% क्रॉस ब्राउज़र संगत है, इसलिए क्लाइंट की जांच करें

Question 7

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

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

});

आप जो <a>कुछ भी चाहते हैं उसके चारों ओर लपेट सकते हैं।

Question 8

इसे इस्तेमाल करे:

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

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

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

Question 9

एक प्रपत्र जमा करें जिसमें कैनवास के मान के साथ एक इनपुट शामिल है toDataURL ('छवि / पीएनजी') उदा

// JAVASCRIPT

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

प्रपत्र तत्व पर अपने छिपे हुए इनपुट के लिए url का मान सम्मिलित करें।

// PHP

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

Question 10

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

दो उदाहरण हैं:

HTML फ़ाइल में कैनवास।
कैनवस को गतिशील रूप से जावास्क्रिप्ट के साथ बनाया गया।

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

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

<!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>

Question 11

मैं वास्तव में तोवास्क के उत्तर को पसंद करता हूं, लेकिन यह फ़ंक्शन नाम के कारण काम नहीं करता है download( यह उत्तर बताता है कि क्यों)। मुझे "डेटा: एप्लिकेशन / ..." के साथ "डेटा: छवि / ..." को बदलने के लिए बिंदु दिखाई नहीं देता है।

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

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

function prepDownload(a, canvas, name) {
    a.download = name
    a.href = canvas.toDataURL()
}

HTML:

<a href="#" onclick="prepDownload(this, document.getElementById('canvasId'), 'imgName.png')">Download</a>
<canvas id="canvasId"></canvas>

Question 12

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