I am using Express to serve resized images. Which Node.js package should be used to resize the image? I've seen a lot of packages that change the image and save it as a file, but I need to change the image and write data to response. Example:
package.compress('/path/to/image.png',
{width: 100px, height: 100px},
function(result) {
res.end(result);
});
I chosen thumb-express (https://www.npmjs.com/package/thumb-express). This is what I need.
Related
I have a Cloud Function that resizes an image uploaded to Cloud Storage using Sharp. Everything works, but I'm trying to find a way for Sharp to include metadata of the exact height and width of the new image. I could make a new function that uses other npm packages to download the image from the url and get what I want, but I'm curious to know if there is a way for Sharp to do that as well?
just include "withMetadata()"
sharp('input.jpg')
.withMetadata()
.toFile('output-with-metadata.jpg')
.then(info => { ... });
you can find the documentation here
https://sharp.pixelplumbing.com/api-output#withmetadata
My Client has requirement that user will upload image using that image i have to read data and crop some part of image. I am able to get read data from image using tesseract.js node module. Cropping part is also done it only work form some image not working for all images. below code to get data form images.
const Tesseract = require("tesseract.js");
Tesseract.recognize("./pancard.jpg", "eng", {
logger: m => console.log(m)
}).then(({ data: { text } }) => {
console.log(text);
});
For cropping image i am using sharp node module. below code basically resize image after resizing image its crop particular data.
const sharp = require("sharp");
sharp("./pancard.jpg")
.resize(500, 300, {
fit: sharp.fit.fill
})
.toFile("./pancard_new.jpg", (err, info) => {
sharp("./pancard_new.jpg")
.extract({ left: 35, top: 220, width: 180, height: 28 })
.toFile("./pancard_new2.jpg", function(err) {});
});
Above code working fine for below image i am able to get signature of that particular images.
but same code not working for below image.
Basically i want to crop signature from that images. If someone have idea how to start from where to start to do above task please help me out.
Note*: Images are from google.
It all comes down to the image, with sharp, you can provide a viewbox to crop the image, but if the image provided is rotated, your code won't work for the first image as well. I think you need some kind of ml driven library for your use case like opencv, or set the viewbox big enough to capture the signature.
If the signature panel on the Indian government ID is always in the same place, would it not be easier to just always crop the same viewbox? Rather than trying to detect the viewbox. That would be my MVP, if it needs to be dynamic later then it needs to be some computer vision library that is able to differentiate the signature from the rest of the ID.
How can i generate an image of a string that has:
a size in px
embossed effect of the letters in the image
a font
a color
and other less important stuff that i think i can figure out once i achieve whats above like:
rotation of text
drop shadow
basically the user will send a request on how he wants his image to be.
but when i receive the request how should i make use of nodejs to render a png or a base64 url to send it back to the user. is there any libraries or way to achieve this.
i did some previous research and it doesn't seem like there is a frameworks that helps render text with a font and text style like emboss
You can try node canvas implementation: https://github.com/Automattic/node-canvas
Basically you can "draw" anything you want like if you'd be using browser js canvas, but some things may be different
Update - This will cover updating attributes of an image, not pulling text from image and updating that - you may need an image analysis library for that
Use the sharp library to manipulate the image as desired. https://github.com/lovell/sharp
http://sharp.dimens.io/en/stable/
A simple example that resizes (docs will show how to make the changes you want outside of this):
const request = require('request').defaults({ encoding: null });
request.get(imgUrl, params, function (err, res, body) {
sharp(body)
.resize(params.width, params.height)
.toFormat('jpeg')
.toBuffer()
.then((outputBuffer) => {
// outputBuffer contains JPEG image data no wider than params.width and no higher
// than params.height while maintaining quality of image.
let output = "data:" + res.headers["content-type"] + ";base64," + new Buffer(outputBuffer).toString('base64');
return output;
});
The output here will be the base64 image
I'm trying to request an image from an API and "paste" it on top of another image. In Photoshop, I would paste the image into a new layer and then merge the layers. I can accomplish this with Graphicsmagick using gm's composite().
gm().command("composite")
.in("path/to/topImg.png")
.in("path/to/bottomImg.png")
.toBuffer('PNG', function(err, buffer) {
if (!err) {return buffer;}
});
However, composite only takes file paths. So let's say I want to get the logo from http://www.google.com. I could save the image, use it in the code above, and then delete it. What I'm looking for is a way to accomplish this without having to save the image to disk first.
You can use URL directly as image path, without downloading and saving it
gm()
.command("composite")
.in("http://someurl...")
.in("http://someurl...")
.toBuffer('PNG', function(err, buffer) {
if (!err) {return buffer;}
});
But GraphicsMagick uses the HTTP support from libxml2, which does not currently support HTTPS. So if you want to download images over HTTPS you will need external program.
Has anyone made a sails app with skipper-s3 and image manipulation library to upload different sizes of images ?
For example if a user upload a user profile image then there will be three different sizes of images will be uploaded to the S3 server. Any help would be much appreciated.
Cheers.
You can use ImageMagick-Native to do the resizing before uploadng to S3, like this:
var resBuff = imagemagick.convert({
srcData: originalBuffer,
width: X, //dimensions in pixel
height: Y,
resizeStyle: "aspectfill",
quality: 80,
format: 'JPEG'
});
The resBuff object can now be uploaded to s3 as the resized image.