アマゾンウェブサービスに保存されている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>
アルバロ・トゥゾン

アマゾンでの問題の調査と解決を開始するために、このデモを作成しましたそして、アマゾンからの画像はそれを表示しませんでした。そして、画像に直接アクセスしようとすると、ダウンロードされました。

だから私はこの画像でアマゾンの許可の問題になると思います。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ