javascript - js图片剪裁工具cropper使用问题

问题描述

问 题

这是cropper的演示页面：https://fengyuanchen.github.i...

我想使用旋转按钮，就是下面红框中的两个：

按照文档操作https://github.com/fengyuanch...

<div class="btn-group" role="group" aria-label="Basic example">
   <button id="rotateLeft" type="button" class="btn btn-secondary" data-method="rotate" data-option="-90" title="左转">
       <i class="fa fa-undo" aria-hidden="true">左转90度</i>
   </button>
   <button id="rotateRight" type="button" class="btn btn-secondary" data-method="rotate" data-option="90" title="右转">
       <i class="fa fa-repeat" aria-hidden="true">右转90度</i>
   </button>
</div>

$("#rotateLeft").cropper('rotate', -90);
$("#rotateRight").cropper('rotate', 90);

可是不能使用，浏览器提示Cannot read property 'rotate' of undefined

看了一下js源代码： https://fengyuanchen.github.i...
没看懂是怎么触发按钮的，请大神帮讲一下过程。

解决方案

网络不好，没看全，主要在这里

// Methods  按钮点击事件触发
  $('.docs-buttons').on('click', '[data-method]', function () {
    var $this = $(this);
    var data = $this.data();
    var $target;
    var result;

    if ($this.prop('disabled') || $this.hasClass('disabled')) {
      return;
    }

    if ($image.data('cropper') && data.method) {
      data = $.extend({}, data); // Clone a new one

      if (typeof data.target !== 'undefined') {
        $target = $(data.target);

        if (typeof data.option === 'undefined') {
          try {
            data.option = JSON.parse($target.val());
          } catch (e) {
            console.log(e.message);
          }
        }
      }

      if (data.method === 'rotate') {
        $image.cropper('clear');
      }
      //应该是这里调用了cropper
      result = $image.cropper(data.method, data.option, data.secondOption);

      if (data.method === 'rotate') {
        $image.cropper('crop');
      }

反观你问题里的调用：

$("#rotateLeft").cropper('rotate', -90);

我觉得你是不是漏了个img，cropper应该是作用于img之类的，而不是按钮，按钮只是起到点击时执行cropper调用

这篇关于javascript - js图片剪裁工具cropper使用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！