Tekyegah
شنبه 03 خرداد 1399, 10:45 صبح
بهترش کردم :
<html lang="en">
<head>
<title>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">
<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>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="card" style="max-height: 500px;">
<div class="card-header bg-info">jQuery - Crop Image and Upload using Croppie plugin</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo"></div>
</div>
<div class="col-md-4" style="padding:5%;">
<strong>Select image to crop:</strong>
<input type="file" id="image">
<button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
<hr>
<button id="chkimg" class="btn btn-warning btn-block " style="margin-top:2%">Crop Image</button>
<img id="testimg" />
</div>
<div class="col-md-4">
<div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>
</div>
</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');
Ftestimg();
});
}
reader.readAsDataURL(this.files[0]);
Ftestimg();
});
function Ftestimg() {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(img) {
console.log(img);
$("#testimg").attr("src", img);
});
}
$('#chkimg').on('click', function(ev) {
console.log('chkimg');
Ftestimg();
});
$('.btn-upload-image').on('click', function(ev) {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(img) {
$.ajax({
url: "croppie.php",
type: "POST",
data: {
"image": img
},
success: function(data) {
html = '<img src="' + img + '" />';
$("#preview-crop-image").html(html);
}
});
});
});
</script>
</body>
</html>