如何使用存储在亚马逊网络服务上的 jquery 裁剪器编辑图像？

我正在使用用于编辑图像的jquery 裁剪器 (v 0.7.9) 插件。我刚刚按照插件页面中给出的说明在我的机器上创建了一个简单的示例。如果图像存储在我的机器上，它工作正常。但如果图像来自亚马逊存储桶，则它不起作用。请给我以下代码的建议。

<div class="eg-wrapper" id="divContainer" style="height: 400px;width: 400px;">
        <img class="cropper" id="editImage" crossorigin="anonymous" src="http://review-rating-bucket.s3.amazonaws.com/9991710/149270397024phpG2BOu7.jpeg" alt="Picture" height="400" width="400">
    </div>
    <button class="btn btn-primary" id="getDataURL" type="button">Get Data URL</button>
<button class="btn btn-primary" id="getDataURL2" type="button">Get Data URL (JPG)</button>
<button class="btn btn-primary" id="getDataURL3" type="button">Get Data URL (160*90)</button>
<button class="btn btn-primary" id="rotate" type="button">Rotate</button>
<button class="btn btn-primary" id="zoom" type="button">Zoom</button>
<button class="btn btn-info" id="getImageData" type="button">Get Image Data</button>
<button class="btn btn-info" id="getData2" type="button">Get Data (Rounded)</button>
<button class="btn btn-info" id="getData" type="button">Get Data</button>
<button class="btn btn-warning" id="reset" type="button">Reset</button>
<button class="btn  btn-warning" id="reset2" type="button">Reset (deep)</button>
<button class="btn btn-primary" id="clear" type="button">Clear</button>
<button class="btn btn-danger" id="destroy" type="button">Destroy</button>
<button class="btn btn-success" id="enable" type="button">Enable</button>
<button class="btn btn-warning" id="disable" type="button">Disable</button>
<button class="btn btn-info" id="zoomIn" type="button">Zoom In</button>
<button class="btn btn-info" id="zoomOut" type="button">Zoom Out</button>
<button class="btn btn-info" id="rotateLeft" type="button">Rotate Left</button>
<button class="btn btn-info" id="rotateRight" type="button">Rotate Right</button>
<button class="btn btn-primary" id="setData" type="button">Set Data</button>
<br/>
<textarea class="form-control" id="dataURL" rows="10"></textarea>
<script>
    var $image = $("#editImage"),
          $dataX = $("#dataX"),
          $dataY = $("#dataY"),
          $dataHeight = $("#dataHeight"),
          $dataWidth = $("#dataWidth"),
          console = window.console || { log: function () {} },
          cropper;

      $image.cropper({
        // autoCropArea: 1,
        data: {
          x: 50,
          y: 50,
          width: 200,
          height: 200
        },

        // multiple: true,
        // autoCrop: false,
        // dragCrop: false,
        // dashed: false,
        // modal: false,
        // movable: false,
        // resizable: false,
        // zoomable: false,
        // rotatable: false,
        // checkImageOrigin: false,

        // maxWidth: 480,
        // maxHeight: 270,
        // minWidth: 160,
        // minHeight: 90,

        done: function (data) {
          $dataX.val(data.x);
          $dataY.val(data.y);
          $dataHeight.val(data.height);
          $dataWidth.val(data.width);
        },

        build: function (e) {
          console.log(e.type);
        },

        built: function (e) {
          console.log(e.type);
        },

        dragstart: function (e) {
          console.log(e.type);
        },

        dragmove: function (e) {
          console.log(e.type);
        },

        dragend: function (e) {
          console.log(e.type);
        }
      });

      cropper = $image.data("cropper");

      $image.on({
        "build.cropper": function (e) {
          console.log(e.type);
          // e.preventDefault();
        },
        "built.cropper": function (e) {
          console.log(e.type);
          // e.preventDefault();
        },
        "dragstart.cropper": function (e) {
          console.log(e.type);
          // e.preventDefault();
        },
        "dragmove.cropper": function (e) {
          console.log(e.type);
          // e.preventDefault();
        },
        "dragend.cropper": function (e) {
          console.log(e.type);
          // e.preventDefault();
        }
      });

      $("#reset").click(function () {
        $image.cropper("reset");
      });

      $("#reset2").click(function () {
        $image.cropper("reset", true);
      });

      $("#clear").click(function () {
        $image.cropper("clear");
      });

      $("#destroy").click(function () {
        $image.cropper("destroy");
      });

      $("#enable").click(function () {
        $image.cropper("enable");
      });

      $("#disable").click(function () {
        $image.cropper("disable");
      });

      $("#zoom").click(function () {
        $image.cropper("zoom", $("#zoomWith").val());
      });

      $("#zoomIn").click(function () {
        $image.cropper("zoom", 0.1);
      });

      $("#zoomOut").click(function () {
        $image.cropper("zoom", -0.1);
      });

      $("#rotate").click(function () {
        $image.cropper("rotate", $("#rotateWith").val());
      });

      $("#rotateLeft").click(function () {
        $image.cropper("rotate", -90);
      });

      $("#rotateRight").click(function () {
        $image.cropper("rotate", 90);
      });

      var $inputImage = $("#inputImage"),
          blobURL;

      if (window.URL) {
        $inputImage.change(function () {
          var files = this.files,
              file;

          if (files && files.length) {
            file = files[0];

            if (/^image\/\w+$/.test(file.type)) {
              if (blobURL) {
                URL.revokeObjectURL(blobURL); // Revoke the old one
              }

              blobURL = URL.createObjectURL(file);
              $image.cropper("reset", true).cropper("replace", blobURL);
              $inputImage.val("");
            }
          }
        });
      } else {
        $inputImage.parent().remove();
      }

      $("#setAspectRatio").click(function () {
        $image.cropper("setAspectRatio", $("#aspectRatio").val());
      });

      $("#replace").click(function () {
        $image.cropper("replace", $("#replaceWith").val());
      });

      $("#getImageData").click(function () {
        $("#showImageData").val(JSON.stringify($image.cropper("getImageData")));
      });

      $("#setData").click(function () {
        $image.cropper("setData", {
          x: $dataX.val(),
          y: $dataY.val(),
          width: $dataWidth.val(),
          height: $dataHeight.val()
        });
      });

      $("#getData").click(function () {
        $("#showData").val(JSON.stringify($image.cropper("getData")));
      });

      $("#getData2").click(function () {
        $("#showData").val(JSON.stringify($image.cropper("getData", true)));
      });

      $("#getDataURL").click(function () {
        var dataURL = $image.cropper("getDataURL");
        alert(dataURL);
        $("#dataURL").text(dataURL);
        $("#showDataURL").html('<img src="' + dataURL + '">');
      });

      $("#getDataURL2").click(function () {
        var dataURL = $image.cropper("getDataURL", "image/jpeg");
        alert(dataURL);
        $("#dataURL").text(dataURL);
        $("#showDataURL").html('<img src="' + dataURL + '">');
      });

      $("#getDataURL3").click(function () {
        var dataURL = $image.cropper("getDataURL", {
          width: 160,
          height: 90
        });
        alert(dataURL);
        $("#dataURL").text(dataURL);
        $("#showDataURL").html('<img src="' + dataURL + '">');
      });
</script>