aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/docs/examples/cropper-in-modal.html
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/docs/examples/cropper-in-modal.html')
-rw-r--r--library/cropperjs/docs/examples/cropper-in-modal.html74
1 files changed, 74 insertions, 0 deletions
diff --git a/library/cropperjs/docs/examples/cropper-in-modal.html b/library/cropperjs/docs/examples/cropper-in-modal.html
new file mode 100644
index 000000000..f36ff4e4e
--- /dev/null
+++ b/library/cropperjs/docs/examples/cropper-in-modal.html
@@ -0,0 +1,74 @@
+<!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+ <link rel="stylesheet" href="../css/cropper.css">
+ <style>
+ .img-container img {
+ max-width: 100%;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Cropper in a Bootstrap modal</h1>
+
+ <!-- Button trigger modal -->
+ <button type="button" class="btn btn-primary" data-target="#modal" data-toggle="modal">
+ Launch the demo
+ </button>
+
+ <!-- Modal -->
+ <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="modalLabel">Cropper</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <div class="img-container">
+ <img id="image" src="../images/picture.jpg" alt="Picture">
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+ <script src="../js/cropper.js"></script>
+ <script>
+ window.addEventListener('DOMContentLoaded', function () {
+ var image = document.getElementById('image');
+ var cropBoxData;
+ var canvasData;
+ var cropper;
+
+ $('#modal').on('shown.bs.modal', function () {
+ cropper = new Cropper(image, {
+ autoCropArea: 0.5,
+ ready: function () {
+ //Should set crop box data first here
+ cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
+ }
+ });
+ }).on('hidden.bs.modal', function () {
+ cropBoxData = cropper.getCropBoxData();
+ canvasData = cropper.getCanvasData();
+ cropper.destroy();
+ });
+ });
+ </script>
+</body>
+</html>