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

Posted 2023-03-25

【中文标题】Cloudinary：如何在按钮单击时显示最高分辨率的图像？

【英文标题】：Cloudinary: How to show highest resolution of image on button click?

【发布时间】：2022-01-11 14:15:52

【问题描述】：

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

我最近看到了 Cloudinary 写的一篇关于如何创建用于放大和缩小照片的 javascript 函数的文章。但是，该文章实际上并未提供使用 Cloudinary 服务的示例。

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

是否有人对如何使用 Cloudinary 存储的图像进行这项工作有建议/提示？我想确保在放大时提供原始图像的最高质量/分辨率版本。

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

【参考方案1】：

最佳做法是以最佳质量/分辨率将图像上传到 Cloudinary。假设图像在您的网站上显示时会按比例缩小，一旦单击缩放按钮，您就可以使用 Cloudinary 转换来请求更大尺寸的图像，甚至可能是它们的原始尺寸。

例如，在以下示例中，图像最初被缩小到 400 像素的宽度 (c_scale,w_400)。单击“放大”按钮后，我将更改转换 URL，以裁剪原始图像的 400 像素宽度（隐式设置高度以保留图像纵横比）-c_crop,w_400。这样放大后的图像就具有原始分辨率/质量：

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"  >

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

【讨论】：

谢谢，我会研究这个并回复你。

好的，马上，我意识到我不能上传任何大于 10mb 的免费计划。我的档案图像是 50mb，哈哈。我必须将它们压缩到大约 10mb 才能免费使用？

新问题，因为我在放大时遇到问题：***.com/questions/70304726/…