Question

我有js代码的这一部分：

var bool = 0;

$('#imageToCrop').cropper({
          autoCrop: false,
          movable: false,
          viewMode: 3,
          crop: function(e) {
            // Output the result data for cropping image.
            console.log(e.x);
            console.log(e.y);
            console.log(e.width);
            console.log(e.height);
            console.log(e.rotate);
            console.log(e.scaleX);
            console.log(e.scaleY);

          },
          cropend: function (e) {
              if (bool == 0) {
              $('#cropTimetable').toggle();
              $('#clearCrop').toggle();
              $('#downloadTimetable').toggle();
              $('#downloadHDTimetable').toggle();
              bool = 1;
            }
          }          

    });

这是我拍摄的裁剪插件Cropper的初始化代码here。

仅当我点击此文本（jsp代码）时才会启用裁剪器：

<li id="cropImage" style="cursor: pointer;cursor: hand;" class="col-sm-2 col-xs-1">
    <a><span style="vertical-align:top">Crop Image</span></a>
</li>

我可以这样做吗？点击链接后启用裁剪？

Answer 1

它应该通过将初始化代码包装在onclick函数中来实现，如：

$("#cropImage").on("click", {id : "imageToCrop"}, initCropperOnImage);

function initCropperOnImage(event)
{
   //get the id from event.data
   $(event.data.id).cropper({
      autoCrop: false,
      movable: false,
      viewMode: 3,
      crop: function(e) {
        // Output the result data for cropping image.
        console.log(e.x);
        console.log(e.y);
        console.log(e.width);
        console.log(e.height);
        console.log(e.rotate);
        console.log(e.scaleX);
        console.log(e.scaleY);

      },
      cropend: function (e) {
          if (bool == 0) {
          $('#cropTimetable').toggle();
          $('#clearCrop').toggle();
          $('#downloadTimetable').toggle();
          $('#downloadHDTimetable').toggle();
          bool = 1;
        }
      }          

  });
}

单击jQuery启用图像裁剪

1 个答案: