0

Lightview 3 を使用して iframe 内に画像を表示しています。これには、ユーザーが画像をズームインおよびズームアウトし、フォームを送信して、フォームが送信されたときに表示されている画像に基づいてサムネイルを生成できるフォームがあります。

私が抱えている問題は、大量の画像 (幅 1100px+) などを使用する必要があることです。これをライトビューで開くと、iframe 内にスクロール バーがあるため見栄えがよくありません。

フルサイズの画像のサムネイルを正しく作成するときに、画像を半分のサイズで表示し、何らかの形式のスケーリングを使用する最良の方法は何ですか。誰かがこれを行うためのいくつかの方法を提案できますか?

4

2 に答える 2

1

私はこの種のことを何度もしました。私の環境は、Visual Basic と、 FancyBox、JCrop、およびUploadifyで目的の結果を達成するために使用したテクノロジを使用する ASP.NETです。

最初に、FancyBox (FancyBox2 はまだ使用していません) をセットアップして、プレビュー領域 (私の場合は 344x270) と、uploadify を使用して画像をアップロードする場所を持つ iframe でモーダル ポップアップ ウィンドウを開きます。

画像がアップロードされ、検証され、サムネイルが作成されたら、この画像に関する情報を保持するオブジェクトを作成します。これには、ファイル名、拡張子、元の幅と高さ、および 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 に答える