cropperjs
v1.6.2
JavaScript Image Cropper. Это ветвь для V1.x, для V2.x, проверьте ветвь
v2.
dist/
├── cropper.css
├── cropper.min.css (compressed)
├── cropper.js (UMD)
├── cropper.min.js (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js (ES Module)
npm install cropperjsВ браузере:
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJS обеспечивает поддержку CDN для CSS и JavaScript от Cropper.js. Вы можете найти ссылки здесь.
new Cropper ( element [ , options ] )элемент
HTMLImageElement или HTMLCanvasElementпараметры (необязательно)
Object <!-- Wrap the image or canvas element with a block element (container) -->
< div >
< img id =" image " src =" picture.jpg " >
</ div > /* Make sure the size of the image fits perfectly into the container */
img {
display : block;
/* This rule is very important, please don't ignore this */
max-width : 100 % ;
} // import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs' ;
const image = document . getElementById ( 'image' ) ;
const cropper = new Cropper ( image , {
aspectRatio : 16 / 9 ,
crop ( event ) {
console . log ( event . detail . x ) ;
console . log ( event . detail . y ) ;
console . log ( event . detail . width ) ;
console . log ( event . detail . height ) ;
console . log ( event . detail . rotate ) ;
console . log ( event . detail . scaleX ) ;
console . log ( event . detail . scaleY ) ;
} ,
} ) ; Как обрезать новую область после увеличения или масштабирования?
Просто дважды щелкните мышью, чтобы войти в режим обрезки.
Как переместить изображение после обрезки области?
Просто дважды щелкните мышью, чтобы войти в режим перемещения.
Как исправить соотношение сторон в режиме бесплатного соотношения?
Просто удерживайте ключ
Shift, когда вы измените размер коробки.
Как обрезать квадратную область в режиме бесплатного соотношения?
Просто держите ключ
Shift, когда вы обнимаете изображение.
Размер уходов наследует от размера родительского элемента изображения (обертка), поэтому обязательно оберните изображение видимым элементом блока .
Если вы используете Cropper в модале, вы должны инициализировать Cropper после того, как модал будет полностью показан. В противном случае, вы не получите правильного урожая.
Выводимые обрезанные данные основаны на исходном размере изображения, поэтому вы можете использовать их для непосредственного обрезка изображения.
Если вы попытаетесь запустить Cropper на образе перекрестного происхождения, пожалуйста, убедитесь, что ваш браузер поддерживает атрибуты настроек HTML5 CORS, а ваш сервер изображений поддерживает опцию Access-Control-Allow-Origin (см. Контроль доступа HTTP (CORS)).
Известные ограничения ресурсов iOS: поскольку устройства iOS ограничивают память, браузер может сбое, когда вы обрезаете большое изображение (разрешение камеры iPhone). Чтобы избежать этого, вы можете сначала изменить размер изображения (предпочтительно ниже 1024 пикселей), прежде чем запустить обрезку.
Увеличение размера изображения: при экспорте обрезанного изображения на стороне браузера с помощью метода HTMLCanvasElement.toDataURL размер экспортированного изображения может быть больше исходного изображения. Это связано с тем, что тип экспортированного изображения не совпадает с исходным изображением. Так что просто передайте оригинальный тип изображения в качестве первого параметра toDataURL , чтобы исправить это. Например, если исходный тип - JPEG, то используйте cropper.getCroppedCanvas().toDataURL('image/jpeg') для экспорта изображения.
⬆ Вернуться к вершине
Вы можете установить варианты Cropper с new Cropper(image, options) . Если вы хотите изменить глобальные параметры по умолчанию, вы можете использовать Cropper.setDefaults(options) .
Number00 : нет ограничений1 : Ограничьте коробку для обрезки, чтобы не превышать размер холста.2 : ограничить минимальный размер холста, чтобы соответствовать контейнеру. Если пропорции холста и контейнер различаются, минимальный холст будет окружен дополнительным пространством в одном из измерений.3 : Ограничьте минимальный размер холста, чтобы заполнить контейнер. Если пропорции холста и контейнер различаются, контейнер не сможет соответствовать целому холсту в одном из измерений. Определите режим просмотра Cropper. Если вы установите viewMode на 0 , ящик для обрезки может простираться за пределы холста, в то время как значение 1 , 2 или 3 ограничит ящик обрезки до размера холста. viewMode 2 или 3 дополнительно ограничит холст контейнером. Нет разницы между 2 и 3 , когда пропорции холста и контейнера одинаковы.
String'crop''crop' : создайте новую коробку для обрезки'move' : переместите холст'none' : ничего не делайОпределите режим перетаскивания урожая.
NumberNaNОпределите начальное соотношение сторон коробки для обрезки. По умолчанию это то же самое, что и соотношение сторон (обертка изображения).
Доступно только тогда, когда опция
aspectRatioустановлена наNaN.
NumberNaNОпределите фиксированное соотношение сторон коробки. По умолчанию ящик для обрезки имеет бесплатное соотношение.
Objectnull Предыдущие обрезанные вами данные автоматически передаются в метод setData при инициализации.
Доступно только тогда, когда опция
autoCropбыла установлена наtrue.
Element , Array (элементы), NodeList или String (селектор)''Добавьте дополнительные элементы (контейнеры) для предварительного просмотра.
Примечания:
aspectRatio , обязательно установите одно и то же соотношение сторон к предварительному контейнеру.overflow: hidden стиль в контейнер предварительного просмотра.BooleantrueПовторно заполните урожая при изменении размера окна.
BooleantrueВосстановите укороченную область после изменения размера окна.
BooleantrueПроверьте, является ли текущее изображение перекрестным изображением.
Если это так, в клонированный элемент изображения будет добавлен атрибут crossOrigin , а в атрибут src будет добавлен параметр TimeStamp, чтобы перезагрузить исходное изображение, чтобы избежать ошибки кэша браузера.
Добавление атрибута crossOrigin в элемент изображения перестанет добавлять метку времени в URL -адрес изображения и остановить перезагрузку изображения. Но запрос (xmlhttprequest) для прочтения данных изображения для проверки ориентации потребует метки времени, чтобы разрушить кэш, чтобы избежать ошибки кэша браузера. Вы можете установить опцию checkOrientation для false , чтобы отменить этот запрос.
Если значением атрибута crossOrigin изображения является "use-credentials" , то атрибут withCredentials установит true при чтении данных изображения с помощью Xmlhttprequest.
BooleantrueПроверьте информацию о ориентации текущего изображения. Обратите внимание, что только изображение JPEG может содержать информацию о ориентации ESIF.
Точно, прочитайте значение ориентации для вращения или переворачивания изображения, а затем переопределите значение ориентации с помощью 1 (значение по умолчанию), чтобы избежать некоторых проблем (1, 2) на устройствах iOS.
Требуется установить как rotatable , так и scalable параметры true .
Примечание. Не доверяйте этому все время, так как некоторые изображения JPG могут иметь неверные (нестандартные) значения ориентации
Требуется поддержка напечатанных массивов (то есть 10+).
BooleantrueПокажите черный модал над изображением и под коробкой обрезки.
BooleantrueПокажите пунктирные линии над коробкой.
BooleantrueПокажите центральный индикатор над коробкой.
BooleantrueПокажите белый модал над коробкой для обрезки (выделите коробку для обрезки).
BooleantrueПокажите фон сетки контейнера.
BooleantrueПозвольте автоматически обрезать изображение при инициализации.
Number0.8 (80% изображения)Это должно быть число от 0 до 1. Определить размер площади автоматического обрезки (процент).
BooleantrueПозвольте переместить изображение.
BooleantrueВключите повернуть изображение.
BooleantrueВключить масштабировать изображение.
BooleantrueВключить масштаб изображения.
BooleantrueВключите масштаб изображения, перетаскивая прикосновение.
BooleantrueВключите масштаб изображения на мыше.
Number0.1Определите соотношение масштабирования при увеличении изображения за счет мыши.
BooleantrueПозвольте переместить коробку с обрезкой, перетаскивая.
BooleantrueПозвольте изменять размер коробки с обрезкой, перетаскивая.
Booleantrue Включите режим перетаскивания между "crop" и "move" когда дважды щелкнув на Cropper.
Требуется поддержка событий
dblclick.
Number200Минимальная ширина контейнера.
Number100Минимальная высота контейнера.
Number0Минимальная ширина холста (обертка изображения).
Number0Минимальная высота холста (обертка изображения).
Number0Минимальная ширина коробки для обрезки.
Примечание. Этот размер относительно страницы, а не с изображением.
Number0Минимальная высота коробки для обрезки.
Примечание. Этот размер относительно страницы, а не с изображением.
Functionnull Ярлык на ready мероприятие.
Functionnull Ярлык на мероприятие cropstart .
Functionnull Ярлык на мероприятие cropmove .
Functionnull Ярлык на мероприятие cropend .
Functionnull Ярлык до crop .
Functionnull Ярлык на событие zoom .
⬆ Вернуться к вершине
Поскольку при загрузке изображения есть асинхронный процесс, вы должны вызвать большинство методов после готовых , кроме setAspectRatio , replace и destroy .
Если метод не нуждается в возвращении какого -либо значения, он вернет экземпляр Cropper (
this) для цепной композиции.
new Cropper ( image , {
ready ( ) {
// this.cropper[method](argument1, , argument2, ..., argumentN);
this . cropper . move ( 1 , - 1 ) ;
// Allows chain composition
this . cropper . move ( 1 , - 1 ) . rotate ( 45 ) . scale ( 1 , - 1 ) ;
} ,
} ) ;Покажите коробку для обрезки вручную.
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;Сбросьте изображение и коробку обрезки в его начальные состояния.
Очистить коробку.
URL :
StringHassamesize (необязательно):
BooleanfalseЗамените SRC изображения и восстановите Cropper.
Включить (разморозить) урожай.
Отключить (заморозить) урожай.
Уничтожьте урожая и удалите экземпляр с изображения.
offsetx :
NumberOffSety (необязательно):
NumberoffsetX .Переместите холст (изображение обертки) с относительными смещениями.
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;x :
Numberleft значение холстаy (необязательно):
Numbertop значение холстаx .Переместите холст (обертка изображения) в абсолютную точку.
NumberУвеличьте холст (обертка изображения) с относительным соотношением.
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;соотношение :
NumberPivot (необязательно):
Object{ x: Number, y: Number }Увеличьте холст (обертка изображения) до абсолютного соотношения.
cropper . zoomTo ( 1 ) ; // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper . getContainerData ( ) ;
// Zoom to 50% from the center of the container.
cropper . zoomTo ( .5 , {
x : containerData . width / 2 ,
y : containerData . height / 2 ,
} ) ;NumberПоверните изображение в относительной степени.
Требует поддержки CSS3 2D Transforms (то есть 9+).
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;NumberПоверните изображение в абсолютной степени.
Scalex :
Number11 он ничего не делает.масштаб (необязательно):
NumberscaleX .Масштабировать изображение.
Требует поддержки CSS3 2D Transforms (то есть 9+).
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11 он ничего не делает.Масштабировать абсциссу изображения.
Number11 он ничего не делает.Масштабировать ординату изображения.
округлый (необязательно):
Booleanfalsetrue , чтобы получить округлые значения.(возвращаемое значение):
Objectx : смещение слева от обрезанной областиy : смещение вершины укороченной областиwidth : ширина укороченной областиheight : высота обрезанной областиrotate : вращающиеся градусы изображенияscaleX : коэффициент масштабирования, который применяется на абсциссе изображенияscaleY : коэффициент масштабирования, который применяется на ординате изображенияВыведите конечные данные о положении и размере площади обрезки (на основе естественного размера исходного изображения).
Вы можете отправить данные на сторону сервера, чтобы напрямую обрезать изображение:
- Поверните изображение со свойством
rotate.- Масштабируйте изображение с помощью
scaleXиscaleYсвойств.- Разберите изображение со свойствами
x,y,widthиheight.
ObjectgetData .Измените положение и размер обрезанной области с новыми данными (на основе исходного изображения).
Примечание. Этот метод доступен только тогда, когда значение опции
viewModeбольше или равно1.
Objectwidth : текущая ширина контейнераheight : текущая высота контейнераВывод данных по размеру контейнера.
Objectleft : смещение слева от изображенияtop : смещение верхней части изображенияwidth : ширина изображенияheight : высота изображенияnaturalWidth : естественная ширина изображенияnaturalHeight : естественная высота изображенияaspectRatio : соотношение сторон изображенияrotate : вращающиеся градусы изображения, если оно вращаетсяscaleX : коэффициент масштабирования, который применяется на абсциссе изображения, если масштабируетсяscaleY : коэффициент масштабирования, который применяется на ординате изображения, если масштабируетсяВывод позиции изображения, размер и другие связанные данные.
Objectleft : смещение слева от холстаtop : смещение вершины холстаwidth : ширина холстаheight : высота холстаnaturalWidth : естественная ширина холста (только читайте)naturalHeight : естественная высота холста (только читайте)Выведите данные о положении и размере Canvas (изображение).
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft : новое смещение слева от холстаtop : новая вершина холстаwidth : новая ширина холстаheight : новая высота холстаИзмените позицию и размер холста (обертка изображения) с помощью новых данных.
Objectleft : смещение слева от коробкиtop : смещение вершины коробкиwidth : ширина коробкиheight : высота коробкиВывод данных о положении и размере поля.
Objectleft : новое смещение слева от коробкиtop : новая вершина офсетной вершины коробкиwidth : новая ширина коробкиheight : новая высота коробкиИзмените положение и размер ящика с новыми данными.
Параметры (необязательно):
Objectwidth : ширина назначения выходного холста.height : высота назначения выходного холста.minWidth : минимальная ширина пункта назначения выходного холста, значение по умолчанию составляет 0 .minHeight : минимальная высота назначения выходного холста, значение по умолчанию составляет 0 .maxWidth : максимальная ширина направления выходного холста, значение по умолчанию - Infinity .maxHeight : максимальная высота назначения выходного холста, значение по умолчанию - Infinity .fillColor : цвет для заполнения любых альфа -значений в выходном холсте, значение по умолчанию является transparent .imageSmoothingEnabled : установите, чтобы изменить, если изображения сглаживаются ( true , по умолчанию) или нет ( false ).imageSmoothingQuality : установите качество сглаживания изображения, один из «Low» (по умолчанию), «средний» или «высокий».rounded : установите true для использования округлых значений (обрезанная область и размер данных), значение по умолчанию является false .(возвращаемое значение):
HTMLCanvasElementПримечания:
fillColor , если нет, то прозрачная часть в изображении JPEG по умолчанию станет черной.Поддержка браузера:
Получите холст, нарисованный из обрезанного изображения (сжатие с потерей). Если он не обрезан, то возвращает холст, нарисованный весь образ.
После этого вы можете отобразить холст в качестве изображения напрямую или использовать htmlcanvaselement.todataurl для получения URL -адреса данных, или использовать htmlcanvaselement.toblob, чтобы получить капля и загрузить его на сервер с FormData, если браузер поддерживает эти API.
Избегайте получения пустого (или черного) выходного изображения, вам, возможно, потребуется установить свойства maxWidth и maxHeight на ограниченные числа из -за пределов размера элемента холста. Кроме того, вы должны ограничить максимальное соотношение масштабирования (в событии zoom ) по той же причине.
cropper . getCroppedCanvas ( ) ;
cropper . getCroppedCanvas ( {
width : 160 ,
height : 90 ,
} ) ;
cropper . getCroppedCanvas ( {
minWidth : 256 ,
minHeight : 256 ,
maxWidth : 4096 ,
maxHeight : 4096 ,
} ) ;
cropper . getCroppedCanvas ( {
fillColor : '#fff' ,
imageSmoothingEnabled : false ,
imageSmoothingQuality : 'high' ,
} ) ;
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
// The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.
cropper . getCroppedCanvas ( ) . toBlob ( ( blob ) => {
const formData = new FormData ( ) ;
// Pass the image file name as the third parameter if necessary.
formData . append ( 'croppedImage' , blob /*, 'example.png' */ ) ;
// Use `jQuery.ajax` method for example
$ . ajax ( '/path/to/upload' , {
method : 'POST' ,
data : formData ,
processData : false ,
contentType : false ,
success ( ) {
console . log ( 'Upload success' ) ;
} ,
error ( ) {
console . log ( 'Upload error' ) ;
} ,
} ) ;
} /*, 'image/png' */ ) ;NumberИзмените соотношение сторон коробки для обрезки.
String'none''none' , 'crop' , 'move'Измените режим перетаскивания.
Советы: вы можете переключить режим «Crop» и «Move», дважды щелкнув Cropper.
⬆ Вернуться к вершине
Это событие запускается, когда целевое изображение загружено, а экземпляр Cropper готов к работе.
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;Event.detail.originalevent :
Eventpointerdown , touchstart и mousedownEvent.detail.action :
String'crop' : создайте новую коробку для обрезки'move' : переместить холст (обертка изображения)'zoom' : Zoom in / out the Canvas (обертка изображения) на Touch.'e' : измените размер восточной стороны коробки для обрезки'w' : изменить размер западной стороны коробки's' : изменить размер южной стороны коробки'n' : изменить размер северной стороны коробки'se' : измените размер юго -восточной стороны коробки'sw' : измените размер юго -западной стороны коробки'ne' : измените размер северо -восточной стороны коробки'nw' : измените размер северо -западной стороны коробки'all' : переместить коробку для обрезки (все направления)Это событие стреляет, когда на начинает меняться холст (обертка изображения) или коробка обрезки.
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;Event.detail.originalevent :
Eventpointermove , touchmove и mousemove .Event.detail.Action : то же самое, что и «CropStart».
Это событие запускается, когда меняется холст (обертка изображения) или коробка обрезки.
Event.detail.originalevent :
Eventpointerup , pointercancel , touchend , touchcancel и mouseup .Event.detail.Action : то же самое, что и «CropStart».
Это событие запускается, когда холст (обертка изображения) или коробка обрезка перестает меняться.
Об этих свойствах см. Метод
getData.
Это событие запускается, когда меняется холст (обертка изображения) или коробка обрезки.
Примечания:
autoCrop будет установлена на true , событие crop будет вызвано до ready .data будет установлен, еще одно мероприятие crop будет вызвано до ready .Event.detail.originalevent :
Eventwheel , pointermove , touchmove и mousemove .Event.detail.oldratio :
Numberevent.detail.ratio :
NumbercanvasData.width / canvasData.naturalWidth )Это событие стреляет, когда экземпляр Cropper начинает увеличивать или увеличивать его холст (обертка изображения).
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;⬆ Вернуться к вершине
Если вам нужно использовать другой обрезку с тем же пространством имен, просто вызовите статический метод Cropper.noConflict , чтобы вернуться к нему.
< script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
Cropper . noConflict ( ) ;
// Code that uses other `Cropper` can follow here.
</ script > Пожалуйста, прочитайте наши рекомендации.
Поддерживается в соответствии с руководящими принципами семантической версии.
MIT © Chen Fengyuan
⬆ Вернуться к вершине
