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

Компаний

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

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

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

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

Банкоматы

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

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

Курсы валют

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

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

сайты Орел

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

Статистика

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

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

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

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

Каталоги >

Новости >

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

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

Сервисы >

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

Имя файла	crop-a-round-image.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: 640px; margin: 20px auto; } 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="../assets/img/picture.jpg" alt="Picture"> </div> <h3>Result</h3> <p> <button type="button" id="button">Crop</button> </p> <div id="result"></div> </div> <script src="../dist/cropper.js"></script> <script> (function () { 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.beginPath(); context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI); context.strokeStyle = 'rgba(0,0,0,0)'; context.stroke(); context.clip(); context.drawImage(sourceCanvas, 0, 0, width, height); 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, built: 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>

/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