使用jQuery cropit裁剪和调整图像大小

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

这是我的标记:

  

    

      

      
 Resize image 
      
      
      
      Submit
    
  

我的问题是如何在第一个演示中加载和裁剪现有图像.

这是一个例子:

我的演示可能不适用于此,但它在我当地的环境中工作正常.所以继续尝试.

你也可以看到例子

你可以在这里下载demo

  $(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;
      }

      
      

      

        Resize image
      
      
      Export