使用坐标裁剪图像

Question

使用坐标裁剪图像

我正在尝试裁剪图像并将裁剪的数据发送到服务器端.我正在使用imgareaselect插件.我得到了选择的坐标,但无法裁剪图像.互联网上提供的所有解决方案都是使用css预览裁剪的图像.但是我怎样才能获得裁剪数据？无需预览裁剪后的图像.我的代码是

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;
    }
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sid*_*ury 24

嘿@Shahbaz我正在尝试使用cropper.js为您解决方案.

这就是你能做的

从这里下载cropper.js

//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>

Run Code Online (Sandbox Code Playgroud)

身体

<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

Run Code Online (Sandbox Code Playgroud)

使用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(){
        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>

Run Code Online (Sandbox Code Playgroud)

下面是我刚创建的示例链接 >下载>提取>在任何服务器上运行(如wamp,xamp等),否则您将收到CORS安全性错误.

希望这可以帮助.谢谢.

归档时间：	9 年，4 月前
查看次数：	16524 次
最近记录：	6 年，5 月前