[英]Resizing a .png image when drawing to HTML5 canvas using JavaScript
[英]Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
我正在開發一個chrome擴展。
我在畫布中打開一個圖像文件,我對它應用了一些更改,然后我試圖將它保存到HTML5文件系統API。
首先,我從畫布中獲取dataURL:
var dataURL = canvas.toDataURL('image/png;base64');
然后只是數據:
var image64 = dataURL.replace(/data:image\/png;base64,/, '');
然后我做一個Blob。
var bb = new BlobBuilder();
bb.append(image64);
var blob = bb.getBlob('image/png');
然后我使用以下函數onInitFs()請求文件系統;
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
謝謝!
我找到了一個將數據URL轉換為blob的函數。
非常適合在需要將畫布圖像保存到沙盒文件系統時。 適用於Chrome 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
現在有一個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/
您似乎直接將base64表示寫入磁盤。 您需要先解碼它。
我一直想知道同樣的事情,看看找到答案。
從我可以告訴你必須將你從atob獲得的原始字符串轉換為unit8array然后你可以將它附加到blob。
這是一個將圖像轉換為畫布,然后將畫布中的數據轉換為blob然后將第三個圖像src設置為blob的uri的示例....您應該能夠從那里添加fs內容。 ...
http://jsfiddle.net/PAEz/XfDUS/
..不接受把代碼放在這里,但說實話,我無法弄清楚如何;)無論如何,JSFiddle是一個很好的方式來玩它。
參考
https://gist.github.com/1032746
http://code.google.com/p/html5wow/source/browse/src/demos/photo-gallery/js/utils.js
用JavaScript獲取圖像數據?
http://jsdo.it/tsmallfield/typed_array
您需要HTMLCanvasElement.toBlob
,然后使用W3C文件系統API將blob寫入文件系統,但大多數瀏覽器尚未實現它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.