Imagine that i have a client that only can read base64 images and i want to show that images like a realtime movie (as less latency as possible).
This images are created on server side using nodejs canvas lib. For each image that i send to the client i see the difference between them with imagediff nodejs lib and i only send the difference match image.
In the client side i show it putting the last image exactly over the previous ones (layers).
The problem is that in server side i have the following values that slow down the process:
16ms: after draw canvas:
42ms: imagediff (imagediff nodejs lib)
[100 to 250ms] - toDataUrl (canvas to png base64 - canvas nodejs lib toBuffer().toString('base64'))
The big issue is in 3.
Do you have a different solution for this?
Thanks for your time.
Eduardo
Related
I want to manipulate an image with pure NodeJS
I can't find a way how to get the pixel data of an image. I can get the buffer and base64 of the image. I found many libraries that provide this functionality, but I can't reproduce it myself. I thought this was easy to do because in JavaScript we have a Canvas which gives any information about an image and is easy to manipulate
Here is my code:
var fs = require('fs');
fs.readFile('cat.png', (e,image) => {
console.log(image.toString('base64'));
})
May be here is another way how to read the image?
If this is not possible with pure Node JS, could you please explain to me:
Why?
How do other libraries work with images?
I am using Croppie to crop an image and it is giving me base64 which creates 413 error while sending it on server for large images, so I need proper image file. I tried to find converting it(base64) as a image file locally at client side but didn't get expected way for conversion using javascript/jquery.
Please guide me.
I am using this package
to upload the image into server ,i want to check the file size before upload but express-fileupload doesn't give any information about it
console.log(req.files.image); it returns only the name,data ,and image type
Assuming the name of your file in your HTML file is image, req.files.image.data.length will give you the buffer length in bytes. See this Node.js. API Documentation for more details. You can then do the math to convert the number of bytes into any thing you want.
This will allow you to get the actual number of bytes independent of filetype and doesn't require using the mv function. So you can use this on any file type not just images.
Hopefully this helps!
I think only way to get image info using express-fileupload is using mv function to move image on server then using image-size to get width and height
So basically my front end is displaying images that are about 3-5mb. I need to find a way to make their size way smaller.
Basically I have the file object on node.js uploading to amazon aws. I just need to compress it before it uploads.
Also whats the best way to resize images on node.js?
The best way is use Canvas Node js module. This module is up to 3 times faster than ImageMagic.
Images manipulation comparation - https://github.com/ivanoff/images-manipulation-performance
author's results:
canvas.js : 4.001 img/sec;
gm-imagemagic.js : 1.206 img/sec;
gm.js : 1.536 img/sec;
lwip.js : 0.406 img/sec;
I have a question regarding generating an SVG instead of an PNG serverside using PhantomJS. I have PhantomJS running as a server and am POSTing JSON to it (http://www.highcharts.com/docs/export-module/render-charts-serverside). I would like to receive an SVG represented as a BASE64 result stream. I am running in some problems however.
I tried both the following requests, but the base64 result would always represent a png file:
{"infile":".......", "type":"image/svg+xml"}
And:
{"infile":".......", "type":"svg"}
I do however get a valid svg file when I use the outfile parameter:
{"infile":".......", "type":"svg", "outfile":"anActualSVG.svg"}
This writes a file to disk, which is not what I am looking for.
Does anyone have some suggestions?
Thanks!