在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时的答案