कैनवास के साथ एक छवि के रूप में कैनवास को कैसे बचाया जाए ।toDataURL ()?

141

मैं वर्तमान में एक HTML5 वेब ऐप / फोनगैप देशी ऐप बना रहा हूं और मुझे यह पता नहीं लग सकता है कि मैं अपने कैनवास को एक छवि के रूप में कैसे सहेज सकता हूं canvas.toDataURL()। क्या कोई मेरी मदद कर सकता है?

यहाँ कोड है, इसमें क्या गलत है?

// मेरे कैनवस को "कैनवसशिप" नाम दिया गया था

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

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

एचटीएमएल 5:

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

— Wardenclyffe
स्रोत

4

ओपी के सवाल का जवाब नहीं दिया गया है। उन्होंने स्पष्ट रूप से यह Phonegap / iPad के लिए कहा है। दिए गए उत्तर डेस्कटॉप ब्राउज़र पर सहेजने के लिए हैं।

— tshm001

1

फ़ोनगैप के बारे में निश्चित नहीं है, लेकिन मैंने देशी आईओएस में दूसरे छोर पर जावास्क्रिप्ट का उपयोग करके खरोंच से ऐसा किया है, मैं डेटा को कैप्चर करता हूं .toDataURL(), फिर ब्राउज़र को इंगित करने के लिए window.location का उपयोग करें appname://[data url]। ऐप के अंत में, UIWebView के पास एक प्रतिनिधि विधि है जो कहती है कि इसे एक पृष्ठ लोड करना चाहिए या नहीं। appname://जब यह आता है, तो मैं इसे सुनता हूं और तोड़ता हूं , पृष्ठ लोड को अस्वीकार करता हूं और डेटा स्ट्रिंग को मूल स्ट्रिंग में कैप्चर करता हूं ... आप वास्तविक आईओएस / ऑब्जेक्टिव सी कोड से कितने परिचित हैं?

— डग

121

यहाँ कुछ कोड है। बिना किसी त्रुटि के।

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally

— user1874941
स्रोत

1

IE9 मानकों मोड को छोड़कर: "इस वेबपेज पर कुछ सामग्री या फ़ाइलों को एक प्रोग्राम की आवश्यकता होती है जिसे आपने इंस्टॉल नहीं किया है।" Internet Explorer 8 और इसके बाद के संस्करण केवल CSS, <लिंक>, और <img> में छवियों के लिए डेटा URI का समर्थन करता है: developer.mozilla.org/en-US/docs/data_URIs

— सेसम टिम्मरमैन

45

ठीक काम करता है। मैं डाउनलोड की गई फ़ाइल का नाम कैसे बदल सकता हूँ? यह सिर्फ "डाउनलोड" और विस्तार के बिना आ रहा है। धन्यवाद!

— लीबडल्ला

1

क्रोम में यह ब्राउजर को क्रैश कर देता है। यदि मैं छवि को एक छवि टैग में प्रदर्शित करता हूं, तो यह काम करता है लेकिन राइट-क्लिक मेनू को बाहर निकाल दिया जाता है - इसलिए मैं अभी भी छवि को नहीं बचा सकता।

— कोकोडको

यह बहुत अच्छा काम करता है ... लेकिन एंड्रॉइड (गैलेक्सी एस 3 में डिफ़ॉल्ट ब्राउज़र) यह केवल छवि को डाउनलोड नहीं करता है, लेकिन मुझे संदेश "डाउनलोडिंग ... हमेशा के लिए मिलता है।"

— हरबशात

मेरे पास कुछ समस्या है जो मुझे इस लिंक को देखने में मदद कर सकती है: stackoverflow.com/questions/25131763/…

— Ramesh S

36

यह समाधान आपको डाउनलोड की गई फ़ाइल का नाम बदलने की अनुमति देता है:

HTML:

<a id="link"></a>

JavaScript:

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

— थॉमस डब्ल्यू
स्रोत

इसके लिए धन्यवाद, इसने मेरी बहुत मदद की है!

— माइक चंद्रमा

22

डाउनलोड के लिए संकेत करने के लिए आप कैनवस 2image का उपयोग कर सकते हैं ।

मेरे पास एक ही मुद्दा था, यहां एक सरल उदाहरण है कि दोनों पृष्ठ पर छवि जोड़ते हैं और ब्राउज़र को इसे डाउनलोड करने के लिए मजबूर करते हैं:

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>

— SColvin
स्रोत

2

बस इसे आज़माया गया, यह क्रोम में कोई नाम और न ही एक्सटेंशन वाली फ़ाइल को बचाएगा।

— मलबा

जैसा कि यहाँ उल्लेख किया गया है nihilogic.dk/labs/canvas2image फ़ाइल नाम सेट करना संभव प्रतीत नहीं होता है: "यह वास्तव में साफ-सुथरा होगा यदि किसी तरह एक फ़ाइल नाम डेटा से जोड़ा जा सकता है, लेकिन मुझे ऐसा करने का कोई तरीका नहीं मिला है। अभी के लिए, आपको स्वयं फ़ाइल नाम निर्दिष्ट करना होगा। "

— SColvin

1

आपके द्वारा पोस्ट किया गया लिंक टूटा हुआ है

— ऑलिवर न्बरोबे

9

आप यह कोशिश कर सकते हैं; डमी HTML एंकर बनाएं, और छवि को वहां से डाउनलोड करें जैसे ...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

— bmatovu
स्रोत

1

मुझे यह तथ्य पसंद है कि जेएस में सब कुछ किया गया था, जिसमें लिंक तत्व का निर्माण भी शामिल था। यह स्वचालन उद्देश्यों के लिए बहुत अच्छा काम करता है

— जेरेमी एडोफो

सही समाधान

— हृदय रहमान

8

मैंने एक छोटा पुस्तकालय बनाया जो ऐसा करता है (कुछ अन्य उपयोगी रूपांतरणों के साथ)। इसे रीमग कहा जाता है , और यह वास्तव में उपयोग करने के लिए सरल है।

ReImg.fromCanvas(yourCanvasElement).toPng()

— gillyb
स्रोत

शांत पुस्तकालय। धन्यवाद। हालांकि उदाहरण के दस्तावेज में एक छोटा मुद्दा है। मैंने आपके ध्यान में लाने के लिए गितुब पर एक मुद्दा खोला।

— jmknoll

7

मेरे लिए यह काम: (केवल गूगल क्रोम)

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>

— 1000Bugy
स्रोत

शायद आप अपने कोड के उस भाग को समझा सकते हैं जो बिना किसी टिप्पणी के केवल चिपकाने के बजाय प्रश्न का उत्तर देता है?

— गिडमिनस मासाइटिस

6

1000Bugy के उत्तर के समान लेकिन सरल है क्योंकि आपको मक्खी पर एक लंगर बनाने और मैन्युअल रूप से एक क्लिक ईवेंट (प्लस IE फिक्स) भेजने की आवश्यकता नहीं है।

यदि आप अपने डाउनलोड बटन को एक एंकर बनाते हैं तो आप डिफ़ॉल्ट एंकर कार्यक्षमता के चलने से ठीक पहले उसे हाईजैक कर सकते हैं। तो onAnchorClickआप एंकर href को कैनवस बेस 64 इमेज पर सेट कर सकते हैं और एंकर डाउनलोड एट्रिब्यूट जो भी आप अपनी इमेज को नाम देना चाहते हैं।

यह (वर्तमान) IE में काम नहीं करता है क्योंकि यह डाउनलोड विशेषता को लागू नहीं करता है और डेटा यूरिस के डाउनलोड को रोकता है। लेकिन window.navigator.msSaveBlobइसके बजाय का उपयोग करके तय किया जा सकता है ।

तो आपका एंकर क्लिक इवेंट हैंडलर निम्नलिखित होगा (जहाँ anchor, canvasऔर fileNameस्कोप लुकअप हैं):

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

यहाँ एक बेला है

— Sjeiti
स्रोत

1

इसके बजाय imageElement.src = myImage;आपको उपयोग करना चाहिएwindow.location = myImage;

और उसके बाद भी ब्राउज़र इमेज को ही प्रदर्शित करेगा। आप छवि को डाउनलोड करने के लिए "लिंक सहेजें" पर राइट क्लिक और उपयोग कर सकते हैं।

चेक इस लिंक अधिक जानकारी के लिए।

— हकन सेरसे
स्रोत

वाह, धन्यवाद, कि वास्तव में बहुत मदद मिली :) लेकिन आपको एक पॉप अप बॉक्स कैसे मिलता है, ताकि कोई व्यक्ति किसी विशिष्ट गंतव्य (जैसे कि उनके एंड्रॉइड इमेज फ़ोल्डर) को बचा सके?

— वार्डेनक्लिफ

यह विशिष्ट ब्राउज़र पर निर्भर करता है। एंड्रॉइड ब्राउज़र आमतौर पर एक विशिष्ट फ़ोल्डर में सीधे फ़ाइलों को डाउनलोड करता है, उदाहरण के लिए।

— हकन सेरेस

क्रोम में यह काम करता है, लेकिन राइट-क्लिक मेनू को बाहर निकाल दिया जाता है। जब ब्राउज़र से छवि को खींचने की कोशिश की जाती है, तो क्रोम क्रैश हो जाता है।

— कोकोडको

group.google.com/a/chromium.org/forum/# -topic/blink-dev/… इस तरह से डेटा URL खोलना अवरुद्ध होने वाला है जैसा दिखता है।

— KeyOfJ

0

कॉर्डोवा में चलने पर छवि डाउनलोड करने के लिए पहले बताई गई विधियों का आप उपयोग नहीं कर सकते। आपको कॉर्डोवा फाइल प्लगइन का उपयोग करना होगा । यह आपको इसे चुनने के लिए और विभिन्न दृढ़ता सेटिंग्स का लाभ उठाने की अनुमति देगा। यहाँ विवरण: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

वैकल्पिक रूप से, आप छवि को बेस 64 में बदल सकते हैं, फिर स्ट्रिंग को लोकलस्टोरेज में स्टोर कर सकते हैं लेकिन यह आपके कोटा को बहुत जल्दी भर देगा यदि आपके पास कई चित्र या हाई-रेस हैं।

— BigBalli
स्रोत

-9

@Wardenclyffe और @SColvin, आप दोनों कैनवास के उपयोग से छवि को बचाने की कोशिश कर रहे हैं, कैनवास के संदर्भ का उपयोग करके नहीं। दोनों को आपको ctx.toDataURL () करने का प्रयास करना चाहिए; इसे इस्तेमाल करे:

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

इसके अलावा आप निम्नलिखित लिंक का उल्लेख कर सकते हैं:

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

— विनय चंद्रा
स्रोत

बिना पढ़े टाइपरोर: ऑब्जेक्ट # <CanvasRenderingContext2D> का कोई तरीका नहीं है 'toDataURL'।

— बजे ब्रैंडन ऑबी

यह गलत है क्योंकि संदर्भ तत्व में कोई toDataURLफ़ंक्शन नहीं है : developer.mozilla.org/en-US/docs/Web/API/… । आप toDataURLकैनवास तत्व पर कॉल करना चाहते हैं : developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

— Crashhalot