Question

我正在使用裁剪，并且希望以模态预览裁剪的图像。如何获取裁剪后的图片的src网址

我为此插件复制了基本html代码的某些部分

HTML

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

JS

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

到目前为止，我尝试使用的是文档中的内容

$('.image-editor').cropit('imageSrc'); //but it returns null. Is there any other way to do this?

演示和文档似乎并没有融合在一起，因此我很难使用该插件。

Answer 1

只需更改此部分。 imagedata是本身可用的base64 URL。它无法在新窗口中打开，但您可以轻松地将其设置为任何图像的src。

$('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
       $("#image").src = imageData;
    });

工作示例

$(function() {
  $('.image-editor').cropit({
    exportZoom: 1.25,
    imageBackground: true,
    imageBackgroundBorderWidth: 50,
     
  });

  $('.export').click(function() {
    var imageData = $('.image-editor').cropit('export');
 document.querySelector("#image").src = imageData;   
  });
});

.image-editor {
   text-align: center;
}

.cropit-preview {
  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 250px;
  height: 250px;
   display: inline-block;
}

.cropit-preview-image-container {
  cursor: move;
}

.cropit-preview-background {
  opacity: .2;
  cursor: auto;
}

.image-size-label {
  margin-top: 10px;
}

input, .export {
  /* Use relative position to prevent from being covered by image background */
  position: relative;
  z-index: 10;
  display: block;
}

button {
  margin-top: 10px;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.js"></script>
<div class="image-editor">
   <input type="file" class="cropit-image-input">
   <div class="cropit-preview"></div>
   <input type="range" class="cropit-image-zoom-input">
   <button class="export">Export</button>
 </div>
<img id="image"/>

cropit获取图像源

1 个答案: