ねえ@ Shahbaz私はcropper.jsを使って解決策を試していました。
この
は、あなたが何ができるかである
Download cropper.js from here
//link the js files
<head>
<script src="jquery.js"></script> // optional
<link href="cropper.min.css" rel="stylesheet">
<script src="cropper.min.js"></script>
</head>
ボディ
<input type="file" name="image" id="image" onchange="readURL(this);"/>
<div class="image_container">
<img id="blah" src="#" alt="your image" />
</div>
<div id="cropped_result"></div> // Cropped image to display (only if u want)
<button id="crop_button">Crop</button> // Will trigger crop event
Javascriptを
<script type="text/javascript" defer>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
setTimeout(initCropper, 1000);
}
}
function initCropper(){
console.log("Came here")
var image = document.getElementById('blah');
var cropper = new Cropper(image, {
aspectRatio: 1/1,
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
}
});
// On crop button clicked
document.getElementById('crop_button').addEventListener('click', function(){
var imgurl = cropper.getCroppedCanvas().toDataURL();
var img = document.createElement("img");
img.src = imgurl;
document.getElementById("cropped_result").appendChild(img);
/* ---------------- SEND IMAGE TO THE SERVER-------------------------
cropper.getCroppedCanvas().toBlob(function (blob) {
var formData = new FormData();
formData.append('croppedImage', blob);
// Use `jQuery.ajax` method
$.ajax('/path/to/upload', {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function() {
console.log('Upload success');
},
error: function() {
console.log('Upload error');
}
});
});
----------------------------------------------------*/
})
}
</script>
Heres the link to the example I just createdダウンロード>任意のサーバー（wamp、xampなど）で実行すると、CORSセキュリティエラーが発生します。
これが役に立ちます。ありがとう。
私は一度同じ問題を抱えていましたが、私はCropper.jsを使いました。 https://github.com/fengyuanchen/cropper。それからそれをアップロードするために行く - http://stackoverflow.com/questions/35068954/uploading-an-image-cropped-using-a-cropper-js-plugin –
彼らのコールバックは同じように見えます。実装されている場合は、私にコードを提供してください。ここで私はbase64イメージ文字列を取得しています。 –