aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/examples/customize-preview.html
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/examples/customize-preview.html')
-rw-r--r--library/cropperjs/examples/customize-preview.html123
1 files changed, 0 insertions, 123 deletions
diff --git a/library/cropperjs/examples/customize-preview.html b/library/cropperjs/examples/customize-preview.html
deleted file mode 100644
index ea1c24b88..000000000
--- a/library/cropperjs/examples/customize-preview.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!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="../dist/cropper.css">
- <style>
- .container {
- max-width: 960px;
- margin: 20px auto;
- }
-
- 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="../docs/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="../dist/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 (e) {
- var data = e.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>