Created
May 31, 2019 06:00
-
-
Save Guley/85e1cb7ee0199447f9483dcacd8143ba to your computer and use it in GitHub Desktop.
Php Upload Image Crop plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Create a folder named as **uploads** | |
| # HTML | |
| <html lang="en"> | |
| <head> | |
| <title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="card" style="max-height: 500px;"> | |
| <div class="card-header bg-info"> jQuery - Crop Image 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> | |
| </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> | |
| </body> | |
| </html> | |
| # PHP FILE | |
| <?php | |
| $image = $_POST['image']; | |
| list($type, $image) = explode(';',$image); | |
| list(, $image) = explode(',',$image); | |
| $image = base64_decode($image); | |
| $image_name = time().'.png'; | |
| file_put_contents('uploads/'.$image_name, $image); | |
| echo 'successfully uploaded'; | |
| ?> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment