CODEWITHSUNDEEP
cloudinary
redshift
redshift

Reputation: 5217

Cloudinary: How to show highest resolution of image on button click?

I am trying to build a webpage where users can zoom in to a photo and look at the image in greater detail. The idea is that I will have a "zoom in" button, that, when clicked, will show a higher resolution version of the image. Use case: historical/archival image gallery

I recently came upon this article written by Cloudinary on how to create JavaScript functions for zooming in and out of photos. However, the article did not actually provide an example of using the Cloudinary service.

Article: Cool Tricks for Resizing Images in JavaScript (cloudinary.com) https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript

Does anyone have advice/tips on how to make this work with Cloudinary stored images? I want to ensure I'm serving the highest quality/resolution version of the original image when zoomed in.

I have a codesandbox demo: https://codesandbox.io/s/cloudinary-zoom-image-542b1?file=/src/App.vue

Upvotes: 0

Views: 286

Answers (1)

ekt
ekt

Reputation: 101

The best practice is to upload the images to Cloudinary in the best quality/resolution. Assuming that the images would be scaled down when displayed on your site, once the zoom button is clicked, you can use Cloudinary transformations to request the images in larger dimensions, and possibly even their original dimensions.

For instance, in the following example, the image is originally scaled down to a width of 400px (c_scale,w_400). Once the "Zoom In" button is clicked, I'm changing the transformation URL in a way that crops a size of 400px width of the original image (height is implicitly set to retain the image aspect ratio) - c_crop,w_400. This way the zoomed-in image is in it's original resolution/quality:

function zoomin() {
  var myImg = document.getElementById("my-image");
  var src = myImg.src;
  var splitted = src.split("c_scale,w_400/");
  splitted[0] += "c_crop,w_400";
  myImg.src = splitted.join("/");
  // results in https://res.cloudinary.com/demo/image/upload/q_auto/c_crop,w_400/sample.jpg
}

function zoomout() {
  var myImg = document.getElementById("my-image");
  myImg.src = "https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg";
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<button type="button" onclick="zoomin()">Zoom In</button>
<button type="button" onclick="zoomout()">Zoom Out</button>
<img src="https://res.cloudinary.com/demo/image/upload/q_auto/c_scale,w_400/sample.jpg" id="my-image" width="400px" alt="Flowers and Bee">

That's just a simple example. There are many ways you could implement a zoom-in effect in general, and by using Cloudinary transformations in particular.

Upvotes: 1

Related Questions