JavaScriptのbase64イメージをファイルオブジェクトに変換する

Question

別のイメージから切り取ったbase64イメージからファイルオブジェクトを作成しようとしています。私はそれを行うことができますが、結果のファイルサイズは実際のサイズのほぼ3倍です。私が使用している機能は以下の通りです。

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イメージからファイルオブジェクトを作成しようとしています。 私はそれを行うことができますが、結果のファイルサイズは 実際のサイズのほぼ3倍です。

は、入力data URIのコンテンツのサイズの3倍であることBlobの.sizeを結果として再現することはできません。 .lengthは、Blob.sizeの3倍のサイズになりますか？

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/h0A8GJUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkHcBRH8DgsmlTc8AAAAASUVORK5CYII=", "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>

Blobに追加する必要があり.nameと.lastModifiedDate場合は、ファイル名パラメータはFileコンストラクタの2番目のパラメータに設定されることを想定している、BlobためFileコンストラクタを使用して置き換え、必要に応じてすることができます予想される.lastModidiedおよび/または.lastModifiedDateコンストラクタの3番目のパラメータのパラメータ。

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/h0A8GJUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkGdUQJ5RAXlGBeQZFZBnVECeUQF5RgXkGRWQZ1RAnlEBeUYF5BkVkHcBRH8DgsmlTc8AAAAASUVORK5CYII=", "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>

また、「結果のファイルサイズは、ほぼ実際のサイズの3倍である」_ Creating a Blob from a base64 string in JavaScript