NodeJS:将base64编码的图像保存到磁盘
mah*_*off 143 base64 image binaryfiles node.js
My Express应用程序从浏览器接收base64编码的PNG(使用toDataURL()从canvas生成)并将其写入文件.但该文件不是有效的图像文件,"文件"实用程序只是将其标识为"数据".
var body = req.rawBody,
base64Data = body.replace(/^data:image\/png;base64,/,""),
binaryData = new Buffer(base64Data, 'base64').toString('binary');
require("fs").writeFile("out.png", binaryData, "binary", function(err) {
console.log(err); // writes out file without error, but it's not a valid image
});
log*_*yth 295
我认为您转换的数据比您需要的多一点.使用正确的编码创建缓冲区后,只需将缓冲区写入文件即可.
var base64Data = req.rawBody.replace(/^data:image\/png;base64,/, "");
require("fs").writeFile("out.png", base64Data, 'base64', function(err) {
console.log(err);
});
new Buffer(...,'base64')通过将输入解释为base64编码的字符串,将输入字符串转换为Buffer,它只是一个字节数组.然后你可以把那个字节数组写到文件中.
更新
正如评论中所提到的,req.rawBody不再是一件事.如果您正在使用express/ connect那么您应该使用bodyParser()中间件并使用req.body,如果您使用标准节点执行此操作,则需要聚合传入的data事件Buffer对象并在end回调中执行此图像数据解析.
- var base64Data = req.rawBody.split(',')[1]; (8认同)
- 此外,您的示例中的writeFile参数有一个小错字:"bufferData" - >"dataBuffer". (2认同)
- 这是很棒的东西,谢谢!对于那些在将来发现这一点的人来说,rawBody不再是req的属性.您必须使用express body解析器中间件来获取数据. (2认同)
Pla*_*der 20
这是我的完整解决方案,它将读取任何base64图像格式并将其以适当的格式保存在数据库中:
// Save base64 image to disk
try
{
// Decoding base-64 image
// Source: http://stackoverflow.com/questions/20267939/nodejs-write-base64-image-file
function decodeBase64Image(dataString)
{
var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
var response = {};
if (matches.length !== 3)
{
return new Error('Invalid input string');
}
response.type = matches[1];
response.data = new Buffer(matches[2], 'base64');
return response;
}
// Regular expression for image type:
// This regular image extracts the "jpeg" from "image/jpeg"
var imageTypeRegularExpression = /\/(.*?)$/;
// Generate random string
var crypto = require('crypto');
var seed = crypto.randomBytes(20);
var uniqueSHA1String = crypto
.createHash('sha1')
.update(seed)
.digest('hex');
var base64Data = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAZABkAAD/4Q3zaHR0cDovL25zLmFkb2JlLmN...';
var imageBuffer = decodeBase64Image(base64Data);
var userUploadedFeedMessagesLocation = '../img/upload/feed/';
var uniqueRandomImageName = 'image-' + uniqueSHA1String;
// This variable is actually an array which has 5 values,
// The [1] value is the real image extension
var imageTypeDetected = imageBuffer
.type
.match(imageTypeRegularExpression);
var userUploadedImagePath = userUploadedFeedMessagesLocation +
uniqueRandomImageName +
'.' +
imageTypeDetected[1];
// Save decoded binary image to disk
try
{
require('fs').writeFile(userUploadedImagePath, imageBuffer.data,
function()
{
console.log('DEBUG - feed:message: Saved to disk image attached by user:', userUploadedImagePath);
});
}
catch(error)
{
console.log('ERROR:', error);
}
}
catch(error)
{
console.log('ERROR:', error);
}
Alf*_*red 16
UPDATE
我发现这个有趣的链接如何在PHP中解决您的问题.我想你忘记更换space的+,如图中的链接.
我把这个圈子从http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png作为样本,看起来像:
接下来我通过http://www.greywyvern.com/code/php/binary2base64将它发回给我:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC
保存了base64我在我的代码中读取的字符串.
var fs = require('fs'),
data = fs.readFileSync('base64', 'utf8'),
base64Data,
binaryData;
base64Data = data.replace(/^data:image\/png;base64,/, "");
base64Data += base64Data.replace('+', ' ');
binaryData = new Buffer(base64Data, 'base64').toString('binary');
fs.writeFile("out.png", binaryData, "binary", function (err) {
console.log(err); // writes out file without error, but it's not a valid image
});
我得到了一个圆圈,但有趣的是文件大小已经改变:)...
结束
当您回读图像时,我认为您需要设置标题
以PHP页面为例的imagepng:
<?php
$im = imagecreatefrompng("test.png");
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);
?>
我认为第二行header('Content-Type: image/png');很重要,否则你的图像将不会在浏览器中显示,但只有一堆二进制数据显示在浏览器中.
在Express中,您只需使用下面的内容即可.我将展示您的gravatar,它位于http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG,
并且是您的jpeg文件curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG.我只请求标题,因为其他curl会显示一堆二进制内容(谷歌Chrome立即下载)到控制台:
curl --head "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 03 Aug 2011 12:11:25 GMT
Content-Type: image/jpeg
Connection: keep-alive
Last-Modified: Mon, 04 Oct 2010 11:54:22 GMT
Content-Disposition: inline; filename="cabf735ce7b8b4471ef46ea54f71832d.jpeg"
Access-Control-Allow-Origin: *
Content-Length: 1258
X-Varnish: 2356636561 2352219240
Via: 1.1 varnish
Expires: Wed, 03 Aug 2011 12:16:25 GMT
Cache-Control: max-age=300
Source-Age: 1482
$ mkdir -p ~/tmp/6922728
$ cd ~/tmp/6922728/
$ touch app.js
app.js
var app = require('express').createServer();
app.get('/', function (req, res) {
res.contentType('image/jpeg');
res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG');
});
app.get('/binary', function (req, res) {
res.sendfile('cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG');
});
app.listen(3000);
$ wget "http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG"
$ node app.js
dov*_*ovk 10
这对我来说简单而完美。
从图像到 base64 字符串
let buff = fs.readFileSync('stack-abuse-logo.png');
let base64data = buff.toString('base64');
从 base64 字符串到图像
let buff = new Buffer(data, 'base64');
fs.writeFileSync('stack-abuse-logo-out.png', buff);
- 我建议将 `let buff = new Buffer(data, 'base64');` 更改为 `let buff = Buffer.from(data, 'base64');` 因为由于安全和可用性问题，`Buffer()` 已被弃用。 (5认同)
我还必须保存作为数据URL一部分的Base64编码图像，因此我最终制作了一个小的npm模块来执行此操作，以防万一我（或其他人）将来需要再次执行此操作。叫做ba64。
简而言之，它使用带有Base64编码图像的数据URL，并将图像保存到文件系统中。它可以同步或异步保存。它还具有两个帮助程序功能，一个用于获取图像的文件扩展名，另一个用于将Base64编码与data:方案前缀分开。
这是一个例子：
var ba64 = require("ba64"),
data_url = "data:image/jpeg;base64,[Base64 encoded image goes here]";
// Save the image synchronously.
ba64.writeImageSync("myimage", data_url); // Saves myimage.jpeg.
// Or save the image asynchronously.
ba64.writeImage("myimage", data_url, function(err){
if (err) throw err;
console.log("Image saved successfully");
// do stuff
});
安装它：npm i ba64 -S。回购在GitHub上：https : //github.com/HarryStevens/ba64。
PS后来，我想到ba64可能对模块不是一个好名字，因为人们可能会认为ba64可以进行Base64编码和解码，而实际上并没有（很多模块已经这样做了）。那好吧。
下面的函数保存文件，只需传递你的base64文件，它返回文件名将其保存在数据库中。
import fs from 'fs';
const uuid = require('uuid/v1');
/*Download the base64 image in the server and returns the filename and path of image.*/
function saveImage(baseImage) {
/*path of the folder where your project is saved. (In my case i got it from config file, root path of project).*/
const uploadPath = "/home/documents/project";
//path of folder where you want to save the image.
const localPath = `${uploadPath}/uploads/images/`;
//Find extension of file
const ext = baseImage.substring(baseImage.indexOf("/")+1, baseImage.indexOf(";base64"));
const fileType = baseImage.substring("data:".length,baseImage.indexOf("/"));
//Forming regex to extract base64 data of file.
const regex = new RegExp(`^data:${fileType}\/${ext};base64,`, 'gi');
//Extract base64 data.
const base64Data = baseImage.replace(regex, "");
const filename = `${uuid()}.${ext}`;
//Check that if directory is present or not.
if(!fs.existsSync(`${uploadPath}/uploads/`)) {
fs.mkdirSync(`${uploadPath}/uploads/`);
}
if (!fs.existsSync(localPath)) {
fs.mkdirSync(localPath);
}
fs.writeFileSync(localPath+filename, base64Data, 'base64');
return filename;
}
| 归档时间： |
|
| 查看次数： |
159756 次 |
| 最近记录： |