Cloudinary：如何在单击按钮时显示最高分辨率的图像？

Question

我正在尝试构建一个网页，用户可以在其中放大照片并更详细地查看图像。我的想法是我将有一个“放大”按钮，单击该按钮时将显示图像的更高分辨率版本。用例：historical/archival 图片库

我最近看到 Cloudinary 写的这篇文章，内容是关于如何创建 JavaScript 放大和缩小照片的功能。但是文章并没有实际提供使用Cloudinary服务的例子。

文章：JavaScript 中调整图像大小的酷技巧 (cloudinary.com) https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript

有人 advice/tips 知道如何使用 Cloudinary 存储的图像进行这项工作吗？我想确保在放大时提供原始图像的最高 quality/resolution 版本。

我有一个 codesandbox 演示：https://codesandbox.io/s/cloudinary-zoom-image-542b1?file=/src/App.vue

Answer 1

最好的做法是将图片上传到 Cloudinary 中最好quality/resolution。假设图像在您的网站上显示时会按比例缩小，单击缩放按钮后，您可以使用 Cloudinary 转换来请求更大尺寸的图像，甚至可能是它们的原始尺寸。

例如，在下面的示例中，图像最初被缩小到 400 像素的宽度 (c_scale,w_400)。单击“放大”按钮后，我将更改转换 URL 以裁剪原始图像宽度为 400px 的大小（隐式设置高度以保留图像纵横比）- c_crop,w_400。这样放大后的图像就是原来的 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">

这只是一个简单的例子。一般来说，您可以通过多种方式实现放大效果，尤其是通过使用 Cloudinary 转换。

Cloudinary：如何在单击按钮时显示最高分辨率的图像？

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

cloudinary