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

Answer 1

嘿@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下载＆gt;提取物＆gt;在任何服务器上运行（如wamp，xamp等），否则会出现CORS安全性错误。

希望这会有所帮助。感谢。

Answer 2

根据已接受的答案添加了此代码，以防万一有人将japper包装器用作裁剪器

let ICropper = (function($) {
  let $cropperCanvasImage = $('#cropper-canvas-image');
  return {
    readUrl,
    cropImage
  }


  function readUrl(input) {
    if (input.files && input.files[0]) {
      let reader = new FileReader();
      reader.onload = function(e) {
        $cropperCanvasImage.attr('src', e.target.result)
      };
      reader.readAsDataURL(input.files[0]);
      setTimeout(initCropper, 1000);
    }
  }

  function initCropper() {
    $cropperCanvasImage.cropper({
      aspectRatio: 1 / 1
    });
  }

  function cropImage() {
    let imgUrl = $cropperCanvasImage.data('cropper').getCroppedCanvas().toDataURL();
    let img = document.createElement("img");
    img.src = imgUrl;
    $("#cropped-result").append(img);
  }
})(jQuery)

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script name="jquery-croper-script">
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" />


<input type="file" name="source-image" id="sourceImage" onchange="ICropper.readUrl(this);" />
<div class="image-container">
  <img id="cropper-canvas-image" src="#" alt="your image" />
</div>
<div id="cropped-result"></div>
<button onclick="ICropper.cropImage(this)">Crop</button>

Answer 3

您是否尝试过为Jquery使用裁剪插件，例如：

https://fengyuanchen.github.io/cropper/

您必须在页面中导入脚本：

    <?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $targ_w = $targ_h = 150;
    $jpeg_quality = 90;

    $src = 'demo_files/pool.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);

    exit;
}


?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <script src="http://deepliquid.com/Jcrop/js/jquery.Jcrop.min.js"></script>
        <script src="../js/jquery.Jcrop.js"></script>
        <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
        <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

        <script language="Javascript">

            $(function(){

                $('#cropbox').Jcrop({
                    aspectRatio: 1,
                    onSelect: updateCoords
                });

            });

            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };

            function checkCoords()
            {
                if (parseInt($('#w').val())) return true;
                alert('Selecione a área para recorte.');
                return false;
            };

        </script>

    </head>

    <body>

    <div id="outer">
    <div class="jcExample">
    <div class="article">

        <h1>Crop jQuery</h1>


        <img src="demo_files/pool.jpg" id="cropbox" />


        <form action="crop.php" method="post" onsubmit="return checkCoords();">
            <input type="hidden" id="x" name="x" />
            <input type="hidden" id="y" name="y" />
            <input type="hidden" id="w" name="w" />
            <input type="hidden" id="h" name="h" />
            <input type="submit" value="Crop Image" />
        </form>

    </div>
    </div>
    </div>
    </body>

</html>

使用坐标裁剪图像

3 个答案: