Skip to content

Instantly share code, notes, and snippets.

@harendra21

harendra21/index.php

Created April 19, 2019 07:10
Show Gist options
  • Save harendra21/ebc0e4ad2e607a3783d9cdef989a7229 to your computer and use it in GitHub Desktop.
Save harendra21/ebc0e4ad2e607a3783d9cdef989a7229 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.php
<html lang="en">
<head>
<title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
.croppie-container{
height: auto!important;
}
body{
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.upload-btn{
font-size: 72px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-center" style="margin-top: 100px; color: #fff">
<h1>Crop and Resize image before upload using PHP, jQuery, Croppie Plugin</h1>
</div>
<div class="card" style="max-height: 500px; margin-top: 150px">
<div class="card-body text-center">
<button type="button" class="btn btn-primary upload-btn" data-toggle="modal" data-target="#myModal">
<i class="ion-upload"></i>
</button>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Crop & Upload Image</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<strong>Select image to crop:</strong>
<input type="file" id="image" class="form-control">
<div id="upload-demo"></div>
</div>
<div class="col-md-6 text-center">
<strong>Cropped Image:</strong> <br><br>
<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px; margin: 0 auto;"></div><br>
<button class="btn btn-success btn-block btn-upload-image">Upload Image</button>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var resize = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: { // Default { width: 100, height: 100, type: 'square' }
width: 200,
height: 200,
type: 'square' //square
},
boundary: {
width: 300,
height: 300
}
});
$('#image').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
resize.croppie('bind',{
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.btn-upload-image').on('click', function (ev) {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (img) {
$.ajax({
url: "upload.php",
type: "POST",
data: {"image":img , 'imageName' : $('#image').val()},
success: function (data) {
html = '<img src="' + img + '" />';
$("#preview-crop-image").html(html);
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment