Đang cố gắng để tiết kiệm vải url dữ liệu PNG vào đĩa với HTML5 hệ thống tập tin, nhưng khi tôi lấy như URL, đó là không hợp lệ

Question

tôi nhận được hình ảnh base64 mã hóa hình thành vải như:

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

Sau đó, tôi biến nó thành dữ liệu như thế này:

//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder 
var data = atob(dataURL.substring("data:image/png;base64,".length)); 

Sau đó, tôi viết nó vào hệ thống tập tin thông qua:

event.createWriter(
    function(writerEvent) 
    { 
     //The success handler 
     writerEvent.onwriteend = function(finishEvent) 
     { 
      ... 
     }; 

     //Error handler 
     writerEvent.onerror = settings.error; 

     // Create a new Blob 
     var blob = new Blob([ data ], { type: "image/png" }); 

     //Write it into the path 
     writerEvent.write(blob); 
    } 
} 

tôi cố gắng để thiết lập nó như src của một hình ảnh giống như t của mình:

document.getElementById("saved").src = event.toURL(); 

Đó viết các tập tin và tôi có thể tìm thấy nó và có được một url (bằng cách đọc nó và sử dụng sự kiện: event.toURL(). Nhưng hình ảnh hiển thị dưới dạng biểu tượng hình ảnh bị hỏng trên trang web. Tôi đang làm gì sai?

Answer 1

data là một chuỗi, vì vậy khi bạn chuyển nó thành blob, dữ liệu nhị phân sẽ là chuỗi đó trong mã hóa UTF-8. Bạn muốn dữ liệu nhị phân không phải là một chuỗi.

Bạn có thể làm điều đó thích:

var canvas = document.createElement("canvas"); 


var dataURL = canvas.toDataURL("image/png"); 
var data = atob(dataURL.substring("data:image/png;base64,".length)), 
    asArray = new Uint8Array(data.length); 

for(var i = 0, len = data.length; i < len; ++i) { 
    asArray[i] = data.charCodeAt(i);  
} 

var blob = new Blob([ asArray.buffer ], {type: "image/png"}); 

Ngoài ra còn có canvas.toBlob sẵn trong tương lai nhưng hiện không trong Chrome.

Demo http://jsfiddle.net/GaLRS/