Cloudinary:如何在单击按钮时显示最高分辨率的图像?
Cloudinary: How to show highest resolution of image on button click?
我正在尝试构建一个网页,用户可以在其中放大照片并更详细地查看图像。我的想法是我将有一个“放大”按钮,单击该按钮时将显示图像的更高分辨率版本。用例: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
最好的做法是将图片上传到 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 转换。
我正在尝试构建一个网页,用户可以在其中放大照片并更详细地查看图像。我的想法是我将有一个“放大”按钮,单击该按钮时将显示图像的更高分辨率版本。用例: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
最好的做法是将图片上传到 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 转换。