在节点服务器上,我想将上传的 datauri 数据保存为图像。为此,我尝试解码此 png-
的内容data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=
并将其另存为
.png
扩展。看来还有更多的事情。如何解码 datauri 并将其保存为文件?
我创建了一个与 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);
我试图使用
atob
解码数据并将其保存为 png 文件。相反,我将其保存为 Base64 编码,但在写入缓冲区中指定编码。
fs.writeFileSync('tmp/myfile.png', new Buffer(data, 'base64'));
您可以使用以下代码将数据 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 数据附加到 from data 并将其作为文件上传:
var blob = dataURItoBlob(dataURI);
var fd = new FormData(document.forms[0]);
fd.append("image", blob);
您可以使用 Node 的本机 fs 模块来完成此操作,但您需要从 URI 字符串中分离出数据,如下所示:
import fs from 'fs';
fs.writeFileSync('./filename.png', Buffer.from(dataURI.split(',')[1], 'base64'));