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;
Related
We are on a project with node js and flutter. We use an S3 bucket for storing images. We need to optimize images to a minimum, for easy loading. We use compression from the backend which results in random image sizes for different images. When those images are resized on photoshop with a preferred size of 500 * 500 px,(also used 200 * 200px, 300 * 300px) it results in the same multiple-sized images. What can we do to minimize image size and optimize the image loading performance?
There are many ways to approach this problem.
Try this way.
Create two folders in your S3 bucket: original & resized.
Create a lambda function and add this lambda function to the S3 trigger, so that whenever any image will be uploaded to S3, this trigger will be executed and the lambda function will run.
Upload images from your client-side to an original folder of S3 Bucket.
Once the image is uploaded lambda will run to do the processing on the image (Re-size/optimize ) and will save this processed(re-sized) image to the re-sized folder of the bucket.
Keep polling the resized folder from the client-side to get resized image. (Remember we upload the original image to the “original” folder & get the resized image from the “resized” folder)
Source : https://medium.com/#pushpendrachauhan/re-sizing-optimizing-images-on-the-go-using-amazon-lambda-amazon-s3-bucket-node-js-4fc933e6ddae
https://aws.amazon.com/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/
I tried to combine two images into a single image using sharp package in NodeJS but i cant is there any ways to done this with sharp package
Use another module instead of sharp to append images to one another
https://www.npmjs.com/package/join-images
You can put an image in front to other with the next code:
sharp(pathToBaseImage)
.composite([{ input: bufferFrontImage }])
.sharpen()
.toBuffer()
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
I want to create thumbnail from a video at a certain time in node js, now I am using node module "video-thumb"
This is the code that uses node-thumb module to create thumbnail
And this is the result however the result is shown but don't know where the snapshot.png
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