在尺寸大于大多数桌面分辨率的“灯箱”中裁剪图像的可行解决方案

Posted 2023-02-25

【中文标题】在尺寸大于大多数桌面分辨率的“灯箱”中裁剪图像的可行解决方案

【英文标题】：Viable solution for cropping an image in a 'lightbox' that has dimensions larger than most desktop resolutions

【发布时间】：2012-11-20 13:48:15

【问题描述】：

我正在使用 Lightview 3 在 iframe 中显示图像。这有一个表单，允许用户放大和缩小图像并提交表单以在提交表单时根据视图中的图像生成缩略图。

我遇到的问题是我们必须使用大量图像（宽度 1100 像素以上）等。所以在 lightview 中打开它看起来并不好，因为 iframe 中有滚动条。

在正确创建全尺寸图像的缩略图时，让图像以一半大小显示并使用某种形式的缩放的最佳方法是什么？谁能建议一些方法来做到这一点？

【参考方案1】：

这种事情我做过很多次了。我的环境是使用 Visual Basic 的 ASP.NET，以及我用来实现我想要的结果的技术，其中FancyBox、JCrop 和Uploadify。

首先我设置了 FancyBox（还没有使用 FancyBox2）来打开一个带有 iframe 的模式弹出窗口，该窗口的页面有一个预览区域（在我的例子中是 344x270）和一个使用 uploadify 上传图像的地方。

上传、验证和创建缩略图后，我会创建一个对象来保存有关该图像的信息。这包括文件名、扩展名、原始宽度和高度，以及用于缩放图像以适合我的 344x270 预览（裁剪框）区域的新宽度和高度。

为了找到这个新的宽度和高度，我使用以下用 VB.NET 编写的代码：

Dim objImage As System.Drawing.Image = System.Drawing.Image.FromFile(path)
Dim orig_h = objImage.Height
Dim orig_w = objImage.Width
Dim cropbox_width, cropbox_height As Integer
If objImage.Width > objImage.Height Then
    cropbox_width = 344
    cropbox_height = (344 / objImage.Width) * objImage.Height

    If cropbox_height > 270 Then
        Do Until cropbox_height <= 270
             cropbox_width = cropbox_width - 1
             cropbox_height = (cropbox_width / objImage.Width) * objImage.Height
         Loop
     End If
 Else
    cropbox_height = 270
    cropbox_width = (270 / objImage.Height) * objImage.Width

    If cropbox_width > 344 Then
        Do Until cropbox_width <= 344
               cropbox_height = cropbox_height - 1
               cropbox_width = (cropbox_height / objImage.Height) * objImage.Width
         Loop
     End If
  End If

基本上，我试图确定它是纵向还是横向，然后找到纵横比以将其缩小以适合我的预览（裁剪框）区域。

一旦确定，我将它们添加到我的对象中，将其序列化并将其发送回上传页面（FancyBox iframe），设置预览（裁剪框）区域的图像路径，设置返回对象的高度和宽度，存储原来的高宽，然后启动JCrop。

从这里他们可以裁剪我有代码的图像，以根据他们裁剪预览图像的方式裁剪原始图像。我不会详细介绍此代码和技术，因为您没有询问裁剪。

我知道这并不完全符合您的要求，因为听起来不会进行上传或裁剪，但我认为缩小图像的代码可能会为您指明正确的方向。

【参考方案2】：

Fancybox - 我的最爱（支持很多东西，不仅仅是图片） http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/这是一个精心编制的替代列表

【讨论】：

我认为他不是在寻求灯箱替代品。

@zgood，我认为他不想在 VB 或 asp 中这样做。该问题有一个 php 和一个 jQuery 标签。顺便说一句，他谈论的是 LightView 而不是 LightBox。 Fancybox 做了他想要的很多事情（它调整大图像的大小以适合任何屏幕），并且正如我从他的问题中所理解的那样。下次请公平。

我看到了PHP标签，但我不懂PHP，所以我用我知道的语言举了一个例子。一个好的程序员应该仍然能够看到和理解逻辑（if 和循环）并解释为他们选择的语言。此外，灯箱是使用模式弹出窗口显示图像的通用术语。见here。是的，有一些插件叫做Lightbox，但我不是指它们。最后，FancyBox 不会调整图像大小 - 它会调整自身大小以适应图像。

我说的是 FancyBox v.2，如果它不适合屏幕，它会缩放图像（使用 css）。这是示例：fancyapps.com/fancybox/#examples。如果图像太小，请尝试调整窗口大小，直到放不下。