Croppie 플러그인을 사용하여 업로드하기 전에 이미지 자르기

4996 단어 jquerylaravelimagecrop
이 예에서는 자르기 플러그인을 사용하여 업로드하기 전에 이미지를 자르는 방법을 보여 드리겠습니다. 서버에 업로드하기 전에 이미지를 자르기 위한 요구 사항이 여러 번 있습니다.

그래서 여기에서는 서버에 업로드하기 전에 이미지를 자르는 방법의 예를 제공하고, croppie 플러그인은 원 및 사각형 자르기 사진 및 기타 여러 설정 옵션을 제공합니다.

Read Also : How To Validate Max File Size Using Javascript



여기에서는 자르기 이미지에 croppie.js CDN을 사용했습니다. 따라서 코드를 복사하고 출력을 얻습니다.

나는 하나의 폴더 crop_image를 생성하고 이 폴더에 index.php 파일을 생성합니다.

<html lang="en">
<head>
  <title>Crop image using croppie plugins - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.js"></script>
</head>
<body>

<h3 class="text-center">Crop image using croppie plugins - websolutionstuff.com</h3>
<div class="container">
    <div class="panel panel-default" style="margin-top: 25px;">
        <div class="panel-heading">Upload Image</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4 text-center" style="padding-top:30px;">
                        <div id="upload-input" style="width:350px; height: 400px;"></div>
                    </div>
                    <div class="col-md-4" style="padding-top:30px;">
                        <strong>Select Image:</strong>
                        <br/>
                        <input type="file" id="upload">
                        <br/>
                        <button class="btn btn-success upload-result">Upload Image</button>
                    </div>
                    <div class="col-md-4" >
                        <div id="uploaded-input" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px">                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
$uploadCrop = $('#upload-input').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });

    }
    reader.readAsDataURL(this.files[0]);
});


$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "/crop_image/store_img_ajax.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img style="margin: 20px;" src="' + resp + '" />';
                $("#uploaded-input").html(html);
            }
        });
    });
});
</script>
</body>
</html>


이제 자르기 이미지를 이 폴더 crop_image/store_img_ajax.php에 저장하기 위해 store_img_ajax.php 파일을 생성해야 합니다.

<?php 
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents('upload/'.$imageName, $data);
?>


그러면 아래 스크린샷과 같은 출력이 표시됩니다.



Read Also : How To Validate Upload File Type Using Javascript



읽어 주셔서 감사합니다 !!
간단한 React Carousel을 만드는 방법
2.1 mock 객체 만들기 및 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage