기본 64 인코딩 이미지를 디스크에 저장하려면 어떻게 해야 합니까?
My Express 앱은 브라우저에서 (DataURL()로 캔버스에서 생성된) Base64 인코딩 PNG를 수신하여 파일에 쓰는 중입니다.그러나 파일은 유효한 이미지 파일이 아니며 "파일" 유틸리티는 단순히 "데이터"로 식별합니다.
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
});
당신이 필요 이상으로 데이터를 변환하고 있다고 생각합니다.적절한 인코딩으로 버퍼를 작성한 후에는 파일에 버퍼를 쓰기만 하면 됩니다.
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로 변환합니다.그런 다음 해당 바이트 배열을 파일에 쓰기만 하면 됩니다.
갱신하다
댓에나것처럼온글▁as럼.req.rawBody더 이상 존재하지 않습니다.사중인경우를 .express/connect그러면 당신은 그것을 사용해야 합니다.bodyParser() 및 req.body하여 이 ▁the▁and▁incoming▁▁to다▁using▁need합니▁node▁you▁if▁this▁standard▁you▁then그집야▁doing▁are계해리데이를터를 집계해야 합니다.data 벤트이Buffer은 개체및 이데분수행에서 합니다.end콜백
이것은 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);
}
이것은 저에게 간단하고 완벽하게 해주었습니다.
이미지에서 base64 문자열로
let buff = fs.readFileSync('stack-abuse-logo.png');
let base64data = buff.toString('base64');
base64 문자열에서 이미지로
let buff = Buffer.from(data, 'base64');
fs.writeFileSync('stack-abuse-logo-out.png', buff);
갱신하다
저는 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);
?>
줄 두 번 줄 은 째 ▁the ▁think 줄 ▁i 은header('Content-Type: image/png');그렇지 않으면 이미지가 브라우저에 표시되지 않고 이진 데이터 묶음만 브라우저에 표시됩니다.
익스프레스에서는 아래와 같은 것을 사용하면 됩니다.나는 당신이 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이 콘솔에 여러 이진 항목(Google 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
저는 또한 데이터 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 -SRepo는 GitHub: https://github.com/HarryStevens/ba64 에 있습니다.
추신. 사람들이 Base64 인코딩과 디코딩을 한다고 생각할 수도 있기 때문에 ba64는 아마도 모듈에 나쁜 이름일 것이라는 생각이 들었습니다. 하지만 그렇지 않습니다(이미 그렇게 하는 모듈이 많이 있습니다).아, 그럼.
파일을 저장하는 기능 아래에서, 당신의 base64 파일을 전달하기만 하면, 그것은 파일 이름을 DB에 저장합니다.
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;
}
base64-img 또는 base64-to-image와 같은 타사 라이브러리를 사용할 수 있습니다.
- base64-img
const base64Img = require('base64-img');
const data = 'data:image/png;base64,...';
const destpath = 'dir/to/save/image';
const filename = 'some-filename';
base64Img.img(data, destpath, filename, (err, filepath) => {}); // Asynchronous using
const filepath = base64Img.imgSync(data, destpath, filename); // Synchronous using
- base64 - 이미지
const base64ToImage = require('base64-to-image');
const base64Str = 'data:image/png;base64,...';
const path = 'dir/to/save/image/'; // Add trailing slash
const optionalObj = { fileName: 'some-filename', type: 'png' };
const { imageType, fileName } = base64ToImage(base64Str, path, optionalObj); // Only synchronous using
base64 문자열이 있는 파일에서 png 이미지로 변환하는 중입니다.
작동하는 4가지 변형 모델.
var {promisify} = require('util');
var fs = require("fs");
var readFile = promisify(fs.readFile)
var writeFile = promisify(fs.writeFile)
async function run () {
// variant 1
var d = await readFile('./1.txt', 'utf8')
await writeFile("./1.png", d, 'base64')
// variant 2
var d = await readFile('./2.txt', 'utf8')
var dd = new Buffer(d, 'base64')
await writeFile("./2.png", dd)
// variant 3
var d = await readFile('./3.txt')
await writeFile("./3.png", d.toString('utf8'), 'base64')
// variant 4
var d = await readFile('./4.txt')
var dd = new Buffer(d.toString('utf8'), 'base64')
await writeFile("./4.png", dd)
}
run();
base64 이미지를 파일로 변환하고 임의의 ID 또는 이름으로 저장하는 쉬운 방법.
// to create some random id or name for your image name
const imgname = new Date().getTime().toString();
// to declare some path to store your converted image
const path = yourpath.png
// image takes from body which you uploaded
const imgdata = req.body.image;
// to convert base64 format into random filename
const base64Data = imgdata.replace(/^data:([A-Za-z-+/]+);base64,/, '');
fs.writeFile(path, base64Data, 'base64', (err) => {
console.log(err);
});
// assigning converted image into your database
req.body.coverImage = imgname
매우 간단합니다.
const path = require('path');
const { readFile, stat, writeFile } = require("fs/promises");
(async () => {
try {
const contents = await readFile(path.join(__dirname, 'clau.jpg'), { encoding: 'base64' });
console.log(contents);
await writeFile(path.join(__dirname, 'claumia.jpg'), Buffer.from(contents, 'base64'));
} catch (error) {
console.log(error)
}
})()
언급URL : https://stackoverflow.com/questions/6926016/how-can-i-save-a-base64-encoded-image-to-disk
'programing' 카테고리의 다른 글
| gitbash 명령줄 완료를 구성하는 방법은 무엇입니까? (0) | 2023.05.16 |
|---|---|
| 종합적으로 단일 결과를 얻는 것이 가능합니까? (0) | 2023.05.16 |
| mongoose에서 가중치를 사용한 전체 텍스트 검색 (0) | 2023.05.16 |
| 장고에서 추상 사용자와 추상 기본 사용자의 차이점은 무엇입니까? (0) | 2023.05.16 |
| 어떻게 하면 Git가 심볼 링크를 따르도록 할 수 있습니까? (0) | 2023.05.11 |