在JavaScript中將base64圖像轉換為文件對象

Question

我試圖從base64圖像創建一個文件對象，該圖像是從另一個圖像切割而來的。 我能夠做到但是生成的文件大小幾乎是實際大小的三倍。 以下是我正在使用的功能：

convertDataURItoFile(dataURI, fileName) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    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 blob: any = new Blob([ia], { type: mimeString });

    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    //Cast to a File() type
    return <File>blob;
  }

有沒有想過為什么文件大小如此急劇增加？ 我怎么壓縮它？ 提前致謝。

Answer 1

我試圖從base64圖像創建一個文件對象，該圖像是從另一個圖像切割而來的。 我能夠做到但是生成的文件大小幾乎是實際大小的三倍。

無法重現Blob結果.size三倍於輸入data URI內容的大小。 你的意思是data URI .length可以是Blob .size大小的三倍嗎？

 function convertDataURItoFile(dataURI, fileName) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this 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 blob = new Blob([ia], { type: mimeString }); //A Blob() is almost a File() - it's just missing the two properties below which we will add blob.lastModifiedDate = new Date(); blob.name = fileName; //Cast to a File() type console.log(`input data size: ${datauriLength} Blob.size: ${blob.size}`); return blob; } const [datauri, filename] = ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAADCCAYAAAD+Wo90AAAABHNCSVQICAgIfAhkiAAAApVJREFUeJzt1DEBACAMwLCBf88ggZMeiYJeXTPnDEDY/=", "filename.png"]; const datauriLength = datauri.length; const reader = new FileReader; reader.onload = () => { console.log(`data URI: ${reader.result}`) document.querySelector("iframe").src = reader.result; }; reader.readAsDataURL(convertDataURItoFile(datauri, filename)); 

 <iframe></iframe> 

如果需要將.name和.lastModifiedDate添加到Blob ，則可以使用File構造函數替換Blob ，它希望將文件名參數設置為File構造函數的第二個參數，並在第三個參數中選擇預期的.lastModidied和.lastModifiedDate參數到構造函數。

 function convertDataURItoFile(dataURI, fileName) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this 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 // use `File` constructor here var blob = new File([ia], fileName, { type: mimeString, lastModifiedDate: new Date() }); //A Blob() is almost a File() - it's just missing the two properties below which we will add // blob.lastModifiedDate = new Date(); // blob.name = fileName; //Cast to a File() type console.log(`input data size: ${datauriLength} Blob.size: ${blob.size}`); return blob; } const [datauri, filename] = ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASoAAADCCAYAAAD+Wo90AAAABHNCSVQICAgIfAhkiAAAApVJREFUeJzt1DEBACAMwLCBf88ggZMeiYJeXTPnDEDY/=", "filename.png"]; const datauriLength = datauri.length; const reader = new FileReader; reader.onload = () => { console.log(`data URI: ${reader.result}`) document.querySelector("iframe").src = reader.result; }; reader.readAsDataURL(convertDataURItoFile(datauri, filename)); 

 <iframe></iframe> 

您還可以使用fetch()創建並獲取data URI Blob表示，請參閱@Endless 在JavaScript中從base64字符串創建Blob時的答案