In Expressjs I upload an image. It comes as a Buffer encoding 7bit:
{ fieldname: 'file',
originalname: 'img.JPG',
encoding: '7bit',
mimetype: 'image/jpeg',
buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 64 00 64 00 00 ff db 00 43 00 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 01 0
1 01 01 01 01 01 ... >,
size: 873066 }
How to save it as an image to a file system? Something is saved but it is not an image:
Windows Photo Viewer can't open this picture because the file appears
to be damaged, corrupted of too large.
These do not work:
fs.writeFile('uploaded-img.jpg', req.file, 'ascii', function(err) {
fs.writeFile('uploaded-img.jpg', req.file.toString('ascii'), 'ascii', function(err) {
How about:
fs.writeFile('uploaded-img.jpg', req.file.buffer, 'ascii', function(err) {
Related
When calling the .toBuffer() method on a sharp object, I get the following error:
Input buffer contains unsupported image format
I'm fetching an image from S3, and I am certain its retrieved as a Buffer which is then passed to sharp.
Moreover, when I console.log the base64 of the buffer and check what's behind, I do get the original image and the filetype is jpeg, so I can't seem to figure out why it would say that the Input buffer contains unsupported image format.
const imageBuffer = fileFromS3.Body
console.log(imageBuffer)
console.log(imageBuffer.toString('base64'))
let result = await sharp(imageBuffer)
.toColourspace('b-w')
.sharpen()
.toBuffer()
When I check the sharp object before running toBuffer() I get this data in the object:
let result = await sharp(imageBuffer)
.toColourspace('b-w')
.sharpen()
console.log(result)
Prints:
...
input: {
failOnError: true,
limitInputPixels: 268402689,
sequentialRead: false,
buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff db 00 43 00 03 02 02 02 02 02 03 02 02 02 03 03 03 03 04 06 04 04 04 04 04 08 06 06 05 ... 96981 more bytes>
}
I want to read values in the function mv from a json object :
{ name: 'user_step4#upload',
data:
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 4c 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 06 ... >,
size: 6841698,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'multipart/form-data',
md5: '226d9791b4e0d637cee207a2f832900e',
mv: [Function: mv] }
Data is a Buffer data type.
Try to convert to string data type.
object.data.toString()
yourJsonObject.data.toString() will convert your buffer to String.
yourJsonObject.mv.toString() will help you to print the function code.
So i've tested my route itself with postman and get the following if I console.log(req.file) I get the following:
{ fieldname: 'myImage',
originalname: '7yFHYXe.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e2 0c 58 49 43 43 5f 50 52 4f 46 49 4c 45 00 01 01 00 00 0c 48 4c 69 6e 6f 02 10 00 00 ... >,
size: 4760663 }
Which I believe is correct. Now if I test my axios request I get the MulterError: Unexpected field. Here is my axios code
...
export const addPostPicture = uploadData => dispatch => {
var data = new FormData();
data.append("image", uploadData);
console.log(data.get("image"));
axios
.post("/api/uploads/", data, {
headers: {
"Content-Type": `multipart/form-data`
}
})
...
When I console.log(data.get("image")); I get the following:
Forgive my ignorance this is my first time using multer. So any suggestions or feedback is great! =]
Just like all the others with the same error I was dumb and didn't use the input name field accordingly...
So changing data.append("myImage", uploadData); fixed my problem.
I'm using Angular 2 to retrieve image from backend. My response looks like that
{ AcceptRanges: 'bytes',
LastModified: 'Sat, 09 Dec 2017 17:06:46 GMT',
ContentLength: '462882',
ETag: '"c0ff5b060c2da69deff97065d43e3645"',
ContentType: 'application/octet-stream',
Metadata: {},
Body: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 00 00 64 00 64 00 00 ff ec 00 11 4475 63 6b 79 00 01 00 04 00 00 00 3c 00 00 ff ee 00 0e 41 64 6f 62 65 00 64 ... > }
Is there any chance I can insert that thing directly inside html img tag, or should I start off by converting it to say base64? Thank you in advance.
I would suggest you to use responseType: ResponseContentType.Blob in your GET-Request settings and convert it later to base64 encoded source. Hope this helps
a solution is to use Base64 Image source, that should return encoded base64 from backend. forExample:
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP//ywAAAAAAQABAAACAUwAOw==";
I use node-canvas;
....
var content = canvas.toBuffer();
var length=content.length;
console.log(content);
result:
<SlowBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 30 00 00 00 30 08 06 00 00 00 57 02 f9 87 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 93 ...>
And
var buf=new SlowBuffer(length);
buf.write(content.toString());
console.log(buf);
result:
<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 28 00 28 00 00 ff db 00 43 00 08 06 06 07 06 05 08 07 07 07 09 09 08 0a 0c 14 0d 0c 0b 0b 0c 19 12 13 0f 14 ...>
They are not equal:( ,so when I store it into redis ,I can't get it back;
Depending on the format you want, you can use the following methods:
buf.toJSON() // Straight to JSON format
buf.toString('utf8') ; // UTF8 format
Read on for more alternatives: https://nodejs.org/api/buffer.html#buffer_buf_tostring_encoding_start_end
You can't just call Buffer.toString and assume that everything will be all right, since the default encoding is utf8. If you want to encode binary data, you need base64 encoding.