javascript - jquery Cropper getData 函数返回一个对象而不是数据 :image

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主页上显示的模态引导示例的相同行为。

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

originaldata var 应该以 data:image 类型的形式获取裁剪结果，然后将其设置为 img url，但到目前为止还不起作用。 除了裁剪结果之外，一切都正常。 这是我在控制台上得到的结果。 enter image description here

Answer 1

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

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

然后将数据输出到 src 字段:)