1

我正在尝试使用cropit插件创建图像裁剪器

<!DOCTYPE html>
    <html>
      <head>
        <title>cropit</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/cropit@0.5.1/dist/jquery.cropit.js"></script>

        <style>
          .cropit-preview {
            background-color: #f8f8f8;
            background-size: cover;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-top: 7px;
            width: 250px;
            height: 250px;
          }

          .cropit-preview-image-container {
            cursor: move;
          }

          .image-size-label {
            margin-top: 10px;
          }

          input, .export {
            display: block;
          }

          button {
            margin-top: 10px;
          }
        </style>
      </head>
      <body>
        <div class="image-editor">
          <input type="file" class="cropit-image-input">
          <div class="cropit-preview"></div>
          <div class="image-size-label">
            Resize image
          </div>
          <input type="range" class="cropit-image-zoom-input">
          <button class="rotate-ccw">Rotate counterclockwise</button>
          <button class="rotate-cw">Rotate clockwise</button>

          <button class="export">Export</button>
        </div>

        <script>
          $(function() {
            $('.image-editor').cropit({
              imageState: {
                src: 'http://lorempixel.com/500/400/',
              },
            });

            $('.rotate-cw').click(function() {
              $('.image-editor').cropit('rotateCW');
            });
            $('.rotate-ccw').click(function() {
              $('.image-editor').cropit('rotateCCW');
            });

            $('.export').click(function() {
              var imageData = $('.image-editor').cropit('export');
              window.open(imageData);
            });
          });
        </script>
      </body>
    </html>

此代码工作正常，没有任何问题。但是，如果我用最新版本（3.1.0）替换当前版本（2.0.0），则不会加载浏览的图像。即，如果我们替换：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

那么图像将不会被加载。我不能使用 jQuery 旧版本，因为我已经在使用其他插件的最新版本。

4

1 回答 1

1

只需包含下面给出的迁移插件即可解决问题。

<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>

资源

于 2017-12-08T13:33:45.067 回答