使用 jQuerycropit 裁剪和调整图像大小答案

【问题标题】：Crop and resize image with jQuery cropit使用 jQuerycropit 裁剪和调整图像大小
【发布时间】：2016-04-04 12:54:52
【问题描述】：

我正在尝试使用 jQuery 插件 cropit 创建个人资料照片上传和裁剪。

这是我的标记：

  <form action="#">
    <div class="image-editor">
      <div class="cropit-image-preview"></div>
      <div class="image-size-label"> Resize image </div>
      <input type="range" class="cropit-image-zoom-input">
      <input type="hidden" name="image-data" class="hidden-image-data" />
      <input type="file" class="cropit-image-input">
      <button type="submit">Submit</button>
    </div>
  </form>

我的问题是如何加载和裁剪现有图像，如first demo。

【问题讨论】：

...demo不是自带源码吗？为什么它不适合你？
不，没有使用现有图像的演示。我尝试检查 thtat 演示页面，发现图像被加载为背景。我尝试将现有图像加载为“.cropit-image-”的背景图像预览”。但裁剪不起作用。
它给出了关于如何使用图像的明确说明：// In the demos I'm passing in an imageState option // so it renders an image by default: // $('#image-cropper').cropit({ imageState: { src: { imageSrc } } });
@Juhana Oopz，我的错。我多次阅读文档但没有看到它。无论如何，谢谢

标签： jquery image crop profile

【解决方案1】：

这是一个例子：

我的 Demo 在这里可能无法运行，但在我的本地环境中运行良好。所以请继续尝试。

你也可以看到example

您可以下载演示here

  $(function() {
        $('.image-editor').cropit({
          imageState: {
            src: 'http://lorempixel.com/500/400/',            
            //src: 'your_image_path/to_be_crop_image.jpg',
          },
        });

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

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

      .cropit-image-background {
        opacity: .2;
        cursor: auto;
      }

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

      input {
        display: block;
      }

      .export {
        margin-top: 10px;
      }

<script src="http://uttamkumarroy.com/jquery.cropit.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-image-preview"></div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <button class="export">Export</button>
    </div>

谢谢

【讨论】：