0

I am using cropit to crop image.

  <body>
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <!-- .cropit-image-preview-container is needed for background image to work -->
      <div class="cropit-image-preview-container">
        <div class="cropit-image-preview"></div>
      </div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <button class="export">Save</button>
    </div>

    <script>
      $(function() {
        $('.image-editor').cropit({
          exportZoom: 1.25,
          imageBackground: true,
          imageBackgroundBorderWidth: 10,
          imageState: {
            src: '../image/default-avatar.png'
          }
        });

        $('.export').click(function() {
          var imageData = $('.image-editor').cropit('export');
          window.open(imageData);

        });
      });
    </script>
  </body>

I have faced two issues:

  1. When i do the cropping and clicking on save button cropped image opens in new window. I want that it should not open in new window, instead cropped image should save to related user folder like: ROOT_PATH.'user/upload/'.$row['UserName'].'/avatar/big/'
  2. I want to also save the latest cropped image URL to be saved in MySQL database in AvatarImage column.

Beneath find MySQL database information:

Database name: ara

Database user: root

Database password:

Database address: 127.0.0.1

ARA
  • 83
  • 10

1 Answers1

0

you must encode base64 image file using php, and save your image to a file directory, please try to trick existing like this link

How to create and save image to a website folder from a base64 encoded data/string using PHP

Community
  • 1
  • 1
Iyes boy
  • 305
  • 3
  • 6