jCrop - 更新预览加载？

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

        });

这只是我想要的方式。您的脚本可能还有其他错误。但是你不必调用任何特殊的东西来显示预览。如果您不执行此 onload，请尝试执行此 onload。

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 hack。所以：

$('#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 ]); // <--
  });