cropper.jscant <img>通过 blueimp 初始化 blob 图像标记

Question

所以我想要什么：

选择一个带有输入类型文件的图像，与蓝色粉碎的降级用cropper.js

裁剪图像

因此，蓝点部分工作正常，图像被调整到MaxWidth属性大小，并将其作为<img>标签附加到" #imagearea"，然后我想根据该标签初始化Cropper.js

  document.getElementById('file-input').onchange = function (e) {
      var loadingImage = loadImage(
          e.target.files[0],
          function (img) {

            $(img).attr("style","max-width: 100%;")
            $('#imagearea').append(img)
            // now i see the image and when i inspect dom its a <img> tag
            // so lets initialize the cropper
            $('#imagearea').find("img").cropper({
              aspectRatio: 16 / 9,
              crop: function(e) {
              }
            });
          },
          {maxWidth: 1280}
      );
  };

但是，在初始化农作物时，首先，我得到404错误，例如

GET blob:http://foo.bar/64c77709-29f7-44ba-8772-49517e7976e5 404 (Not Found)

，然后

未熟悉的连击：偏移位于数据范围的边界之外 在dataview.getuint8((上 在M(6ef333.js：7051( 在e.value(6ef333.js：7051( 在xmlhttprequest.n.onload(6ef333.js：7051(

Answer 1

请使用" norevoke"选项。

document.getElementById('file-input').onchange = function (e) {
      var loadingImage = loadImage(
          e.target.files[0],
          function (img) {
            $(img).attr("style","max-width: 100%;")
            $('#imagearea').append(img)
            // now i see the image and when i inspect dom its a <img> tag
            // so lets initialize the cropper
            $('#imagearea').find("img").cropper({
              aspectRatio: 16 / 9,
              crop: function(e) {
              }
            });
          },
          {maxWidth: 1280,noRevoke: true}
      );
  };