Question

我在我的应用程序中使用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'
                });
            }
        }

一张图片的工作示例如下： link text

我想要的是将多个参数传递给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'
                });
            }
        }

但是出现错误。怎么解决？

Answer 1

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或...）

Answer 2

<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（）;

然后，您可以为每个图像分配唯一的数据ID，您可以将其传递给showPreview（）函数。这将允许您定位相关的预览元素：preview1，preview2等...

Answer 3

尝试在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
 });

});

Answer 4

这对我有用......

$('.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'）;'

Jcrop中的多张图片和prewiev。如何将许多id传递给javascript函数

4 个答案: