Created
November 23, 2022 00:28
-
-
Save jiyongcheng/ed187ca1ef32f5d022b30093aaba260e to your computer and use it in GitHub Desktop.
Cropperjs with bootstrap 5.2 modal example
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Cropper.js</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <style> | |
| .img-container img { | |
| max-width: 100%; | |
| } | |
| .container { | |
| margin: 20px auto; | |
| max-width: 640px; | |
| } | |
| .cropper-view-box, | |
| .cropper-face { | |
| border-radius: 50%; | |
| } | |
| /* The css styles for `outline` do not follow `border-radius` on iOS/Safari (#979). */ | |
| .cropper-view-box { | |
| outline: 0; | |
| box-shadow: 0 0 0 1px #39f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Cropper in a Bootstrap modal</h1> | |
| <!-- Button trigger modal --> | |
| <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> | |
| Launch demo modal | |
| </button> | |
| <!-- Modal --> | |
| <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="img-container"> | |
| <img id="image" src="{{Storage::url('upload/image/202211/x6d5A3MSh2kkyvJC4Hwz3GzdGoyZOxwR7Wane8jp.jpg')}}" alt="Picture"> | |
| </div> | |
| <h3>Result</h3> | |
| <p> | |
| <button type="button" id="button">Crop</button> | |
| </p> | |
| <div id="result"></div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Save changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script> | |
| function getRoundedCanvas(sourceCanvas) { | |
| var canvas = document.createElement('canvas'); | |
| var context = canvas.getContext('2d'); | |
| var width = sourceCanvas.width; | |
| var height = sourceCanvas.height; | |
| canvas.width = width; | |
| canvas.height = height; | |
| context.imageSmoothingEnabled = true; | |
| context.drawImage(sourceCanvas, 0, 0, width, height); | |
| context.globalCompositeOperation = 'destination-in'; | |
| context.beginPath(); | |
| context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true); | |
| context.fill(); | |
| return canvas; | |
| } | |
| window.addEventListener('DOMContentLoaded', function () { | |
| var image = document.getElementById('image'); | |
| var cropBoxData; | |
| var canvasData; | |
| var cropper; | |
| var croppable = false; | |
| $('#exampleModal').on('shown.bs.modal', function () { | |
| cropper = new Cropper(image, { | |
| aspectRatio: 1, | |
| viewMode: 1, | |
| autoCropArea: 0.5, | |
| ready: function () { | |
| //Should set crop box data first here | |
| croppable = true; | |
| cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData); | |
| } | |
| }); | |
| }).on('hidden.bs.modal', function () { | |
| cropBoxData = cropper.getCropBoxData(); | |
| canvasData = cropper.getCanvasData(); | |
| cropper.destroy(); | |
| }); | |
| var button = document.getElementById('button'); | |
| var result = document.getElementById('result'); | |
| button.onclick = function () { | |
| var croppedCanvas; | |
| var roundedCanvas; | |
| var roundedImage; | |
| if (!croppable) { | |
| return; | |
| } | |
| // Crop | |
| croppedCanvas = cropper.getCroppedCanvas(); | |
| // Round | |
| roundedCanvas = getRoundedCanvas(croppedCanvas); | |
| // Show | |
| roundedImage = document.createElement('img'); | |
| roundedImage.src = roundedCanvas.toDataURL() | |
| result.innerHTML = ''; | |
| result.appendChild(roundedImage); | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment