Управление сайтом

Компаний

Пользователи

Фиксированные новости

Отзывы о фирмах

Пользователи

Банкоматы

Торговые точки

Доска объявлений

Курсы валют

организации Орла

организации области

сайты Орел

Поиск запросы

Статистика

Показы каталога организаций

Статистика клиенты

Пользователи

Управление сайтом

Каталоги >

Новости >

Организации >

Секрет фирмы >

Сервисы >

Файловый менеджер

Имя файла	customize-preview.html
Содержимое	<!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"> <title>Cropper.js</title> <link rel="stylesheet" href="../dist/cropper.css"> <style> .container { max-width: 960px; margin: 20px auto; } .img-container { width: 100%; max-height: 450px; } .img-container img { max-width: 100%; } .img-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> <h3>Cropper</h3> <div class="row"> <div class="col col-6 img-container"> <img id="image" src="../assets/img/picture.jpg" alt="Picture"> </div> <div class="col col-3 img-preview"></div> <div class="col col-2 img-preview"></div> <div class="col col-1 img-preview"></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('.img-container > img'); var previews = document.querySelectorAll('.img-preview'); var cropper = new Cropper(image, { build: function () { var clone = this.cloneNode(); clone.style.cssText = ( 'display: block;' + 'width: 100%;' + 'minWidth: 0;' + 'minHeight: 0;' + 'maxWidth: none;' + 'maxHeight: none;' ); each(previews, function (elem) { elem.appendChild(clone.cloneNode()); }); }, crop: function (data) { 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>

/plugins/crop/examples/

Имя	Дата	Размер
..	2016-02-17
a-range-of-aspect-ratio.html	2016-02-17	2 кб.
crop-a-round-image.html	2016-02-17	2 кб.
crop-on-canvas.html	2016-02-17	1 кб.
cropper-in-modal.html	2016-02-17	2 кб.
customize-preview.html	2016-02-17	3 кб.
fixed-crop-box.html	2016-02-17	1 кб.
full-crop-box.html	2016-02-17	1 кб.
multiple-croppers.html	2016-02-17	1 кб.
responsive-container.html	2016-02-17	1 кб.

/plugins/crop/examples