Question

我正在撰写这篇文章是因为我一直在努力让这个小部件工作但到目前为止没有成功，而且它真的很令人沮丧，因为它看起来很简单，只需要一小段时间来配置，我相信我我做错了什么。

我使用的是v0.7.9版本，这是我用来启动小部件的脚本。

            var $image = $("#target img");
            originalData = {};


        $("#bootstrap-modal").on("shown.bs.modal", function() {
                  $image.cropper({

                    preview: ".img-preview",
                    multiple: true,
                    data: originalData,
                    done: function(data) {
                    }
                  });


        }).on("hidden.bs.modal", function() {
              originalData = $image.cropper("getDataURL", "image/jpeg");
                 $('#dataURLView img').attr('src', originalData);
                 console.log(originalData);

        });

我正在寻找的是模拟在cropper hompage中显示的模态bootstrat示例的相同行为。

    <div class="modal fade" id="bootstrap-modal">
  <div class="modal-dialog" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalLabel">Crop the image</h4>
      </div>
      <div class="modal-body">
        <div id="target">
          <img id="image" src="sample_image.jpg" alt="Picture">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

原始数据var应该将裁剪结果作为数据：图像类型，然后将其设置为img url，但到目前为止它还没有工作。除裁剪结果外的所有内容都有效。这是我在控制台上得到的结果。 enter image description here

Answer 1

我刚发现了这个问题。这个base 64 url输出是创建者添加的新功能，这就是为什么我找不到实现它的正确方法。这是您应该使用的代码：

var data = $image.cropper('getCroppedCanvas').toDataURL() ;

然后将数据输出到src字段：）

jquery Cropper getData函数返回一个对象而不是data：image

1 个答案: