We generally need to crop and upload images in our application Or want to store the cropped image in the folder and database.
Using croppie js we can easily crop images before uploading.
So let’s start the steps to integrate crop and upload image features in our application.
Route::post('crop-image-upload ', 'CropImageController@ uploadCropImage')->name('cropImageUpload');
Add following code into your blade file for image field
@section('content')
<div class="content-wrapper">
<section class="content">
<div class="row">
<form class="" id="" role="form" action="{{route('cropImageUpload')}}" method="post" enctype="multipart/form-data" >
{{ csrf_field() }}
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-body">
<div class="form-group">
<label for="" class="control-label post_data_label" >Upload Image</label><span class="colorRed"> *</span> <span class="pull-right"><i>(Resolution : 480px * 270px)</i></span><br>
<div class="vc_column-inner ">
<label class="cabinet center-block">
<figure>
<img src="{{ URL::asset('/resources/assets/img/default.png')}}" class="gambar" id="item-img-output" name="avatar"/>
</figure>
<p></p>
<input type="hidden" name="main_image" value="" id="main_image" style="">
<input type="file" accept="image/png, image/jpeg, image/jpg" class="item-img file center-block" name="file_photo"/>
</label>
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_crop" id="cancelCropBtn" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="Flip">Flip</button>
{{-- <button class="btn btn-default" id="rotate" data-deg="-90">Rotate</button> --}}
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
</div>
{{-- <label for="" class="control-label post_data_label" >Upload Image</label><span class="colorRed"> *</span><br>
<div class="" style="text-align:center">
<img class="old_profile_imageSub" src="{{ URL::asset('/resources/assets/custom/default.png')}}" height="300" width="350"/>
</div>
<input required class="profile_image_showInput" type="file" id="main_image" name="main_image" accept="image/*" onchange="readURL(this);" aria-required="true" aria-label="Close" />
<span class="changeImage profilechangeImage"><i class="fa fa-edit"></i> Click Here To Upload Image</span> --}}
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="box" style="border-top:0">
<div class="box-footer">
<button style="margin-left: 20px;" type="button" id="cancelBtn" class="btn btn-default pull-right">Cancel</button>
<button type="submit" id="createBtn" class="btn btn-success pull-right" style="margin-left: 20px;">Create</button>
</div>
</div>
</div>
</form>
<!-- /.col -->
</div>
</section>
</div>
@endsection
@section('css')
<link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/prism.css')}}">
<link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/sweetalert.css')}}">
<link rel="stylesheet" href="{{ URL::asset('/resources/assets/custom/image_cropping/croppie.css')}}">
<style>
.profile_image_showInput {
opacity: 1;
cursor: pointer;
display: block;
margin-top: 15px;
height: 30px;
width: 100% ;
background-color: #269abc;
}
.changeImage {
background: #269abc none repeat scroll 0 0;
border-radius: 0px;
pointer-events: none;
display: block;
padding: 5px 15px;
bottom: 0;
color: #fff;
margin-top: -30px ;
margin: 0 auto;
width: 100%;
float: left;
left: 0;
position: relative;
text-align: center;
}
body, html, #beacon_canvas, #map_canvas,#map_canvas2,#map_canvas1{
/* position:absolute; */
height: 250px;
margin: 0;
}
#beacon_canvas .centerMarker, #map_canvas .centerMarker,#map_canvas2 .centerMarker2,#map_canvas1 .centerMarker1{
position:absolute;
/*url of the marker*/
background:url('https://maps.gstatic.com/mapfiles/markers2/marker.png') no-repeat;
/*center the marker*/
top:50%;
left:50%;
z-index:1;
/*fix offset when needed*/
margin-left:-10px;
margin-top:-34px;
/*size of the image*/
height:34px;
width:20px;
cursor:pointer;
}
#upload-demo{
height: 500px;
}
.cabinet figure{
text-align: center;
}
.old_profile_imageSub, #item-img-output{
/* height: 100%; */
max-width: 100%;
}
.control-label{
display: inline-block;
}
</style>
@endsection
@section('script')
<script src="{{URL::asset('resources/assets/custom/jQuery-validation-plugin/jquery.validate.js')}}"></script>
<script src="{{URL::asset('resources/assets/custom/jQuery-validation-plugin/additional-methods.js')}}"></script>
<script src="{{URL::asset('/resources/assets/custom/image_cropping/prism.js')}}"></script>
<script src="{{URL::asset('/resources/assets/custom/image_cropping/sweetalert.js')}}"></script>
<script src="{{URL::asset('/resources/assets/custom/image_cropping/croppie.js')}}"></script>
<script src="{{URL::asset('/resources/assets/custom/image_cropping/main.js')}}"></script>
<script src="{{URL::asset('/resources/assets/custom/image_cropping/exif.js')}}"></script>
@endsection
Note that you need to include the css and javascript of Croppie into your blade file.
Then, include the following script code into your blade file
<script type="text/javascript">
// Start upload preview image
var FLIP = 2;
var NORMAL = 1;
var orientation = NORMAL;
var $uploadCrop1, tempFilename, rawImg, imageId;
var fileTypes = ['jpg', 'jpeg', 'png'];
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var file = input.files[0]; // Get your file here
var fileExt = file.type.split('/')[1]; // Get the file extension
if (fileTypes.indexOf(fileExt) !== -1) {
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}else{
swal("Only JPEG, PNG, JPG file types are supported");
$(".item-img").val("");
}
}
else {
swal("Please select an image");
$("#main_image").val("");
$("#item-img-output").attr("src",SITE_URL + "/resources/assets/custom/default.png");
}
}
$uploadCrop1 = $('#upload-demo').croppie({
viewport: {
width: 480,
height: 270,
},
enableOrientation: true,
enforceBoundary: true,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
$uploadCrop1.croppie('bind', {
url: rawImg
}).then(function(){
$("span#main_image-error").hide();
});
});
$('#Flip').click(function() {
orientation = orientation == NORMAL ? FLIP : NORMAL;
$uploadCrop1.croppie('bind', {
url: rawImg,
orientation: orientation,
});
});
$('#rotate').click(function() {
$uploadCrop1.croppie('rotate', parseInt($(this).data('deg')));
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$("#cancelCropBtn").click(function(){
$(".item-img").val("");
$("#main_image").val("");
$("#item-img-output").attr("src",SITE_URL + "/resources/assets/custom/default.png");
});
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop1.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 480, height: 270}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#main_image').attr('value', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
</script>
Add this code in your controller for upload file
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Input;
use Image;
use File;
use DB;
use URL;
use Yajra\DataTables\Facades\DataTables;
use App\Helper\GlobalHelper;
use Auth;
use Intervention\Image\ImageManagerStatic as ImageResize;
class CropImageController extends Controller
{
public function uploadCropImage(Request $request)
{
if(!empty($request->main_image) || $request->main_image != ''){
$data = explode(';', $request->main_image);
$part = explode("/", $data[0]);
$image = $request->main_image; // your base64 encoded
$image = str_replace('data:image/'.$part[1].';base64,', '', $image);
$image = str_replace(' ', '+', $image);
$fileName = md5(microtime().str_random(10)) .'.'.$part[1];
$destinationPath = base_path().'/resources/uploads/';
\File::put(base_path().'/resources/uploads/' .$fileName, base64_decode($image));
chmod($destinationPath.$fileName,0777);
$image = url('/').'/resources/uploads/'.$fileName;
}
return response()->json(['status'=>true]);
}
}
After followed successfully you must have to create “upload” folder with full permissions
In the digital age, understanding the hidden forces driving user behavior is essential. By strategically…
What is haptics? Haptics refers to the use of touch feedback technology to simulate…
In today's fast-paced and technologically driven world, businesses are constantly seeking innovative ways to stay…
The Garden State, more popularly known as New Jersey, is not only known for its…
In today's digital age, mobile apps have become an indispensable tool for businesses across all…
In today's digital era, a seamless and enjoyable user experience is crucial for the success…