Cropper.js / Улучшение / Плагины Bootstrap

Версия: v1.0.0-alpha

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 699.9 Kb

Уникальный ID: 1514

Посмотрели: 2440 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 58 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/fengyuanchen/cropperjs

Информация: Пользователям

Информация: Правообладателям

Теги: кадрирование, Plugin, генератор, онлайн, Bootstrap, Online, Cropper, Generate

Поделился: BootstrapТема

Добавлено: 2016-12-13 в 00:04

Метка: 1588865747

⇄ ⇅

<div class="container">
 <div class="row">
 <div class="col-md-9">
 
 <div class="img-container">
 <img src="https://pp.userapi.com/c637125/v637125900/184b7/k9BL6TkH_5w.jpg" alt="Picture">
 </div>
 </div>
 <div class="col-md-3">
 
 <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>

<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">
 
 <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(&quot;move&quot;)">
 <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(&quot;crop&quot;)">
 <span class="fa fa-crop"></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="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
 <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 160, height: 90 })">
 160&times;90
 </span>
 </button>
 <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
 <span class="docs-tooltip" data-toggle="tooltip" title="cropper.getCroppedCanvas({ width: 320, height: 180 })">
 320&times;180
 </span>
 </button>
 </div>

<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">&times;</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.jpg">Download</a>
 </div>
 </div>
 </div>
 </div>

<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>

<div class="col-md-3 docs-toggles">
 
 <div class="btn-group docs-aspect-ratios" 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="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>

</div>
 </div>
 </div>

BootstrapTema

Cropper.js

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0