CODEWITHSUNDEEP
javascriptc#cloudinary
chuckd
chuckd

Reputation: 14550

Can I transform images without uploading them to cloudinary?

Currently I'm using different transforms on an image on my server before I save it to cloudinary

ex. width, height, crop, gravity

using (var stream = file.OpenReadStream())
{
   var uploadParams = new ImageUploadParams()
    {
          File = new FileDescription(file.Name, stream),
          Transformation = new Transformation()
             .Width(500).Height(500).Crop("fill").Gravity("face")
    };
                
    uploadResult = _cloudinary.Upload(uploadParams);
}

but I was wondering if it was possible to do Cloudinary transforms of the image to see what the image will look like without uploading it first? Specifically, .Crop("fill").Gravity("face")

This way I can display it to the user and they can either accept or reject it before saving it to my Cloudinary account and my server.

Thanks for any help

Upvotes: 1

Views: 410

Answers (1)

Fennec
Fennec

Reputation: 1902

For the cropping/resizing part you can do it without a library, all you need is a canvas, this link may help you How to resize then crop an image with canvas

For the Gravity("face") part, that's another level of engineering, you need an AI to detect and locate all the faces withing the picture, you have to use a library and face-api.js is just the best solution for javascript, its only down side is its size "we're talking about megabytes" here is the demo page

If you want something much lighter and faster, but less accurate "compared to face-api.js" there is pico.js, here is the demo page

Either way, Good luck.

Upvotes: 1

Related Questions