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

【问题标题】：cropper.jscant initialize blob image <img>tag by blueimpcropper.jscant 通过 blueimp 初始化 blob 图像 <img> 标记
【发布时间】：2017-04-27 23:45:57
【问题描述】：

所以我想要什么：

选择具有输入类型文件的图像，使用blueimp 缩小规模，使用cropper.js 裁剪该图像

所以 blueimp 部分工作正常，图像被调整为 maxWidth 属性并作为<img> 标签附加到“#imagearea”然后我想根据该标签初始化cropper.js，就像在文档中一样，hes我的代码

  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)

然后

未捕获的 RangeError：偏移量超出了 DataView 的范围在 DataView.getUint8 () 在 m (6eaf333.js:7051) 在 e.value (6eaf333.js:7051) 在 XMLHttpRequest.n.onload (6eaf333.js:7051)

【问题讨论】：

标签： javascript jquery blueimp cropper

【解决方案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}
      );

  };

【讨论】：