पीएनजी कैनवास छवि को HTML5 स्टोरेज (JAVASCRIPT) में सहेजें?

Question

मैं क्रोम एक्सटेंशन विकसित कर रहा हूं।

मैं कैनवास में एक छवि फ़ाइल खोलता हूं, मैं इसमें कुछ बदलाव लागू करता हूं, फिर मैं इसे HTML5 फाइल सिस्टम एपीआई में सहेजने की कोशिश कर रहा हूं। तो बस डेटा

var dataURL = canvas.toDataURL('image/png;base64'); 

:

सबसे पहले मैं कैनवास से dataURL मिल

var image64 = dataURL.replace(/data:image\/png;base64,/, ''); 

तो मैं एक ब्लॉब बनाते हैं।

var bb = new BlobBuilder(); 
    bb.append(image64); 
    var blob = bb.getBlob('image/png'); 

फिर मैं फ़ाइल सिस्टम को InitFs() पर निम्न फ़ंक्शन के साथ अनुरोध करता हूं;

function onInitFs(fs) { 
     fs.root.getFile('image.png', {create: true}, function(fileEntry) { 
     // Create a FileWriter object for our FileEntry (log.txt). 
     fileEntry.createWriter(function(fileWriter) { 
     //WRITING THE BLOB TO FILE 
     fileWriter.write(blob); 
     }, errorHandler); 
     }, errorHandler); 
    } 

    window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler); 

यह परिणाम दूषित फ़ाइल फ़ाइल सिस्टम में लिखा जा रहा है।

मुझे नहीं पता कि यह काम करने के लिए मैं और क्या कर सकता हूं।

क्या कोई मुझे सही दिशा में मार्गदर्शन कर सकता है।

इस कार्य को पूरा करने के लिए उपयोग किए जा रहे कार्यों के कुछ स्रोत निम्नलिखित हैं।

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method

http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty

धन्यवाद!

Answer 1

आप सीधे डिस्क पर बेस 64 प्रतिनिधित्व लिख रहे हैं। आपको इसे पहले डीकोड करने की आवश्यकता है।

Answer 2

मैं वही बात सोच रहा था और एक जवाब खोजने के लिए एक नज़र डाली थी।
मैं जो कह सकता हूं उससे आपको एक एटोब से यूनिट 8एरे में प्राप्त कच्ची स्ट्रिंग को परिवर्तित करना होगा और फिर आप उसे ब्लॉब में जोड़ सकते हैं।
यहां एक उदाहरण है जो एक छवि को कैनवास में परिवर्तित करता है और फिर कैनवास से डेटा को ब्लॉब में परिवर्तित करता है और फिर तीसरी छवियों को ब्लाब के यूरी पर सेट किया जाता है .... आप से fs सामान को जोड़ने में सक्षम होना चाहिए वहाँ ....
http://jsfiddle.net/PAEz/XfDUS/
.. यहां कोड डालने के लिए क्षमा करें, लेकिन ईमानदार होने के लिए मैं यह नहीं समझ सकता कि कैसे;) और वैसे भी, जेएसफ़िल्ड इसके साथ खेलने का एक अच्छा तरीका है।

संदर्भ
https://gist.github.com/1032746
http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js
Get image data in JavaScript?
http://jsdo.it/tsmallfield/typed_array

Answer 3

आप HTMLCanvasElement.toBlob चाहते हैं और फिर W3C फाइल सिस्टम एपीआई के साथ एक फाइल सिस्टम के लिए ब्लॉब लिखते हैं, लेकिन अधिकांश ब्राउज़र अभी तक इसे लागू नहीं किया है।

Answer 4

मुझे एक ऐसा फ़ंक्शन मिला है जो एक डेटा यूआरएल को ब्लॉब में परिवर्तित करता है।

जब आपको सैंडबॉक्स फ़ाइल फ़ाइल सिस्टम में कैनवास छवि को सहेजने की आवश्यकता होती है तो बढ़िया है। क्रोम 13 में काम करता है।

function dataURItoBlob(dataURI, callback) { 
    // convert base64 to raw binary data held in a string 
    // doesn't handle URLEncoded DataURIs 
    var byteString = atob(dataURI.split(',')[1]); 

    // separate out the mime component 
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] 

    // write the bytes of the string to an ArrayBuffer 
    var ab = new ArrayBuffer(byteString.length); 
    var ia = new Uint8Array(ab); 
    for (var i = 0; i < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    // write the ArrayBuffer to a blob, and you're done 
    var bb = new window.WebKitBlobBuilder(); // or just BlobBuilder() if not using Chrome 
    bb.append(ab); 
    return bb.getBlob(mimeString); 
}; 

उपयोग:

window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs){ 
    fs.root.getFile("image.png", {create:true}, function(fileEntry) { 
     fileEntry.createWriter(function(fileWriter) { 
      fileWriter.write(dataURItoBlob(myCanvas.toDataURL("image/png"))); 
     }, errorHandler); 
    }, errorHandler); 
}, errorHandler); 

स्रोत निशान:

http://mustachified.com/master.js
के माध्यम से http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html
के माध्यम से https://bugs.webkit.org/show_bug.cgi?id=51652
के माध्यम से http://code.google.com/p/chromium/issues/detail?id=67587

Answer 5

वहाँ मैं अब है एक canvas.toBlob() polyfill: https://github.com/eligrey/canvas-toBlob.js
अन्य रोचक लिंक: https://github.com/eligrey/BlobBuilder.js

इन के साथ

तो यह कैनवास से छवि को बचाने के लिए आसान हो गया:

<script type="text/javascript" src="https://raw.github.com/eligrey/BlobBuilder.js/master/BlobBuilder.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.min.js"></script> 
... 
canvas.toBlob(function(blob) { 
    fileWriter.write(blob); 
}, "image/png"); 

यह एक छोटा सा FileSaver का उपयोग कर उदाहरण है: http://jsfiddle.net/JR5XE/