diff options
Diffstat (limited to 'library/cropperjs/docs/examples')
14 files changed, 1090 insertions, 0 deletions
diff --git a/library/cropperjs/docs/examples/a-range-of-aspect-ratio.html b/library/cropperjs/docs/examples/a-range-of-aspect-ratio.html new file mode 100644 index 000000000..37f414cbb --- /dev/null +++ b/library/cropperjs/docs/examples/a-range-of-aspect-ratio.html @@ -0,0 +1,70 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Cropper with a range of aspect ratio</h1> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var minAspectRatio = 0.5; + var maxAspectRatio = 1.5; + var cropper = new Cropper(image, { + ready: function () { + var cropper = this.cropper; + var containerData = cropper.getContainerData(); + var cropBoxData = cropper.getCropBoxData(); + var aspectRatio = cropBoxData.width / cropBoxData.height; + var newCropBoxWidth; + + if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) { + newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2); + + cropper.setCropBoxData({ + left: (containerData.width - newCropBoxWidth) / 2, + width: newCropBoxWidth + }); + } + }, + + cropmove: function () { + var cropper = this.cropper; + var cropBoxData = cropper.getCropBoxData(); + var aspectRatio = cropBoxData.width / cropBoxData.height; + + if (aspectRatio < minAspectRatio) { + cropper.setCropBoxData({ + width: cropBoxData.height * minAspectRatio + }); + } else if (aspectRatio > maxAspectRatio) { + cropper.setCropBoxData({ + width: cropBoxData.height * maxAspectRatio + }); + } + }, + }); + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/crop-a-round-image.html b/library/cropperjs/docs/examples/crop-a-round-image.html new file mode 100644 index 000000000..095ac2244 --- /dev/null +++ b/library/cropperjs/docs/examples/crop-a-round-image.html @@ -0,0 +1,94 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + + .cropper-view-box, + .cropper-face { + border-radius: 50%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Crop a round image</h1> + <h3>Image</h3> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <h3>Result</h3> + <p> + <button type="button" id="button">Crop</button> + </p> + <div id="result"></div> + </div> + <script src="../js/cropper.js"></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 button = document.getElementById('button'); + var result = document.getElementById('result'); + var croppable = false; + var cropper = new Cropper(image, { + aspectRatio: 1, + viewMode: 1, + ready: function () { + croppable = true; + }, + }); + + 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> diff --git a/library/cropperjs/docs/examples/crop-cross-origin-image.html b/library/cropperjs/docs/examples/crop-cross-origin-image.html new file mode 100644 index 000000000..23f75bec0 --- /dev/null +++ b/library/cropperjs/docs/examples/crop-cross-origin-image.html @@ -0,0 +1,48 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Crop a cross origin image</h1> + <p>A cross origin image with a <code>crossorigin</code> attribute and an available <code>Access-Control-Allow-Origin</code> response header can be cropped by Cropper.</p> + <h3>Image</h3> + <div> + <img id="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" crossorigin> + </div> + <h3>Result</h3> + <div id="result"></div> + </div> + + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var result = document.querySelector('#result'); + var cropper = new Cropper(image, { + ready: function () { + var image = new Image(); + + image.src = cropper.getCroppedCanvas().toDataURL('image/jpeg'); + result.appendChild(image); + }, + }); + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/crop-on-canvas.html b/library/cropperjs/docs/examples/crop-on-canvas.html new file mode 100644 index 000000000..d4a58583c --- /dev/null +++ b/library/cropperjs/docs/examples/crop-on-canvas.html @@ -0,0 +1,62 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Crop on canvas with Cropper</h1> + <h3>Image</h3> + <div class="img-container"> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <h3>Canvas</h3> + <div class="img-container"> + <canvas id="canvas"></canvas> + </div> + </div> + + <script src="../js/cropper.js"></script> + <script> + function start() { + var width = this.offsetWidth; + var height = this.offsetHeight; + var cropper; + + canvas.width = width; + canvas.height = height; + canvas.getContext('2d').drawImage( + this, + 0, 0, this.naturalWidth, this.naturalHeight, + 0, 0, width, height + ); + cropper = new Cropper(canvas); + } + + window.addEventListener('DOMContentLoaded', function () { + var canvas = document.getElementById('canvas'); + var image = document.getElementById('image'); + + if (image.complete) { + start.call(image); + } else { + image.onload = start; + } + }); + </script> +</body> +</html> 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">×</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> diff --git a/library/cropperjs/docs/examples/customize-preview.html b/library/cropperjs/docs/examples/customize-preview.html new file mode 100644 index 000000000..72a108f8a --- /dev/null +++ b/library/cropperjs/docs/examples/customize-preview.html @@ -0,0 +1,122 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 960px; + } + + img { + max-width: 100%; + } + + .row, + .preview { + overflow: hidden; + } + + .col { + float: left; + } + + .col-6 { + width: 50%; + } + + .col-3 { + width: 25%; + } + + .col-2 { + width: 16.7%; + } + + .col-1 { + width: 8.3%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Customize preview for Cropper</h1> + <div class="row"> + <div class="col col-6"> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <div class="col col-3"> + <div class="preview"></div> + </div> + <div class="col col-2"> + <div class="preview"></div> + </div> + <div class="col col-1"> + <div class="preview"></div> + </div> + </div> + </div> + + <script src="../js/cropper.js"></script> + <script> + function each(arr, callback) { + var length = arr.length; + var i; + + for (i = 0; i < length; i++) { + callback.call(arr, arr[i], i, arr); + } + + return arr; + } + + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var previews = document.querySelectorAll('.preview'); + var cropper = new Cropper(image, { + ready: function () { + var clone = this.cloneNode(); + + clone.className = ''; + clone.style.cssText = ( + 'display: block;' + + 'width: 100%;' + + 'min-width: 0;' + + 'min-height: 0;' + + 'max-width: none;' + + 'max-height: none;' + ); + + each(previews, function (elem) { + elem.appendChild(clone.cloneNode()); + }); + }, + + crop: function (event) { + var data = event.detail; + var cropper = this.cropper; + var imageData = cropper.getImageData(); + var previewAspectRatio = data.width / data.height; + + each(previews, function (elem) { + var previewImage = elem.getElementsByTagName('img').item(0); + var previewWidth = elem.offsetWidth; + var previewHeight = previewWidth / previewAspectRatio; + var imageScaledRatio = data.width / previewWidth; + + elem.style.height = previewHeight + 'px'; + previewImage.style.width = imageData.naturalWidth / imageScaledRatio + 'px'; + previewImage.style.height = imageData.naturalHeight / imageScaledRatio + 'px'; + previewImage.style.marginLeft = -data.x / imageScaledRatio + 'px'; + previewImage.style.marginTop = -data.y / imageScaledRatio + 'px'; + }); + }, + }); + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/fixed-crop-box.html b/library/cropperjs/docs/examples/fixed-crop-box.html new file mode 100644 index 000000000..d2f11f535 --- /dev/null +++ b/library/cropperjs/docs/examples/fixed-crop-box.html @@ -0,0 +1,46 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Cropper with fixed crop box</h1> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var cropper = new Cropper(image, { + dragMode: 'move', + aspectRatio: 16 / 9, + autoCropArea: 0.65, + restore: false, + guides: false, + center: false, + highlight: false, + cropBoxMovable: false, + cropBoxResizable: false, + toggleDragModeOnDblclick: false, + }); + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/full-crop-box.html b/library/cropperjs/docs/examples/full-crop-box.html new file mode 100644 index 000000000..fe0bdd8e1 --- /dev/null +++ b/library/cropperjs/docs/examples/full-crop-box.html @@ -0,0 +1,46 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Cropper with full crop box</h1> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var cropper = new Cropper(image, { + viewMode: 3, + dragMode: 'move', + autoCropArea: 1, + restore: false, + modal: false, + guides: false, + highlight: false, + cropBoxMovable: false, + cropBoxResizable: false, + toggleDragModeOnDblclick: false, + }); + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/mask-an-image.html b/library/cropperjs/docs/examples/mask-an-image.html new file mode 100644 index 000000000..9236ac451 --- /dev/null +++ b/library/cropperjs/docs/examples/mask-an-image.html @@ -0,0 +1,108 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + + .cropper-view-box, + .cropper-face { + background-color: black; + opacity: 1; + } + + </style> +</head> +<body> + <div class="container"> + <h1>Mask an image (Redaction)</h1> + <h3>Image</h3> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <h3>Result</h3> + <p><button type="button" id="button">Mask</button></p> + <div id="result"></div> + </div> + <script src="../js/cropper.js"></script> + <script> + function getMaskedCanvas(sourceCanvas, sourceImage, cropper) { + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + var maskWidth = cropper.getData().width; + var maskHeight = cropper.getData().height; + var maskTop = cropper.getData().y; + var maskLeft = cropper.getData().x; + var imageWidth = cropper.getImageData().naturalWidth; + var imageHeight = cropper.getImageData().naturalHeight; + var imageLeft = cropper.getImageData().left; + var imageTop = cropper.getImageData().top; + var imageAspect = cropper.getImageData().aspectRatio; + + canvas.width = imageWidth; + canvas.height = imageHeight; + + // Debug + console.log('Image Width: ' + imageWidth + ' Image Height: ' + imageHeight + ' Image Aspect Ratio: ' + imageAspect ); + console.log('Image Left: ' + imageLeft + ' Image Top: ' + imageTop ); + console.log('Mask Width: ' + maskWidth + ' Mask Height: ' + maskHeight + ' Mask Left: ' + maskLeft + ' Mask Top: ' + maskTop); + + context.imageSmoothingEnabled = true; + context.drawImage(image, 0, 0, imageWidth, imageHeight); + context.fillRect(maskLeft, maskTop, maskWidth, maskHeight); + return canvas; + } + + window.addEventListener('DOMContentLoaded', function () { + var image = document.getElementById('image'); + var button = document.getElementById('button'); + var result = document.getElementById('result'); + var croppable = false; + var cropper = new Cropper(image, { + viewMode: 0, + guides: true, + center: true, + highlight: true, + cropBoxMovable: true, + cropBoxResizable: true, + ready: function () { + croppable = true; + }, + }); + + button.onclick = function () { + var croppedCanvas; + var maskedCanvas; + var maskedImage; + + if (!croppable) { + return; + } + + // Crop + croppedCanvas = cropper.getCroppedCanvas(); + + // Mask + maskedCanvas = getMaskedCanvas(croppedCanvas, image, cropper); + + // Show + maskedImage = document.createElement('img'); + maskedImage.src = maskedCanvas.toDataURL(); + result.innerHTML = ''; + result.appendChild(maskedImage); + }; + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/minimum-and-maximum-cropped-dimensions.html b/library/cropperjs/docs/examples/minimum-and-maximum-cropped-dimensions.html new file mode 100644 index 000000000..4c55fc327 --- /dev/null +++ b/library/cropperjs/docs/examples/minimum-and-maximum-cropped-dimensions.html @@ -0,0 +1,81 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Minimum and maximum cropped dimensions</h1> + <h3>Image</h3> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <p>Maximum Width: 640, Maximum Height: 320, Minimum Width: 320, Minimum Height: 160</p> + <p>Data: <span id="data"></span></p> + <h3>Result</h3> + <p> + <button type="button" id="button">Crop</button> + </p> + <div id="result"></div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var data = document.querySelector('#data'); + var button = document.getElementById('button'); + var result = document.getElementById('result'); + var minCroppedWidth = 320; + var minCroppedHeight = 160; + var maxCroppedWidth = 640; + var maxCroppedHeight = 320; + var cropper = new Cropper(image, { + viewMode: 3, + + data: { + width: (minCroppedWidth + maxCroppedWidth) / 2, + height: (minCroppedHeight + maxCroppedHeight) / 2, + }, + + crop: function (event) { + var width = event.detail.width; + var height = event.detail.height; + + if ( + width < minCroppedWidth + || height < minCroppedHeight + || width > maxCroppedWidth + || height > maxCroppedHeight + ) { + cropper.setData({ + width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)), + height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height)), + }); + } + + data.textContent = JSON.stringify(cropper.getData(true)); + }, + }); + + button.onclick = function () { + result.innerHTML = ''; + result.appendChild(cropper.getCroppedCanvas()); + }; + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/multiple-croppers.html b/library/cropperjs/docs/examples/multiple-croppers.html new file mode 100644 index 000000000..5ccc6c32b --- /dev/null +++ b/library/cropperjs/docs/examples/multiple-croppers.html @@ -0,0 +1,46 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Multiple Croppers</h1> + <h3>Cropper</h3> + <div> + <img src="../images/picture.jpg" alt="Picture"> + </div> + <h3>Another</h3> + <div> + <img src="../images/picture.jpg" alt="Picture"> + </div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var images = document.querySelectorAll('img'); + var length = images.length; + var croppers = []; + var i; + + for (i = 0; i < length; i++) { + croppers.push(new Cropper(images[i])); + } + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/one-to-one-crop-box.html b/library/cropperjs/docs/examples/one-to-one-crop-box.html new file mode 100644 index 000000000..1012262a1 --- /dev/null +++ b/library/cropperjs/docs/examples/one-to-one-crop-box.html @@ -0,0 +1,70 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>One to one crop box</h1> + <p>The image displays in its natural size, so the size of the crop box size equals real cropped size.</p> + <h3>Image</h3> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + <p>Data: <span id="data"></span></p> + <p>Crop Box Data: <span id="cropBoxData"></span></p> + <h3>Result</h3> + <p> + <button type="button" id="button">Crop</button> + </p> + <div id="result"></div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var data = document.querySelector('#data'); + var cropBoxData = document.querySelector('#cropBoxData'); + var button = document.getElementById('button'); + var result = document.getElementById('result'); + var cropper = new Cropper(image, { + ready: function (event) { + // Zoom the image to its natural size + cropper.zoomTo(1); + }, + + crop: function (event) { + data.textContent = JSON.stringify(cropper.getData()); + cropBoxData.textContent = JSON.stringify(cropper.getCropBoxData()); + }, + + zoom: function (event) { + // Keep the image in its natural size + if (event.detail.oldRatio === 1) { + event.preventDefault(); + } + }, + }); + + button.onclick = function () { + result.innerHTML = ''; + result.appendChild(cropper.getCroppedCanvas()); + }; + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/responsive-container.html b/library/cropperjs/docs/examples/responsive-container.html new file mode 100644 index 000000000..11f1cf7b6 --- /dev/null +++ b/library/cropperjs/docs/examples/responsive-container.html @@ -0,0 +1,47 @@ +<!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="../css/cropper.css"> + <style> + .container { + margin: 20px auto; + max-width: 640px; + } + + img { + width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Cropper with responsive container</h1> + <p> + <button type="button" id="replace">Replace Image</button> + </p> + <div> + <img id="image" src="../images/picture.jpg" alt="Picture"> + </div> + </div> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var image = document.querySelector('#image'); + var cropper = new Cropper(image, { + movable: false, + zoomable: false, + rotatable: false, + scalable: false + }); + + document.getElementById('replace').onclick = function () { + cropper.replace('../images/picture-2.jpg'); + }; + }); + </script> +</body> +</html> diff --git a/library/cropperjs/docs/examples/upload-cropped-image-to-server.html b/library/cropperjs/docs/examples/upload-cropped-image-to-server.html new file mode 100644 index 000000000..aef0ee58b --- /dev/null +++ b/library/cropperjs/docs/examples/upload-cropped-image-to-server.html @@ -0,0 +1,176 @@ +<!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.1.2/css/bootstrap.min.css"> + <link rel="stylesheet" href="../css/cropper.css"> + <style> + .label { + cursor: pointer; + } + + .progress { + display: none; + margin-bottom: 1rem; + } + + .alert { + display: none; + } + + .img-container img { + max-width: 100%; + } + </style> +</head> +<body> + <div class="container"> + <h1>Upload cropped image to server</h1> + <label class="label" data-toggle="tooltip" title="Change your avatar"> + <img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar"> + <input type="file" class="sr-only" id="input" name="image" accept="image/*"> + </label> + <div class="progress"> + <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> + </div> + <div class="alert" role="alert"></div> + <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">Crop the image</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="img-container"> + <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" id="crop">Crop</button> + </div> + </div> + </div> + </div> + </div> + <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script> + <script src="../js/cropper.js"></script> + <script> + window.addEventListener('DOMContentLoaded', function () { + var avatar = document.getElementById('avatar'); + var image = document.getElementById('image'); + var input = document.getElementById('input'); + var $progress = $('.progress'); + var $progressBar = $('.progress-bar'); + var $alert = $('.alert'); + var $modal = $('#modal'); + var cropper; + + $('[data-toggle="tooltip"]').tooltip(); + + input.addEventListener('change', function (e) { + var files = e.target.files; + var done = function (url) { + input.value = ''; + image.src = url; + $alert.hide(); + $modal.modal('show'); + }; + var reader; + var file; + var url; + + if (files && files.length > 0) { + file = files[0]; + + if (URL) { + done(URL.createObjectURL(file)); + } else if (FileReader) { + reader = new FileReader(); + reader.onload = function (e) { + done(reader.result); + }; + reader.readAsDataURL(file); + } + } + }); + + $modal.on('shown.bs.modal', function () { + cropper = new Cropper(image, { + aspectRatio: 1, + viewMode: 3, + }); + }).on('hidden.bs.modal', function () { + cropper.destroy(); + cropper = null; + }); + + document.getElementById('crop').addEventListener('click', function () { + var initialAvatarURL; + var canvas; + + $modal.modal('hide'); + + if (cropper) { + canvas = cropper.getCroppedCanvas({ + width: 160, + height: 160, + }); + initialAvatarURL = avatar.src; + avatar.src = canvas.toDataURL(); + $progress.show(); + $alert.removeClass('alert-success alert-warning'); + canvas.toBlob(function (blob) { + var formData = new FormData(); + + formData.append('avatar', blob, 'avatar.jpg'); + $.ajax('https://jsonplaceholder.typicode.com/posts', { + method: 'POST', + data: formData, + processData: false, + contentType: false, + + xhr: function () { + var xhr = new XMLHttpRequest(); + + xhr.upload.onprogress = function (e) { + var percent = '0'; + var percentage = '0%'; + + if (e.lengthComputable) { + percent = Math.round((e.loaded / e.total) * 100); + percentage = percent + '%'; + $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage); + } + }; + + return xhr; + }, + + success: function () { + $alert.show().addClass('alert-success').text('Upload success'); + }, + + error: function () { + avatar.src = initialAvatarURL; + $alert.show().addClass('alert-warning').text('Upload error'); + }, + + complete: function () { + $progress.hide(); + }, + }); + }); + } + }); + }); + </script> +</body> +</html> |