问题描述
我正在尝试裁剪图像并将裁剪后的数据发送到服务器端。我正在使用imgareaselect插件。我得到了选择的坐标,但无法裁剪图像。互联网上提供的所有解决方案都是使用CSS预览裁剪后的图像。但是我怎样才能得到裁剪的数据呢?无需预览裁剪后的图像。我的代码是
cropw = $('#cropimg')。imgAreaSelect({
maxWidth:300,maxHeight: 300,
aspectRatio:'1:1',
实例:true,
句柄:true,
onSelectEnd:function(img,selection){
x1 = selection .x1;
y1 = selection.y1;
x2 = selection.x2;
y2 = selection.y2;
}
});
嘿@Shahbaz我正在为您尝试一个解决方案使用cropper.js。
这就是你可以做的
//链接js文件
< head>
< script src =jquery.js>< / script> //可选
< link href =cropper.min.css =stylesheet>
< script src =cropper.min.js>< / script>
< / head>
正文
< input type =filename =imageid =imageonchange =readURL(this);/>
< div class =image_container>
< img id =blahsrc =#alt =您的图片/>
< / div>
< div id =cropped_result>< / div> //只显示裁剪后的图片(仅当需要时)
< button id =crop_button>裁剪< /按钮> //触发裁剪事件
Javascript
< script type =text / javascriptdefer>
函数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);
函数initCropper(){
console.log(来到这里)
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);
}
});
$ b $ //在裁切按钮上单击
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);
/ * ----------------向服务器发送图像--------------------- ----
cropper.getCroppedCanvas()。toBlob(function(blob){
var formData = new FormData();
formData.append('croppedImage',blob );
//使用`jQuery.ajax`方法
$ .ajax('/ path / to / upload',{
method:POST,
data:formData ,
processData:false,
contentType:false,
成功:function(){
console.log('上传成功');
},
错误:function(){
console.log('Upload error');
}
});
});
---------------------------------------------- ------ * /
})
}
< / script>
Download> Extract>在任何服务器上运行(如wamp,xamp等),否则您将收到CORS安全错误。
希望这会有所帮助。谢谢。
I am trying to crop image and send the cropped data to server side. I am using imgareaselect plugin. I get the coordinates of selection but could not crop the image. All the solutions available on internet is to preview cropped image using css. But how can I get the cropped data? No need of preview the cropped image. My code is
cropw = $('#cropimg').imgAreaSelect({
maxWidth: 300, maxHeight: 300,
aspectRatio: '1:1',
instance: true,
handles: true,
onSelectEnd: function (img, selection) {
x1 = selection.x1;
y1 = selection.y1;
x2 = selection.x2;
y2 = selection.y2;
}
});
Hey @Shahbaz I was trying out a solution for you using cropper.js.
This is what you can do
//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>
Body
<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 Download > Extract > Run on any server (like wamp, xamp, etc ) or you will get CORS security error.
Hope this helps. Thanks.
这篇关于裁剪图像使用坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!