0
私は画像を編集するために使用されるjquery cropper (v 0.7.9) pluginを使用しています。私はちょうどプラグインのページで与えられた指示に従って、私のマシン上に簡単な例を作成しました。画像が自分のマシンに保存されていれば正常に動作します。しかし、そのイメージがアマゾンのバケツからのものであれば動作しません。次のコードの提案をお願いします。amazon webserviceに保存されているjquery cropperを使って画像を編集するには？
<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>
あなたはsvengイメージをArまたはそれをトリミングしたときÁlvaroTouzó[email protected] –
はあなたが言いたいことを持っていなかったとき、あなたの問題があります。 – Girish
はい、作物を作っていないとします。または、画像を保存しませんでした。 Whats rthe matter –