jcrop演示在調整主圖像大小後不再起作用（更新爲圖片）

Question

我正在嘗試replicate this jcrop demo。一切正常，除了罰款，我原來的照片我的網頁上都非常大，因此，as per the manual, i am resizing them這樣的：

jQuery('#cropbox').Jcrop({ 
      onChange: showPreview, 
      onSelect: showPreview, 
      bgColor: 'white', 
      aspectRatio: 1, 
      boxWidth: 300, 
      boxHeight: 500 
     }); 

現在的問題是第二個預覽窗口（ID =「預覽」）不再顯示的是在裁剪部分在裁剪框中。這裏有一個例子：

清楚，預覽窗口不匹配，我在第一張照片我種植面積。

任何想法如何讓預覽圖像正確顯示，當你調整主圖像的前面？

Answer 1

嘗試this JSFiddle

HTML：

<img id="cropbox" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" /> 

<br /> 

<br /> 
<div id="previewcrop"> 
<img id="preview" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" /> 
</div> 

CSS：

#previewcrop{ 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    margin-left: 5px; 
} 

JS：

var imgwidth = 849; // width of the image 
var imgheight = 423; // height of the image 

jQuery('#cropbox').Jcrop({ 
      onChange: showPreview, 
      onSelect: showPreview, 
      bgColor: 'white', 
      aspectRatio: 1, 
      boxWidth: imgwidth/3, 
      boxHeight: imgheight/3 
     }); 

function showPreview(coords) 
{ 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 

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

Answer 2

function showPreview(coords) 
{ 
    if (parseInt(coords.w) > 0) 
    { 
     var rx = 100/coords.w; 
     var ry = 100/coords.h; 

     jQuery('#preview').css({ 
      width: Math.round(rx * 800) + 'px', 
      height: Math.round(ry * 600) + 'px', 
      marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
      marginTop: '-' + Math.round(ry * coords.y) + 'px' 
     }); 
    } 
} 

對於（rx * 800），800應該是真實圖像的寬度。對於（ry * 600），600應該是實際圖像的寬度。我已經針對800x600的圖像測試了它，並且它可以工作（使用Tutorial3.html並修改它）。另外，不要使用縮放圖像的寬度和高度，它不會工作。