4

私は 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'
          });
        }
      };

    });
4

3 に答える 3

8

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 ]); // <--
  });
于 2012-08-14T18:29:32.033 に答える
5

私もこれを機能させることができず、あなたの質問が自分で解決策を探しているのを見つけました。

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

});
于 2011-11-12T16:52:09.680 に答える
3

デフォルト値を設定しようとしましたが、プレビュー ボックスでデフォルト値がプレビューされています。

jQuery(window).load(function(){

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

        });

これは私が望むように機能しました。スクリプトに他のエラーがある可能性があります。ただし、プレビューを表示するために特別なものを呼び出す必要はありません。この onload を実行していない場合は、onload を実行してみてください。

于 2011-08-31T09:19:23.477 に答える