Question

所以我想要的是：

选择带有输入类型文件的图像，使用blueimp缩减，使用cropper.js

裁剪该图片

所以blueimp部分工作正常，图像被调整大小为maxWidth属性，并作为<img>标签附加到＆＃34;＃imagearea＆＃34;然后我想基于该标签初始化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)

然后

Uncaught RangeError：Offset超出了DataView的范围在DataView.getUint8（） at m（6eaf333.js：7051）在e.value（6eaf333.js：7051）在XMLHttpRequest.n.onload（6eaf333.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}
      );

  };

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

1 个答案: