在angularjs中将base64图像数据转换为图像文件答案

【问题标题】：Convert base64 image data to image file in angularjs在angularjs中将base64图像数据转换为图像文件
【发布时间】：2015-11-26 13:38:39
【问题描述】：

在将base64文件转换为angularjs中的图像时获取损坏的文件有人可以建议我如何将base64文件转换为angularjs中的图像

我正在使用这种方法将base64文件转换为图像

var imageBase64 = "image base64 data";
var blob = new Blob([imageBase64], {type: 'image/png'});

从这个blob，你可以生成文件对象。

var file = new File([blob], 'imageFileName.png');

【问题讨论】：

你能接受我的回答吗

标签： javascript jquery angularjs

【解决方案1】：

首先，将 dataURL 转换为 Blob 这样做

var blob = dataURItoBlob(imageBase64);

function dataURItoBlob(dataURI) {

            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {type:mimeString});
        }

然后

var file = new File([blob], "fileName.jpeg", {
            type: "'image/jpeg'"
          });

【讨论】：

我被这个问题困扰了至少一天，您的代码运行良好，这应该是公认的答案。
谢谢兄弟，我被困了3天。你节省了我的时间。

【解决方案2】：

你的代码看起来不错，除了一点：

您提供给 Blob 对象的数据不是 Blob 数据，它是一种经过 base64 编码的文本。您应该在插入之前解码数据。

一旦我不知道你想要哪个 API，我将使用一个名为 decodeBase64 的伪函数，我们将理解它与 Base64 编码相反（该函数在 Web 中有很多实现）。

您的代码应如下所示：

// base64 already encoded data
var imageBase64 = "image base64 data";

//this is the point you should use
decodedImage = decodeBase64(imageBase64)

//now, use the decodedData instead of the base64 one
var blob = new Blob([decodedImage], {type: 'image/png'});

///now it should work properly
var file = new File([blob], 'imageFileName.png');

无论如何，一旦你还没有使用 AngularJS，我看不出有必要在那里使用。

【讨论】：

我以类似的方式进行操作，但图像损坏，无法读取和打开

【解决方案3】：

在 Angular 8 中需要这个，所以我将答案修改为 typescript 并直接修改为文件，因为你有来自数据字符串的 mimetype，你不妨使用它来创建文件。

dataURItoBlob(dataURI : any, fileName : string) : File{

    // convert base64/URLEncoded data component to a file
    var byteString;
   if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
   else
       byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
       ia[i] = byteString.charCodeAt(i);
    }

    return new File([ia],fileName, {type:mimeString});
}

所有学分都交给@byteC0de，答案是https://stackoverflow.com/a/35401651/1805974

我在这里发布答案的唯一原因是谷歌不断将我发送到此页面。

【讨论】：