将数据 URI 保存为图像？答案

【问题标题】：Saving Data URI as Image?将数据 URI 保存为图像？
【发布时间】：2016-08-03 18:13:20
【问题描述】：

在节点服务器上，我想将上传的 datauri 数据保存为图像。为此，我尝试解码此 png-

的内容

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=

并将其保存为.png 扩展名。看起来还有更多。如何解码 datauri 并将其保存为文件？

【问题讨论】：

标签： node.js image-processing base64 data-uri

【解决方案1】：

我创建了一个与 Node.js 一起使用的库，它有助于对数据 URI 方案进行编码和解码。我相信它可以帮助你，检查：

https://github.com/DiegoZoracKy/image-data-uri

使用这个库，在你的情况下，代码是：

'use strict';

const ImageDataURI = require('image-data-uri');

const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=';
const fileName = 'decoded-image.png';

ImageDataURI.outputFile(dataURI, filePath);

【讨论】：

@hayatbiralem 很棒 ;)

【解决方案2】：

您可以使用以下代码将数据 uri 转换为 blob：

function dataURItoBlob(dataURI) {
    var byteStr;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteStr = atob(dataURI.split(',')[1]);
    else
        byteStr = unescape(dataURI.split(',')[1]);

    var mimeStr = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var arr= new Uint8Array(byteStr.length);
    for (var i = 0; i < byteStr.length; i++) {
        arr[i] = byteStr.charCodeAt(i);
    }

    return new Blob([arr], {type:mimeStr});
}

然后您可以将此 blob 数据附加到数据并将其作为文件上传：

var blob = dataURItoBlob(dataURI);
var fd = new FormData(document.forms[0]);
fd.append("image", blob);

【讨论】：

我觉得在服务器上这样做会更容易。是否会使用相同的方法将其另存为文件？

【解决方案3】：

我试图使用 atob 解码数据并将其保存为 png 文件。我将其保存为 base64 编码，但在写入缓冲区中指定编码。

fs.writeFileSync('tmp/myfile.png', new Buffer(data, 'base64'));

【讨论】：

对于其他图像类型是否有等效的方法？我用 JPG 试过了，但似乎没有用。