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

一张图片的工作示例在这里：

链接文本 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 回答