0

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

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

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

4

2 回答 2

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。

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

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

于 2012-11-20T14:47:28.850 回答
0
  1. Fancybox - 我的最爱（支持很多东西，而不仅仅是图像）
  2. http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/这是一个精心编译的替代列表
于 2012-11-20T13:53:20.300 回答