CODEWITHSUNDEEP
javascriptjqueryajaxcropit
printfjoby
printfjoby

Reputation: 78

Plugin not working with JQuery-3.1.0

I am trying to create an image cropper using cropit plugin

<!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/[email protected]/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>

This code works fine without any problem. But, if I replace the current version (2.0.0) with latest version (3.1.0), then the browsed image will not be loaded. i.e, if we replace:

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

with

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

then the image will not be loaded. I can't use the jQuery old version because I am already using the latest version for other plugins.

Upvotes: 1

Views: 1420

Answers (1)

printfjoby
printfjoby

Reputation: 78

Just include the migrate plugin given below to solve the problem.

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

Source

Upvotes: 1

Related Questions