プレビューのサイズを変更するJcrop

Question

チュートリアルのhttp://net.tutsplus.com/articles/news/working-with-the-jcrop-plugin/に示すように、プレビューペインでJcropを使用しています。これは、プレビューウィンドウを使って簡単なJcropインターフェイスを作成して、結果を表示する方法を示しています。残念ながら、この場合のプレビューペインは固定サイズであり、トリミングするとイメージが拡大/縮小され、同じ固定サイズのトリミングされたイメージが生成されます。

私がしたいのは、作物ツールと一緒にプレビューペインのサイズを変更して、結果のイメージをユーザーの作物として表示し、ユーザーが結果イメージのサイズを決定できるようにすることです。その後、画像をアップロードするときに最大サイズまたは最小サイズを適用できます。

プレビューウィンドウのCSSとコードは次のとおりです。 targ_hとtarg_wの変数は、私が選択したものに定義されていることに注意してください。 orig_wとorig_hは元のイメージから読み込まれます。

#preview 
    { 
     width: <?php echo $targ_w?>px; 
     height: <?php echo $targ_h?>px; 
     overflow:hidden; 
    } 



function updateCoords(c) 
     { 
      showPreview(c); 
      $("#x").val(c.x); 
      $("#y").val(c.y); 
      $("#w").val(c.w); 
      $("#h").val(c.h); 
     } 

     function showPreview(coords) 
     { 
      var rx = <?php echo $targ_w;?>/coords.w; 
      var ry = <?php echo $targ_h;?>/coords.h; 

      $("#preview img").css({ 
       width: Math.round(rx*<?php echo $orig_w;?>)+'px', 
       height: Math.round(ry*<?php echo $orig_h;?>)+'px', 
       marginLeft:'-'+ Math.round(rx*coords.x)+'px', 
       marginTop: '-'+ Math.round(ry*coords.y)+'px' 
      }); 
     } 

プレビューペインの幅と高さが切り抜きツールの幅と高さで変更されている人はいますか？

Answer 1

これは私が私の中で何をしたかである：

function showPreview(photoDiv, coords, maxX, maxY) 
{ 
    var rx = maxX/coords.w; 
    var ry = maxY/coords.h; 

    rx = (rx == 0) ? 1 : rx; 
    ry = (ry == 0) ? 1 : ry; 

    photoX = $("#" + photoDiv + " #photo").width(); 
    photoY = $("#" + photoDiv + " #photo").height(); 

    $("#" + photoDiv + " #preview").css({ 
     width: Math.round(rx * photoX) + 'px', 
     height: Math.round(ry * photoY) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
} 

私はmaxXがあなたの$targ_wを参照しますね。これは、1つのページに複数のjCropインスタンスがあるため、このように設定されています。設定に応じて編集します。