本文介绍了裁剪图像使用坐标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试裁剪图像并将裁剪后的数据发送到服务器端。我正在使用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

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>

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.

这篇关于裁剪图像使用坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 04:57