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 ]); // <-- 
    });