将base64图像转换为JavaScript中的文件对象

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/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>

如果.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/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>

您还可以利用fetch()通过@Endless在Creating a Blob from a base64 string in JavaScript