3

アプリでJcropプラグイン（Jquery）を使用しています。私はいくつかのajaxソリューションを使用することにしましたが、関数に値を渡すことに問題があります。JavaScriptのスキルが不足しているのか、Jcropの問題なのかわかりません。コードは次のとおりです。

jQuery(window).load(function(){

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1
            });

        });

        // Our simple event handler, called from onChange and onSelect
        // event handlers, as per the Jcrop invocation above
        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 * 500) + 'px',
                    height: Math.round(ry * 370) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }

1枚の写真を使った作業例は次のとおりです。

リンクテキストhttp://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail

私が欲しいのは、次のような関数showPreview（coords）に複数のパラメーターを渡すことです。

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

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

しかし、エラーが表示されます。それを解決する方法は？

4

4 に答える 4

13 
jQuery('.image_to_crop').each(function() {
  image_to_crop = $(this);
  image_to_crop.Jcrop({
    onChange: function(coords){showPreview(image_to_crop, coords);},
    ...
}

function showPreview(image_to_crop, coords) {
  ...
}

このメソッドを使用すると、必要なものを showPreview 関数に渡すことができます (画像自体を渡しましたが、ID または ... を使用できます)。

于 2012-03-21T13:11:43.790 に答える
4 
<img class="imageToCrop" data-id="1" src="..." />

 $('.imageToCrop').Jcrop({
     onSelect: function (coords) {
         var id = $(this.ui.holder[0]).children('.imageToCrop').data('id');
         showPreview(coords, id);
     }
 });

function showPreview(coords, id)
{
    var previewElem = '#preview' + id;

    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $(previewElem).css({
        width: Math.round(rx * 500) + 'px',
        height: Math.round(ry * 370) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
}

ループする必要はありません。トリミングできるようにする各画像にクラスを割り当てるだけです。この場合は「.imageToCrop」です。次に、そのクラスを使用して Jcrop をインスタンス化します。 $('.imageToCrop').Jcrop();

次に、showPreview() 関数に渡すことができる各画像に一意のデータ ID を割り当てることができます。これにより、関連するプレビュー要素をターゲットにすることができます: preview1、preview2 など...

于 2013-01-07T20:22:42.500 に答える
0

これは私のために働く...

$('.workitem-main').each(function () {
        $(this).Jcrop({
            onChange: jcrop_target($(this)),
            onSelect: jcrop_target($(this)),
            aspectRatio: 1.336
        });

        function jcrop_target(my_id) {
            return function (c) { updatePreview(my_id, c); };
        };

        function updatePreview(my_id, c) {
            var api = $(my_id).data('Jcrop');
            var bounds = api.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];

            if (parseInt(c.w) > 0) {
                var rx = 167 / c.w;
                var ry = 125 / c.h;

                $('.workitem-thumb').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'
                });
            }
        };
    });

これは文書化されていない「var api = $(my_id).data('Jcrop');」に依存していることに注意してください。

于 2012-05-30T06:42:17.693 に答える
0

関数の外で変数を設定してみてくださいshowPreview。JSLintを使いやすくするために、スクリプトを少し再フォーマットしました。

jQuery(window).load(function(){

 // define these variables outside of the showPreview function
 var id = 'preview',
     size_x = 500,
     size_y = 370,
     showPreview = function(coords){
      if (parseInt(coords.w,10) > 0){
       var rx = 100 / coords.w;
       var ry = 100 / coords.h;

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

 jQuery('#cropbox').Jcrop({
  onChange: showPreview,
  onSelect: showPreview,
  aspectRatio: 1
 });

});
于 2010-08-27T16:26:47.923 に答える