Question

我正在使用cropit裁剪图片。

  <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>

我遇到了两个问题：

当我进行裁剪并单击保存按钮时，裁剪后的图像将在新窗口中打开。我希望它不应该在新窗口中打开，而是裁剪图像应保存到相关的用户文件夹，如： ROOT_PATH.'user/upload/'.$row['UserName'].'/avatar/big/'
我还希望保存最新的裁剪图片网址，以保存在AvatarImage列的MySQL数据库中。

找到MySQL数据库信息：

数据库名称：ara

数据库用户：root

数据库密码：

数据库地址：127.0.0.1

Answer 1

您必须使用php对base64图像文件进行编码，并将图像保存到文件目录中，请尝试欺骗现有的链接

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

将裁剪的图像保存到本地服务器，并将其保存到MySQL数据库

1 个答案: