jCrop - 更新預覽onload？

Question

我正在使用jCrop預覽演示來做我自己的事情。但是我遇到了一個問題。如果我使用setSelect:加載圖像時創建默認選擇，那麼我將選擇映射到大圖像上，但它不會出現在預覽中。當jCrop加載時，我無法找到調用updatePreview函數的api處理程序。有沒有人知道如何在jCrop加載時調用這個函數？

jQuery(function($){ 

     // Create variables (in this scope) to hold the API and image size 
     var jcrop_api, boundx, boundy; 

     $('#target').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview, 
     setSelect: [ 0, 0, selectWidth, selectHeight ], 
     aspectRatio: 1 
     },function(){ 
     // Use the API to get the real image size 
     var bounds = this.getBounds(); 
     boundx = bounds[0]; 
     boundy = bounds[1]; 
     // Store the API in the jcrop_api variable 
     jcrop_api = this; 
     }); 

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

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

    }); 

Answer 1

我試圖設置默認值，並且預覽框中預覽的默認值。

jQuery(window).load(function(){ 

      jQuery('#cropbox').Jcrop({ 
       onChange: showPreview, 
       onSelect: showPreview, 
       setSelect: [ 100, 0, 100, 100 ], 
       aspectRatio: 1 
      }); 

     }); 

這只是我想要的方式。您的腳本可能還有其他錯誤。但是你不必調用任何特別的東西來顯示預覽。如果你沒有這樣做，那就試試它。

Answer 2

我無法得到這個工作，並發現你自己的問題尋找解決方案。

我在Jcrop v0.9.9中使用預覽演示（tutorial3）。

改變jQuery(function($){到jQuery(window).load(function(){

，並添加選項setSelect: [ 0, 40, 312, 244 ]

而且，它不會更新加載預覽..

我已經找到了解決辦法是使用API​​ animateTo以及setSelect（或者如果您喜歡動畫，可以使用swingSpeed更改其速度）

我所做的改變在你的代碼

jQuery(function($){ 

    // Create variables (in this scope) to hold the API and image size 
    var jcrop_api, boundx, boundy; 

    $('#target').Jcrop({ 
    onChange: updatePreview, 
    onSelect: updatePreview, 
    setSelect: [ 0, 0, selectWidth, selectHeight ], 
    aspectRatio: 1 
    },function(){ 
    // Use the API to get the real image size 
    var bounds = this.getBounds(); 
    boundx = bounds[0]; 
    boundy = bounds[1]; 
    // Store the API in the jcrop_api variable 
    jcrop_api = this; 
    jcrop_api.animateTo([ 0, 0, selectWidth, selectHeight ]); 
    }); 

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

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

}); 

Answer 3

而非animateTo黑客，你可以只設置在回調初始選擇。所以：

$('#target').Jcrop({ 
    onChange: updatePreview, 
    onSelect: updatePreview, 
    aspectRatio: 1 
    },function(){ 
    // Use the API to get the real image size 
    var bounds = this.getBounds(); 
    boundx = bounds[0]; 
    boundy = bounds[1]; 
    // Store the API in the jcrop_api variable 
    jcrop_api = this; 
    jcrop_api.setSelect([ 0, 0, selectWidth, selectHeight ]); // <-- 
    });