Jcrop 中的多张图片和预览。如何将许多 id 传递给 Javascript 函数

Posted 2023-02-25

【中文标题】Jcrop 中的多张图片和预览。如何将许多 id 传递给 Javascript 函数

【英文标题】：Multiple pictures and previews in Jcrop. How to pass many id's to Javascript function

【发布时间】：2010-08-27 11:53:33

【问题描述】：

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

但出现错误。怎么解决？

【参考方案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 或...）

【讨论】：

你救了我的命

【参考方案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();

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

【讨论】：

您能否解释一下这如何与问题中的代码一起使用？

好的，我已经扩展了解决方案。希望这是有道理的:)

【参考方案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
 );

);

【参考方案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');'

【讨论】：

这是一个很好的答案。谢谢！