裁剪图像使用坐标 [英] crop image using coordinates
本文介绍了裁剪图像使用坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试裁剪图像并将裁剪后的数据发送到服务器端。我正在使用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.
这篇关于裁剪图像使用坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
