Jcrop與調整大小預覽

我正在使用Jcrop與預覽窗格中看到在這裏教程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' 
      }); 
     }

有沒有人做過這件事，並預覽窗格的寬度和高度隨裁剪工具的寬度和高度而變化？

來源

2011-09-15 Barbs

這是我在我所做的：

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。這是以這種方式設置的，因爲我在一個頁面中有多個jCrop實例。根據您的設置進行編輯。

來源

2011-09-15 02:54:25

謝謝！你剛剛幫助我很多。 –

謝謝萬噸萬！你使用回調的方法絕對精彩！ – Setmax

Jcrop與調整大小預覽

回答

相關問題