자바 스크립트 파일을 base64로 PNG로 데이터를 변환하는 것은 내가 PNG로 인코딩이 <code>base64</code>이

Question

객체, 그리고 내가 할 수있는 가장 좋은 방법은이 파일 객체로 PNG 년대를 변환하는 것입니다 생각 Resemble.JS

사용하여 비교해야 fileReader을 사용하십시오. 내가 어떻게 해?

Answer 1

당신은 당신의 base64로 데이터에서 Blob을 만든 다음 그것을 asDataURL를 읽을 수 있습니다

var img_b64 = canvas.toDataURL('image/png'); 
var png = img_b64.split(',')[1]; 

var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'}); 

var fr = new FileReader(); 
fr.onload = function (oFREvent) { 
    var v = oFREvent.target.result.split(',')[1]; // encoding is messed up here, so we fix it 
    v = atob(v); 
    var good_b64 = btoa(decodeURIComponent(escape(v))); 
    document.getElementById("uploadPreview").src = "data:image/png;base64," + good_b64; 
}; 
fr.readAsDataURL(the_file); 

전체 예 (정크 코드 및 콘솔 로그 포함) : 또는 http://jsfiddle.net/tTYb8/

---

을, 당신은 .readAsText을 사용할 수 있습니다, 그것은 잘 작동하고, 더 우아한 ..하지만 어떤 이유로 텍스트 소리가 맞지 않습니다;)

fr.onload = function (oFREvent) { 
    document.getElementById("uploadPreview").src = "data:image/png;base64," 
    + btoa(oFREvent.target.result); 
}; 
fr.readAsText(the_file, "utf-8"); // its important to specify encoding here 

전체 예 : http://jsfiddle.net/tTYb8/3/

Answer 2

이전 대답은 나를 위해 작동하지 않았다.

하지만 완벽하게 작동했습니다. Convert Data URI to File then append to FormData

Answer 3

웨이 1 : 다른 URL 유형이 아니라 dataURL에서만 작동합니다.

function dataURLtoFile(dataurl, filename) { 
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], 
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
    while(n--){ 
     u8arr[n] = bstr.charCodeAt(n); 
    } 
    return new File([u8arr], filename, {type:mime}); 
} 

//Usage example: 
var file = dataURLtoFile('data:image/png;base64,......', 'a.png'); 
console.log(file); 

방법이는 크롬과 파이어 폭스에서 두 작품을 (...의 HTTP URL, dataURL, blobURL 등) 어떤 형태의 URL이든, 작동

//return a promise that resolves with a File instance 
function urltoFile(url, filename, mimeType){ 
    mimeType = mimeType || (url.match(/^data:([^;]+);/)||'')[1]; 
    return (fetch(url) 
     .then(function(res){return res.arrayBuffer();}) 
     .then(function(buf){return new File([buf], filename, {type:mimeType});}) 
    ); 
} 

//Usage example: 
urltoFile('data:image/png;base64,......', 'a.png') 
.then(function(file){ 
    console.log(file); 
}) 

.