Орла
Области
Компаний
Пользователи
Галерея
Фиксированные новости
Орла
Отзывы о фирмах
Тарифы
Пользователи
Области
Банкоматы
Торговые точки
Доска объявлений
Курсы валют
Скидки
организации Орла
организации области
товары
сайты
сайты Орел
Данные
Разделы
Поиск
Поиск запросы
Статистика
Показы каталога организаций
Статистика клиенты
Пользователи
Сайты
Управление сайтом
Анкета
Аптеки
Афиша
Афиша новая
Баннеры
Бизнес >
Викторина
Голосование
Гость на сайте
Истории
Календарь событий
Каталоги >
Конкурс красоты
Конкурс аудио
Консультации
Меню
Новое на сайте
Новости >
Организации >
Программа ТВ
Публикации
Разделы сайта
Рассылка
Рестораны
Секрет фирмы >
Сервисы >
Ссылки
Тесты
Файловый менеджер
Форум
Фотогалерея
Обратная связь
Недвижимость
Новый год
Тексты
Пользователи
Юридический рейтинг
Отзывы на товары
Бан пользователей
Жалобы
Новые тесты
Коронавирус
Файловый менеджер
Имя файла
index.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"> <meta name="description" content="JavaScript image cropper."> <meta name="keywords" content="HTML, CSS, JS, JavaScript, image cropping, cropper, cropperjs, cropper.js, front-end, web development"> <meta name="author" content="Fengyuan Chen"> <title>Cropper.js</title> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="css/cropper.min.css"> <link rel="stylesheet" href="css/main.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Header --> <header class="navbar navbar-static-top docs-header" id="top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="./">Cropper.js</a> </div> <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://github.com/fengyuanchen/cropperjs/tree/v0.5.6/README.md">Docs</a></li> <li><a href="http://fengyuanchen.github.io/photo-editor" title="An advanced example of Cropper.js">Photo Editor</a></li> <li><a href="https://github.com/fengyuanchen/cropperjs">GitHub</a></li> <li><a href="https://github.com/fengyuanchen/cropper" title="Cropper as jQuery plugin">Cropper</a></li> <li><a href="http://chenfengyuan.com">About</a></li> <li><a href="http://fengyuanchen.github.io">More</a></li> </ul> </nav> </div> </header> <!-- Jumbotron --> <div class="jumbotron docs-jumbotron"> <div class="container"> <h1>Cropper.js <small class="version">v0.5.6</small></h1> <p class="lead">JavaScript image cropper.</p> <div class="docs-carbonads-container"> <div class="docs-carbonads"> <script type="text/javascript" id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cropperjscom" async></script> </div> </div> </div> </div> <!-- Content --> <div class="container"> <div class="row"> <div class="col-md-9"> <!-- <h3 class="page-header">Demo:</h3> --> <div class="img-container"> <img src="img/picture.jpg" alt="Picture"> </div> </div> <div class="col-md-3"> <!-- <h3 class="page-header">Preview:</h3> --> <div class="docs-preview clearfix"> <div class="img-preview preview-lg"></div> <div class="img-preview preview-md"></div> <div class="img-preview preview-sm"></div> <div class="img-preview preview-xs"></div> </div> <!-- <h3 class="page-header">Data:</h3> --> <div class="docs-data"> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataX">X</label> <input type="text" class="form-control" id="dataX" placeholder="x"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataY">Y</label> <input type="text" class="form-control" id="dataY" placeholder="y"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataWidth">Width</label> <input type="text" class="form-control" id="dataWidth" placeholder="width"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataHeight">Height</label> <input type="text" class="form-control" id="dataHeight" placeholder="height"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataRotate">Rotate</label> <input type="text" class="form-control" id="dataRotate" placeholder="rotate"> <span class="input-group-addon">deg</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleX">ScaleX</label> <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX"> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleY">ScaleY</label> <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY"> </div> </div> </div> </div> <div class="row" id="actions"> <div class="col-md-9 docs-buttons"> <!-- <h3 class="page-header">Toolbar:</h3> --> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setDragMode("move")"> <span class="fa fa-arrows"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setDragMode("crop")"> <span class="fa fa-crop"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(0.1)"> <span class="fa fa-search-plus"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoom(-0.1)"> <span class="fa fa-search-minus"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(-10, 0)"> <span class="fa fa-arrow-left"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(10, 0)"> <span class="fa fa-arrow-right"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, -10)"> <span class="fa fa-arrow-up"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.move(0, 10)"> <span class="fa fa-arrow-down"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(-45)"> <span class="fa fa-rotate-left"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(45)"> <span class="fa fa-rotate-right"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleX(-1)"> <span class="fa fa-arrows-h"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.scaleY(-1)"> <span class="fa fa-arrows-v"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.crop()"> <span class="fa fa-check"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="clear" title="Clear"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.clear()"> <span class="fa fa-remove"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="disable" title="Disable"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.disable()"> <span class="fa fa-lock"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="enable" title="Enable"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.enable()"> <span class="fa fa-unlock"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.reset()"> <span class="fa fa-refresh"></span> </span> </button> <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file"> <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*"> <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs"> <span class="fa fa-upload"></span> </span> </label> <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.destroy()"> <span class="fa fa-power-off"></span> </span> </button> </div> <div class="btn-group btn-group-crop"> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas()"> Get Cropped Canvas </span> </button> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 160, height: 90 })"> 160×90 </span> </button> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 320, height: 180 })"> 320×180 </span> </button> </div> <!-- Show the cropped image in modal --> <div class="modal fade docs-cropped" id="getCroppedCanvasModal" role="dialog" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.png">Download</a> </div> </div> </div> </div><!-- /.modal --> <button type="button" class="btn btn-primary" data-method="getData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getData()"> Get Data </span> </button> <button type="button" class="btn btn-primary" data-method="setData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setData(data)"> Set Data </span> </button> <button type="button" class="btn btn-primary" data-method="getContainerData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getContainerData()"> Get Container Data </span> </button> <button type="button" class="btn btn-primary" data-method="getImageData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getImageData()"> Get Image Data </span> </button> <button type="button" class="btn btn-primary" data-method="getCanvasData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCanvasData()"> Get Canvas Data </span> </button> <button type="button" class="btn btn-primary" data-method="setCanvasData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setCanvasData(data)"> Set Canvas Data </span> </button> <button type="button" class="btn btn-primary" data-method="getCropBoxData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCropBoxData()"> Get Crop Box Data </span> </button> <button type="button" class="btn btn-primary" data-method="setCropBoxData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.setCropBoxData(data)"> Set Crop Box Data </span> </button> <button type="button" class="btn btn-primary" data-method="moveTo" data-option="0"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.moveTo(0)"> 0,0 </span> </button> <button type="button" class="btn btn-primary" data-method="zoomTo" data-option="1"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoomTo(1)"> 100% </span> </button> <button type="button" class="btn btn-primary" data-method="rotateTo" data-option="180"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(180)"> 180В° </span> </button> <input type="text" class="form-control" id="putData" placeholder="Get data to here or set data with this value"> </div><!-- /.docs-buttons --> <div class="col-md-3 docs-toggles"> <!-- <h3 class="page-header">Toggles:</h3> --> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.7777777777777777"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9"> 16:9 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1.3333333333333333"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3"> 4:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="1"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1"> 1:1 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="0.6666666666666666"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3"> 2:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio5" name="aspectRatio" value="NaN"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN"> Free </span> </label> </div> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 0"> VM0 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 1"> VM1 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 2"> VM2 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 3"> VM3 </span> </label> </div> <div class="dropdown dropup docs-options"> <button type="button" class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" data-toggle="dropdown" aria-expanded="true"> Toggle Options <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="toggleOptions"> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="responsive" checked> responsive </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="restore" checked> restore </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="checkCrossOrigin" checked> checkCrossOrigin </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="checkOrientation" checked> checkOrientation </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="modal" checked> modal </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="guides" checked> guides </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="center" checked> center </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="highlight" checked> highlight </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="background" checked> background </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="autoCrop" checked> autoCrop </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="movable" checked> movable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="rotatable" checked> rotatable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="scalable" checked> scalable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomable" checked> zoomable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomOnTouch" checked> zoomOnTouch </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomOnWheel" checked> zoomOnWheel </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="cropBoxMovable" checked> cropBoxMovable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="cropBoxResizable" checked> cropBoxResizable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="toggleDragModeOnDblclick" checked> toggleDragModeOnDblclick </label> </li> </ul> </div><!-- /.dropdown --> <a class="btn btn-default btn-block" data-toggle="tooltip" href="https://fengyuanchen.github.io/cropper" title="Cropper as jQuery plugin">Cropper</a> </div><!-- /.docs-toggles --> </div> </div> <!-- Footer --> <footer class="docs-footer"> <div class="container"> <p class="heart"></p> <ul class="list-inline links"> <li><a href="https://github.com/fengyuanchen/cropperjs/tree/master/examples">Examples</a></li> <li><a href="https://github.com/fengyuanchen/cropperjs/releases">Releases</a></li> <li><a href="https://github.com/fengyuanchen/cropperjs/issues">Issues</a></li> <li><a href="https://github.com/fengyuanchen/cropperjs/blob/master/LICENSE">License</a></li> </ul> </div> </footer> <!-- Scripts --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://fengyuanchen.github.io/js/common.js"></script> <script src="js/cropper.min.js"></script> <script src="js/main.js"></script> <script> // (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ // (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), // m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) // })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // ga('create', 'UA-48260255-2', 'auto'); // ga('send', 'pageview'); </script> </body> </html>
/plugins/crop/docs/
Имя
Дата
Размер
..
2016-02-17
css
2016-02-17
js
2016-02-17
apple-touch-icon.png
2016-02-17
4 кб.
favicon.ico
2016-02-17
236 байт
index.html
2025-04-01
25 кб.
index.html~
2016-02-17
25 кб.
/plugins/crop/docs
Загрузить файлы
Файл 1
Файл 2
Файл 3