文章/答案/技术大牛

发布

问不使用JQuery3.1.0的插件
EN

Stack Overflow用户

提问于 2017-11-02 10:51:13

回答 1查看 1.3K关注 0票数 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>

这段代码运行良好，没有任何问题。但是，如果我将当前版本(2.0.0)替换为最新版本(3.1.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的旧版本，因为我已经在使用其他插件的最新版本。

cropit

javascript

jquery

ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-08 13:33:45

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

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

来源

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47073475

复制

相似问题

问不使用JQuery3.1.0的插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用JQuery3.1.0的插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用JQuery3.1.0的插件
EN