node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

21
server/node_modules/cropperjs/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright 2015-present Chen Fengyuan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

1076
server/node_modules/cropperjs/README.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

3268
server/node_modules/cropperjs/dist/cropper.common.js generated vendored Normal file

File diff suppressed because it is too large Load Diff

308
server/node_modules/cropperjs/dist/cropper.css generated vendored Normal file
View File

@@ -0,0 +1,308 @@
/*!
* Cropper.js v1.6.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:44:17.565Z
*/
.cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cropper-container img {
backface-visibility: hidden;
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-wrap-box,
.cropper-canvas {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: 0.5;
}
.cropper-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden;
width: 100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
}
.cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: calc(100% / 3);
left: 0;
top: calc(100% / 3);
width: 100%;
}
.cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: calc(100% / 3);
top: 0;
width: calc(100% / 3);
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
}
.cropper-center::before,
.cropper-center::after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
.cropper-center::before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
.cropper-center::after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
}
.cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
.cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: 0.75;
width: 5px;
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
height: 5px;
opacity: 0.75;
width: 5px;
}
}
.cropper-point.point-se::before {
background-color: #39f;
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}

3266
server/node_modules/cropperjs/dist/cropper.esm.js generated vendored Normal file

File diff suppressed because it is too large Load Diff

3274
server/node_modules/cropperjs/dist/cropper.js generated vendored Normal file

File diff suppressed because it is too large Load Diff

9
server/node_modules/cropperjs/dist/cropper.min.css generated vendored Normal file
View File

@@ -0,0 +1,9 @@
/*!
* Cropper.js v1.6.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:44:17.565Z
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

10
server/node_modules/cropperjs/dist/cropper.min.js generated vendored Normal file

File diff suppressed because one or more lines are too long

106
server/node_modules/cropperjs/package.json generated vendored Normal file
View File

@@ -0,0 +1,106 @@
{
"name": "cropperjs",
"description": "JavaScript image cropper.",
"version": "1.6.1",
"main": "dist/cropper.common.js",
"module": "dist/cropper.esm.js",
"browser": "dist/cropper.js",
"types": "types/index.d.ts",
"style": "dist/cropper.css",
"files": [
"src",
"dist",
"types"
],
"scripts": {
"build": "npm run build:css && npm run build:js",
"build:css": "postcss src/index.css -o dist/cropper.css --no-map",
"build:js": "rollup -c",
"clean": "del-cli dist",
"compress": "npm run compress:css && npm run compress:js",
"compress:css": "postcss dist/cropper.css -u cssnano -o dist/cropper.min.css --no-map",
"compress:js": "uglifyjs dist/cropper.js -o dist/cropper.min.js -c -m --comments /^!/",
"copy": "cpy dist/cropper.css docs/css",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint **/*.{css,scss} --fix",
"lint:js": "eslint . --fix",
"prepare": "husky install",
"release": "npm run clean && npm run lint && npm run build && npm run compress && npm run copy && npm test",
"start": "npm-run-all --parallel watch:*",
"test": "karma start",
"test:coverage": "cat coverage/lcov.info | codecov",
"watch:css": "postcss src/index.css -o docs/css/cropper.css -m -w",
"watch:js": "rollup -c -m -w"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fengyuanchen/cropperjs.git"
},
"keywords": [
"image",
"crop",
"move",
"zoom",
"rotate",
"scale",
"cropper",
"cropper.js",
"cropping",
"processing",
"html",
"css",
"javascript",
"front-end",
"web"
],
"author": {
"name": "Chen Fengyuan",
"url": "https://chenfengyuan.com/"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/fengyuanchen/cropperjs/issues"
},
"homepage": "https://fengyuanchen.github.io/cropperjs",
"devDependencies": {
"@babel/core": "^7.22.20",
"@babel/preset-env": "^7.22.20",
"@commitlint/cli": "^17.7.1",
"@commitlint/config-conventional": "^17.7.0",
"@rollup/plugin-babel": "^6.0.3",
"babel-plugin-istanbul": "^6.1.1",
"chai": "^4.3.8",
"change-case": "^4.1.2",
"codecov": "^3.8.2",
"cpy-cli": "^4.2.0",
"create-banner": "^2.0.0",
"cssnano": "^5.1.15",
"del-cli": "^5.1.0",
"eslint": "^8.49.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.28.1",
"husky": "^8.0.3",
"karma": "^6.4.2",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.2.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-mocha": "^2.0.1",
"karma-mocha-reporter": "^2.2.5",
"karma-rollup-preprocessor": "^7.0.8",
"lint-staged": "^13.3.0",
"mocha": "^10.2.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.29",
"postcss-cli": "^10.1.0",
"postcss-header": "^3.0.3",
"postcss-import": "^15.1.0",
"postcss-preset-env": "^7.8.3",
"postcss-url": "^10.1.3",
"puppeteer": "^19.11.1",
"rollup": "^3.29.2",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-order": "^4.1.0",
"uglify-js": "^3.17.4"
}
}

285
server/node_modules/cropperjs/src/css/cropper.css generated vendored Normal file
View File

@@ -0,0 +1,285 @@
.cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
touch-action: none;
user-select: none;
& img {
backface-visibility: hidden;
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-wrap-box,
.cropper-canvas {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: 0.5;
}
.cropper-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden;
width: 100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
&.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: calc(100% / 3);
left: 0;
top: calc(100% / 3);
width: 100%;
}
&.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: calc(100% / 3);
top: 0;
width: calc(100% / 3);
}
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
&::before,
&::after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
&::before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
&::after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
&.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
&.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
&.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
&.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: 0.75;
width: 5px;
&.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
&.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
&.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
&.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
&.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
&.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
&.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
&.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
@media (min-width: 768px) {
height: 15px;
width: 15px;
}
@media (min-width: 992px) {
height: 10px;
width: 10px;
}
@media (min-width: 1200px) {
height: 5px;
opacity: 0.75;
width: 5px;
}
}
&.point-se::before {
background-color: #39f;
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url('../images/bg.png');
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}

289
server/node_modules/cropperjs/src/css/cropper.scss generated vendored Normal file
View File

@@ -0,0 +1,289 @@
$cropper-image-path: '../images' !default;
.cropper {
&-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
touch-action: none;
user-select: none;
img {
backface-visibility: hidden;
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
}
&-wrap-box,
&-canvas,
&-drag-box,
&-crop-box,
&-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
&-wrap-box,
&-canvas {
overflow: hidden;
}
&-drag-box {
background-color: #fff;
opacity: 0;
}
&-modal {
background-color: #000;
opacity: 0.5;
}
&-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden;
width: 100%;
}
&-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
&.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: calc(100% / 3);
left: 0;
top: calc(100% / 3);
width: 100%;
}
&.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: calc(100% / 3);
top: 0;
width: calc(100% / 3);
}
}
&-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
&::before,
&::after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
&::before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
&::after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
}
&-face,
&-line,
&-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
&-face {
background-color: #fff;
left: 0;
top: 0;
}
&-line {
background-color: #39f;
&.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
&.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
&.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
&.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
}
&-point {
background-color: #39f;
height: 5px;
opacity: 0.75;
width: 5px;
&.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
&.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
&.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
&.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
&.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
&.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
&.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
&.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
@media (min-width: 768px) {
height: 15px;
width: 15px;
}
@media (min-width: 992px) {
height: 10px;
width: 10px;
}
@media (min-width: 1200px) {
height: 5px;
opacity: 0.75;
width: 5px;
}
}
&.point-se::before {
background-color: #39f;
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
}
&-invisible {
opacity: 0;
}
&-bg {
background-image: url('#{$cropper-image-path}/bg.png');
}
&-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
&-hidden {
display: none !important;
}
&-move {
cursor: move;
}
&-crop {
cursor: crosshair;
}
&-disabled &-drag-box,
&-disabled &-face,
&-disabled &-line,
&-disabled &-point {
cursor: not-allowed;
}
}

BIN
server/node_modules/cropperjs/src/images/bg.png generated vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 B

1
server/node_modules/cropperjs/src/index.css generated vendored Normal file
View File

@@ -0,0 +1 @@
@import "./css/cropper.css";

3
server/node_modules/cropperjs/src/index.js generated vendored Normal file
View File

@@ -0,0 +1,3 @@
import Cropper from './js/cropper';
export default Cropper;

1
server/node_modules/cropperjs/src/index.scss generated vendored Normal file
View File

@@ -0,0 +1 @@
@import "./css/cropper";

491
server/node_modules/cropperjs/src/js/change.js generated vendored Normal file
View File

@@ -0,0 +1,491 @@
import {
ACTION_ALL,
ACTION_CROP,
ACTION_EAST,
ACTION_MOVE,
ACTION_NORTH,
ACTION_NORTH_EAST,
ACTION_NORTH_WEST,
ACTION_SOUTH,
ACTION_SOUTH_EAST,
ACTION_SOUTH_WEST,
ACTION_WEST,
ACTION_ZOOM,
CLASS_HIDDEN,
} from './constants';
import {
forEach,
getMaxZoomRatio,
getOffset,
removeClass,
} from './utilities';
export default {
change(event) {
const {
options,
canvasData,
containerData,
cropBoxData,
pointers,
} = this;
let { action } = this;
let { aspectRatio } = options;
let {
left,
top,
width,
height,
} = cropBoxData;
const right = left + width;
const bottom = top + height;
let minLeft = 0;
let minTop = 0;
let maxWidth = containerData.width;
let maxHeight = containerData.height;
let renderable = true;
let offset;
// Locking aspect ratio in "free mode" by holding shift key
if (!aspectRatio && event.shiftKey) {
aspectRatio = width && height ? width / height : 1;
}
if (this.limited) {
({ minLeft, minTop } = cropBoxData);
maxWidth = minLeft + Math.min(
containerData.width,
canvasData.width,
canvasData.left + canvasData.width,
);
maxHeight = minTop + Math.min(
containerData.height,
canvasData.height,
canvasData.top + canvasData.height,
);
}
const pointer = pointers[Object.keys(pointers)[0]];
const range = {
x: pointer.endX - pointer.startX,
y: pointer.endY - pointer.startY,
};
const check = (side) => {
switch (side) {
case ACTION_EAST:
if (right + range.x > maxWidth) {
range.x = maxWidth - right;
}
break;
case ACTION_WEST:
if (left + range.x < minLeft) {
range.x = minLeft - left;
}
break;
case ACTION_NORTH:
if (top + range.y < minTop) {
range.y = minTop - top;
}
break;
case ACTION_SOUTH:
if (bottom + range.y > maxHeight) {
range.y = maxHeight - bottom;
}
break;
default:
}
};
switch (action) {
// Move crop box
case ACTION_ALL:
left += range.x;
top += range.y;
break;
// Resize crop box
case ACTION_EAST:
if (range.x >= 0 && (right >= maxWidth || (aspectRatio
&& (top <= minTop || bottom >= maxHeight)))) {
renderable = false;
break;
}
check(ACTION_EAST);
width += range.x;
if (width < 0) {
action = ACTION_WEST;
width = -width;
left -= width;
}
if (aspectRatio) {
height = width / aspectRatio;
top += (cropBoxData.height - height) / 2;
}
break;
case ACTION_NORTH:
if (range.y <= 0 && (top <= minTop || (aspectRatio
&& (left <= minLeft || right >= maxWidth)))) {
renderable = false;
break;
}
check(ACTION_NORTH);
height -= range.y;
top += range.y;
if (height < 0) {
action = ACTION_SOUTH;
height = -height;
top -= height;
}
if (aspectRatio) {
width = height * aspectRatio;
left += (cropBoxData.width - width) / 2;
}
break;
case ACTION_WEST:
if (range.x <= 0 && (left <= minLeft || (aspectRatio
&& (top <= minTop || bottom >= maxHeight)))) {
renderable = false;
break;
}
check(ACTION_WEST);
width -= range.x;
left += range.x;
if (width < 0) {
action = ACTION_EAST;
width = -width;
left -= width;
}
if (aspectRatio) {
height = width / aspectRatio;
top += (cropBoxData.height - height) / 2;
}
break;
case ACTION_SOUTH:
if (range.y >= 0 && (bottom >= maxHeight || (aspectRatio
&& (left <= minLeft || right >= maxWidth)))) {
renderable = false;
break;
}
check(ACTION_SOUTH);
height += range.y;
if (height < 0) {
action = ACTION_NORTH;
height = -height;
top -= height;
}
if (aspectRatio) {
width = height * aspectRatio;
left += (cropBoxData.width - width) / 2;
}
break;
case ACTION_NORTH_EAST:
if (aspectRatio) {
if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {
renderable = false;
break;
}
check(ACTION_NORTH);
height -= range.y;
top += range.y;
width = height * aspectRatio;
} else {
check(ACTION_NORTH);
check(ACTION_EAST);
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_SOUTH_WEST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = ACTION_NORTH_WEST;
width = -width;
left -= width;
} else if (height < 0) {
action = ACTION_SOUTH_EAST;
height = -height;
top -= height;
}
break;
case ACTION_NORTH_WEST:
if (aspectRatio) {
if (range.y <= 0 && (top <= minTop || left <= minLeft)) {
renderable = false;
break;
}
check(ACTION_NORTH);
height -= range.y;
top += range.y;
width = height * aspectRatio;
left += cropBoxData.width - width;
} else {
check(ACTION_NORTH);
check(ACTION_WEST);
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_SOUTH_EAST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = ACTION_NORTH_EAST;
width = -width;
left -= width;
} else if (height < 0) {
action = ACTION_SOUTH_WEST;
height = -height;
top -= height;
}
break;
case ACTION_SOUTH_WEST:
if (aspectRatio) {
if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {
renderable = false;
break;
}
check(ACTION_WEST);
width -= range.x;
left += range.x;
height = width / aspectRatio;
} else {
check(ACTION_SOUTH);
check(ACTION_WEST);
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_NORTH_EAST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = ACTION_SOUTH_EAST;
width = -width;
left -= width;
} else if (height < 0) {
action = ACTION_NORTH_WEST;
height = -height;
top -= height;
}
break;
case ACTION_SOUTH_EAST:
if (aspectRatio) {
if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {
renderable = false;
break;
}
check(ACTION_EAST);
width += range.x;
height = width / aspectRatio;
} else {
check(ACTION_SOUTH);
check(ACTION_EAST);
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_NORTH_WEST;
height = -height;
width = -width;
top -= height;
left -= width;
} else if (width < 0) {
action = ACTION_SOUTH_WEST;
width = -width;
left -= width;
} else if (height < 0) {
action = ACTION_NORTH_EAST;
height = -height;
top -= height;
}
break;
// Move canvas
case ACTION_MOVE:
this.move(range.x, range.y);
renderable = false;
break;
// Zoom canvas
case ACTION_ZOOM:
this.zoom(getMaxZoomRatio(pointers), event);
renderable = false;
break;
// Create crop box
case ACTION_CROP:
if (!range.x || !range.y) {
renderable = false;
break;
}
offset = getOffset(this.cropper);
left = pointer.startX - offset.left;
top = pointer.startY - offset.top;
width = cropBoxData.minWidth;
height = cropBoxData.minHeight;
if (range.x > 0) {
action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;
} else if (range.x < 0) {
left -= width;
action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;
}
if (range.y < 0) {
top -= height;
}
// Show the crop box if is hidden
if (!this.cropped) {
removeClass(this.cropBox, CLASS_HIDDEN);
this.cropped = true;
if (this.limited) {
this.limitCropBox(true, true);
}
}
break;
default:
}
if (renderable) {
cropBoxData.width = width;
cropBoxData.height = height;
cropBoxData.left = left;
cropBoxData.top = top;
this.action = action;
this.renderCropBox();
}
// Override
forEach(pointers, (p) => {
p.startX = p.endX;
p.startY = p.endY;
});
},
};

68
server/node_modules/cropperjs/src/js/constants.js generated vendored Normal file
View File

@@ -0,0 +1,68 @@
export const IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
export const WINDOW = IS_BROWSER ? window : {};
export const IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
export const HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
export const NAMESPACE = 'cropper';
// Actions
export const ACTION_ALL = 'all';
export const ACTION_CROP = 'crop';
export const ACTION_MOVE = 'move';
export const ACTION_ZOOM = 'zoom';
export const ACTION_EAST = 'e';
export const ACTION_WEST = 'w';
export const ACTION_SOUTH = 's';
export const ACTION_NORTH = 'n';
export const ACTION_NORTH_EAST = 'ne';
export const ACTION_NORTH_WEST = 'nw';
export const ACTION_SOUTH_EAST = 'se';
export const ACTION_SOUTH_WEST = 'sw';
// Classes
export const CLASS_CROP = `${NAMESPACE}-crop`;
export const CLASS_DISABLED = `${NAMESPACE}-disabled`;
export const CLASS_HIDDEN = `${NAMESPACE}-hidden`;
export const CLASS_HIDE = `${NAMESPACE}-hide`;
export const CLASS_INVISIBLE = `${NAMESPACE}-invisible`;
export const CLASS_MODAL = `${NAMESPACE}-modal`;
export const CLASS_MOVE = `${NAMESPACE}-move`;
// Data keys
export const DATA_ACTION = `${NAMESPACE}Action`;
export const DATA_PREVIEW = `${NAMESPACE}Preview`;
// Drag modes
export const DRAG_MODE_CROP = 'crop';
export const DRAG_MODE_MOVE = 'move';
export const DRAG_MODE_NONE = 'none';
// Events
export const EVENT_CROP = 'crop';
export const EVENT_CROP_END = 'cropend';
export const EVENT_CROP_MOVE = 'cropmove';
export const EVENT_CROP_START = 'cropstart';
export const EVENT_DBLCLICK = 'dblclick';
export const EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
export const EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
export const EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
export const EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
export const EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
export const EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
export const EVENT_READY = 'ready';
export const EVENT_RESIZE = 'resize';
export const EVENT_WHEEL = 'wheel';
export const EVENT_ZOOM = 'zoom';
// Mime types
export const MIME_TYPE_JPEG = 'image/jpeg';
// RegExps
export const REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
export const REGEXP_DATA_URL = /^data:/;
export const REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
export const REGEXP_TAG_NAME = /^img|canvas$/i;
// Misc
// Inspired by the default width and height of a canvas element.
export const MIN_CONTAINER_WIDTH = 200;
export const MIN_CONTAINER_HEIGHT = 100;

454
server/node_modules/cropperjs/src/js/cropper.js generated vendored Normal file
View File

@@ -0,0 +1,454 @@
import DEFAULTS from './defaults';
import TEMPLATE from './template';
import render from './render';
import preview from './preview';
import events from './events';
import handlers from './handlers';
import change from './change';
import methods from './methods';
import {
ACTION_ALL,
CLASS_HIDDEN,
CLASS_HIDE,
CLASS_INVISIBLE,
CLASS_MOVE,
DATA_ACTION,
EVENT_READY,
MIME_TYPE_JPEG,
NAMESPACE,
REGEXP_DATA_URL,
REGEXP_DATA_URL_JPEG,
REGEXP_TAG_NAME,
WINDOW,
} from './constants';
import {
addClass,
addListener,
addTimestamp,
arrayBufferToDataURL,
assign,
dataURLToArrayBuffer,
dispatchEvent,
isCrossOriginURL,
isFunction,
isPlainObject,
parseOrientation,
removeClass,
resetAndGetOrientation,
setData,
} from './utilities';
const AnotherCropper = WINDOW.Cropper;
class Cropper {
/**
* Create a new Cropper.
* @param {Element} element - The target element for cropping.
* @param {Object} [options={}] - The configuration options.
*/
constructor(element, options = {}) {
if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {
throw new Error('The first argument is required and must be an <img> or <canvas> element.');
}
this.element = element;
this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
this.cropped = false;
this.disabled = false;
this.pointers = {};
this.ready = false;
this.reloading = false;
this.replaced = false;
this.sized = false;
this.sizing = false;
this.init();
}
init() {
const { element } = this;
const tagName = element.tagName.toLowerCase();
let url;
if (element[NAMESPACE]) {
return;
}
element[NAMESPACE] = this;
if (tagName === 'img') {
this.isImg = true;
// e.g.: "img/picture.jpg"
url = element.getAttribute('src') || '';
this.originalUrl = url;
// Stop when it's a blank image
if (!url) {
return;
}
// e.g.: "https://example.com/img/picture.jpg"
url = element.src;
} else if (tagName === 'canvas' && window.HTMLCanvasElement) {
url = element.toDataURL();
}
this.load(url);
}
load(url) {
if (!url) {
return;
}
this.url = url;
this.imageData = {};
const { element, options } = this;
if (!options.rotatable && !options.scalable) {
options.checkOrientation = false;
}
// Only IE10+ supports Typed Arrays
if (!options.checkOrientation || !window.ArrayBuffer) {
this.clone();
return;
}
// Detect the mime type of the image directly if it is a Data URL
if (REGEXP_DATA_URL.test(url)) {
// Read ArrayBuffer from Data URL of JPEG images directly for better performance
if (REGEXP_DATA_URL_JPEG.test(url)) {
this.read(dataURLToArrayBuffer(url));
} else {
// Only a JPEG image may contains Exif Orientation information,
// the rest types of Data URLs are not necessary to check orientation at all.
this.clone();
}
return;
}
// 1. Detect the mime type of the image by a XMLHttpRequest.
// 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image.
const xhr = new XMLHttpRequest();
const clone = this.clone.bind(this);
this.reloading = true;
this.xhr = xhr;
// 1. Cross origin requests are only supported for protocol schemes:
// http, https, data, chrome, chrome-extension.
// 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy
// in some browsers as IE11 and Safari.
xhr.onabort = clone;
xhr.onerror = clone;
xhr.ontimeout = clone;
xhr.onprogress = () => {
// Abort the request directly if it not a JPEG image for better performance
if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) {
xhr.abort();
}
};
xhr.onload = () => {
this.read(xhr.response);
};
xhr.onloadend = () => {
this.reloading = false;
this.xhr = null;
};
// Bust cache when there is a "crossOrigin" property to avoid browser cache error
if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {
url = addTimestamp(url);
}
// The third parameter is required for avoiding side-effect (#682)
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.withCredentials = element.crossOrigin === 'use-credentials';
xhr.send();
}
read(arrayBuffer) {
const { options, imageData } = this;
// Reset the orientation value to its default value 1
// as some iOS browsers will render image with its orientation
const orientation = resetAndGetOrientation(arrayBuffer);
let rotate = 0;
let scaleX = 1;
let scaleY = 1;
if (orientation > 1) {
// Generate a new URL which has the default orientation value
this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
({ rotate, scaleX, scaleY } = parseOrientation(orientation));
}
if (options.rotatable) {
imageData.rotate = rotate;
}
if (options.scalable) {
imageData.scaleX = scaleX;
imageData.scaleY = scaleY;
}
this.clone();
}
clone() {
const { element, url } = this;
let { crossOrigin } = element;
let crossOriginUrl = url;
if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {
if (!crossOrigin) {
crossOrigin = 'anonymous';
}
// Bust cache when there is not a "crossOrigin" property (#519)
crossOriginUrl = addTimestamp(url);
}
this.crossOrigin = crossOrigin;
this.crossOriginUrl = crossOriginUrl;
const image = document.createElement('img');
if (crossOrigin) {
image.crossOrigin = crossOrigin;
}
image.src = crossOriginUrl || url;
image.alt = element.alt || 'The image to crop';
this.image = image;
image.onload = this.start.bind(this);
image.onerror = this.stop.bind(this);
addClass(image, CLASS_HIDE);
element.parentNode.insertBefore(image, element.nextSibling);
}
start() {
const { image } = this;
image.onload = null;
image.onerror = null;
this.sizing = true;
// Match all browsers that use WebKit as the layout engine in iOS devices,
// such as Safari for iOS, Chrome for iOS, and in-app browsers.
const isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
const done = (naturalWidth, naturalHeight) => {
assign(this.imageData, {
naturalWidth,
naturalHeight,
aspectRatio: naturalWidth / naturalHeight,
});
this.initialImageData = assign({}, this.imageData);
this.sizing = false;
this.sized = true;
this.build();
};
// Most modern browsers (excepts iOS WebKit)
if (image.naturalWidth && !isIOSWebKit) {
done(image.naturalWidth, image.naturalHeight);
return;
}
const sizingImage = document.createElement('img');
const body = document.body || document.documentElement;
this.sizingImage = sizingImage;
sizingImage.onload = () => {
done(sizingImage.width, sizingImage.height);
if (!isIOSWebKit) {
body.removeChild(sizingImage);
}
};
sizingImage.src = image.src;
// iOS WebKit will convert the image automatically
// with its orientation once append it into DOM (#279)
if (!isIOSWebKit) {
sizingImage.style.cssText = (
'left:0;'
+ 'max-height:none!important;'
+ 'max-width:none!important;'
+ 'min-height:0!important;'
+ 'min-width:0!important;'
+ 'opacity:0;'
+ 'position:absolute;'
+ 'top:0;'
+ 'z-index:-1;'
);
body.appendChild(sizingImage);
}
}
stop() {
const { image } = this;
image.onload = null;
image.onerror = null;
image.parentNode.removeChild(image);
this.image = null;
}
build() {
if (!this.sized || this.ready) {
return;
}
const { element, options, image } = this;
// Create cropper elements
const container = element.parentNode;
const template = document.createElement('div');
template.innerHTML = TEMPLATE;
const cropper = template.querySelector(`.${NAMESPACE}-container`);
const canvas = cropper.querySelector(`.${NAMESPACE}-canvas`);
const dragBox = cropper.querySelector(`.${NAMESPACE}-drag-box`);
const cropBox = cropper.querySelector(`.${NAMESPACE}-crop-box`);
const face = cropBox.querySelector(`.${NAMESPACE}-face`);
this.container = container;
this.cropper = cropper;
this.canvas = canvas;
this.dragBox = dragBox;
this.cropBox = cropBox;
this.viewBox = cropper.querySelector(`.${NAMESPACE}-view-box`);
this.face = face;
canvas.appendChild(image);
// Hide the original image
addClass(element, CLASS_HIDDEN);
// Inserts the cropper after to the current image
container.insertBefore(cropper, element.nextSibling);
// Show the hidden image
removeClass(image, CLASS_HIDE);
this.initPreview();
this.bind();
options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN;
options.aspectRatio = Math.max(0, options.aspectRatio) || NaN;
options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0;
addClass(cropBox, CLASS_HIDDEN);
if (!options.guides) {
addClass(cropBox.getElementsByClassName(`${NAMESPACE}-dashed`), CLASS_HIDDEN);
}
if (!options.center) {
addClass(cropBox.getElementsByClassName(`${NAMESPACE}-center`), CLASS_HIDDEN);
}
if (options.background) {
addClass(cropper, `${NAMESPACE}-bg`);
}
if (!options.highlight) {
addClass(face, CLASS_INVISIBLE);
}
if (options.cropBoxMovable) {
addClass(face, CLASS_MOVE);
setData(face, DATA_ACTION, ACTION_ALL);
}
if (!options.cropBoxResizable) {
addClass(cropBox.getElementsByClassName(`${NAMESPACE}-line`), CLASS_HIDDEN);
addClass(cropBox.getElementsByClassName(`${NAMESPACE}-point`), CLASS_HIDDEN);
}
this.render();
this.ready = true;
this.setDragMode(options.dragMode);
if (options.autoCrop) {
this.crop();
}
this.setData(options.data);
if (isFunction(options.ready)) {
addListener(element, EVENT_READY, options.ready, {
once: true,
});
}
dispatchEvent(element, EVENT_READY);
}
unbuild() {
if (!this.ready) {
return;
}
this.ready = false;
this.unbind();
this.resetPreview();
const { parentNode } = this.cropper;
if (parentNode) {
parentNode.removeChild(this.cropper);
}
removeClass(this.element, CLASS_HIDDEN);
}
uncreate() {
if (this.ready) {
this.unbuild();
this.ready = false;
this.cropped = false;
} else if (this.sizing) {
this.sizingImage.onload = null;
this.sizing = false;
this.sized = false;
} else if (this.reloading) {
this.xhr.onabort = null;
this.xhr.abort();
} else if (this.image) {
this.stop();
}
}
/**
* Get the no conflict cropper class.
* @returns {Cropper} The cropper class.
*/
static noConflict() {
window.Cropper = AnotherCropper;
return Cropper;
}
/**
* Change the default options.
* @param {Object} options - The new default options.
*/
static setDefaults(options) {
assign(DEFAULTS, isPlainObject(options) && options);
}
}
assign(Cropper.prototype, render, preview, events, handlers, change, methods);
export default Cropper;

104
server/node_modules/cropperjs/src/js/defaults.js generated vendored Normal file
View File

@@ -0,0 +1,104 @@
import {
DRAG_MODE_CROP,
MIN_CONTAINER_HEIGHT,
MIN_CONTAINER_WIDTH,
} from './constants';
export default {
// Define the view mode of the cropper
viewMode: 0, // 0, 1, 2, 3
// Define the dragging mode of the cropper
dragMode: DRAG_MODE_CROP, // 'crop', 'move' or 'none'
// Define the initial aspect ratio of the crop box
initialAspectRatio: NaN,
// Define the aspect ratio of the crop box
aspectRatio: NaN,
// An object with the previous cropping result data
data: null,
// A selector for adding extra containers to preview
preview: '',
// Re-render the cropper when resize the window
responsive: true,
// Restore the cropped area after resize the window
restore: true,
// Check if the current image is a cross-origin image
checkCrossOrigin: true,
// Check the current image's Exif Orientation information
checkOrientation: true,
// Show the black modal
modal: true,
// Show the dashed lines for guiding
guides: true,
// Show the center indicator for guiding
center: true,
// Show the white modal to highlight the crop box
highlight: true,
// Show the grid background
background: true,
// Enable to crop the image automatically when initialize
autoCrop: true,
// Define the percentage of automatic cropping area when initializes
autoCropArea: 0.8,
// Enable to move the image
movable: true,
// Enable to rotate the image
rotatable: true,
// Enable to scale the image
scalable: true,
// Enable to zoom the image
zoomable: true,
// Enable to zoom the image by dragging touch
zoomOnTouch: true,
// Enable to zoom the image by wheeling mouse
zoomOnWheel: true,
// Define zoom ratio when zoom the image by wheeling mouse
wheelZoomRatio: 0.1,
// Enable to move the crop box
cropBoxMovable: true,
// Enable to resize the crop box
cropBoxResizable: true,
// Toggle drag mode between "crop" and "move" when click twice on the cropper
toggleDragModeOnDblclick: true,
// Size limitation
minCanvasWidth: 0,
minCanvasHeight: 0,
minCropBoxWidth: 0,
minCropBoxHeight: 0,
minContainerWidth: MIN_CONTAINER_WIDTH,
minContainerHeight: MIN_CONTAINER_HEIGHT,
// Shortcuts of events
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null,
};

116
server/node_modules/cropperjs/src/js/events.js generated vendored Normal file
View File

@@ -0,0 +1,116 @@
import {
EVENT_CROP,
EVENT_CROP_END,
EVENT_CROP_MOVE,
EVENT_CROP_START,
EVENT_DBLCLICK,
EVENT_POINTER_DOWN,
EVENT_POINTER_MOVE,
EVENT_POINTER_UP,
EVENT_RESIZE,
EVENT_WHEEL,
EVENT_ZOOM,
} from './constants';
import {
addListener,
isFunction,
removeListener,
} from './utilities';
export default {
bind() {
const { element, options, cropper } = this;
if (isFunction(options.cropstart)) {
addListener(element, EVENT_CROP_START, options.cropstart);
}
if (isFunction(options.cropmove)) {
addListener(element, EVENT_CROP_MOVE, options.cropmove);
}
if (isFunction(options.cropend)) {
addListener(element, EVENT_CROP_END, options.cropend);
}
if (isFunction(options.crop)) {
addListener(element, EVENT_CROP, options.crop);
}
if (isFunction(options.zoom)) {
addListener(element, EVENT_ZOOM, options.zoom);
}
addListener(cropper, EVENT_POINTER_DOWN, (this.onCropStart = this.cropStart.bind(this)));
if (options.zoomable && options.zoomOnWheel) {
addListener(cropper, EVENT_WHEEL, (this.onWheel = this.wheel.bind(this)), {
passive: false,
capture: true,
});
}
if (options.toggleDragModeOnDblclick) {
addListener(cropper, EVENT_DBLCLICK, (this.onDblclick = this.dblclick.bind(this)));
}
addListener(
element.ownerDocument,
EVENT_POINTER_MOVE,
(this.onCropMove = this.cropMove.bind(this)),
);
addListener(
element.ownerDocument,
EVENT_POINTER_UP,
(this.onCropEnd = this.cropEnd.bind(this)),
);
if (options.responsive) {
addListener(window, EVENT_RESIZE, (this.onResize = this.resize.bind(this)));
}
},
unbind() {
const { element, options, cropper } = this;
if (isFunction(options.cropstart)) {
removeListener(element, EVENT_CROP_START, options.cropstart);
}
if (isFunction(options.cropmove)) {
removeListener(element, EVENT_CROP_MOVE, options.cropmove);
}
if (isFunction(options.cropend)) {
removeListener(element, EVENT_CROP_END, options.cropend);
}
if (isFunction(options.crop)) {
removeListener(element, EVENT_CROP, options.crop);
}
if (isFunction(options.zoom)) {
removeListener(element, EVENT_ZOOM, options.zoom);
}
removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);
if (options.zoomable && options.zoomOnWheel) {
removeListener(cropper, EVENT_WHEEL, this.onWheel, {
passive: false,
capture: true,
});
}
if (options.toggleDragModeOnDblclick) {
removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);
}
removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);
removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);
if (options.responsive) {
removeListener(window, EVENT_RESIZE, this.onResize);
}
},
};

230
server/node_modules/cropperjs/src/js/handlers.js generated vendored Normal file
View File

@@ -0,0 +1,230 @@
import {
ACTION_CROP,
ACTION_ZOOM,
CLASS_CROP,
CLASS_MODAL,
DATA_ACTION,
DRAG_MODE_CROP,
DRAG_MODE_MOVE,
DRAG_MODE_NONE,
EVENT_CROP_END,
EVENT_CROP_MOVE,
EVENT_CROP_START,
REGEXP_ACTIONS,
} from './constants';
import {
addClass,
assign,
dispatchEvent,
forEach,
getData,
getPointer,
hasClass,
isNumber,
toggleClass,
} from './utilities';
export default {
resize() {
if (this.disabled) {
return;
}
const { options, container, containerData } = this;
const ratioX = container.offsetWidth / containerData.width;
const ratioY = container.offsetHeight / containerData.height;
const ratio = Math.abs(ratioX - 1) > Math.abs(ratioY - 1) ? ratioX : ratioY;
// Resize when width changed or height changed
if (ratio !== 1) {
let canvasData;
let cropBoxData;
if (options.restore) {
canvasData = this.getCanvasData();
cropBoxData = this.getCropBoxData();
}
this.render();
if (options.restore) {
this.setCanvasData(forEach(canvasData, (n, i) => {
canvasData[i] = n * ratio;
}));
this.setCropBoxData(forEach(cropBoxData, (n, i) => {
cropBoxData[i] = n * ratio;
}));
}
}
},
dblclick() {
if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {
return;
}
this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
},
wheel(event) {
const ratio = Number(this.options.wheelZoomRatio) || 0.1;
let delta = 1;
if (this.disabled) {
return;
}
event.preventDefault();
// Limit wheel speed to prevent zoom too fast (#21)
if (this.wheeling) {
return;
}
this.wheeling = true;
setTimeout(() => {
this.wheeling = false;
}, 50);
if (event.deltaY) {
delta = event.deltaY > 0 ? 1 : -1;
} else if (event.wheelDelta) {
delta = -event.wheelDelta / 120;
} else if (event.detail) {
delta = event.detail > 0 ? 1 : -1;
}
this.zoom(-delta * ratio, event);
},
cropStart(event) {
const { buttons, button } = event;
if (
this.disabled
// Handle mouse event and pointer event and ignore touch event
|| ((
event.type === 'mousedown'
|| (event.type === 'pointerdown' && event.pointerType === 'mouse')
) && (
// No primary button (Usually the left button)
(isNumber(buttons) && buttons !== 1)
|| (isNumber(button) && button !== 0)
// Open context menu
|| event.ctrlKey
))
) {
return;
}
const { options, pointers } = this;
let action;
if (event.changedTouches) {
// Handle touch event
forEach(event.changedTouches, (touch) => {
pointers[touch.identifier] = getPointer(touch);
});
} else {
// Handle mouse event and pointer event
pointers[event.pointerId || 0] = getPointer(event);
}
if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
action = ACTION_ZOOM;
} else {
action = getData(event.target, DATA_ACTION);
}
if (!REGEXP_ACTIONS.test(action)) {
return;
}
if (dispatchEvent(this.element, EVENT_CROP_START, {
originalEvent: event,
action,
}) === false) {
return;
}
// This line is required for preventing page zooming in iOS browsers
event.preventDefault();
this.action = action;
this.cropping = false;
if (action === ACTION_CROP) {
this.cropping = true;
addClass(this.dragBox, CLASS_MODAL);
}
},
cropMove(event) {
const { action } = this;
if (this.disabled || !action) {
return;
}
const { pointers } = this;
event.preventDefault();
if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
originalEvent: event,
action,
}) === false) {
return;
}
if (event.changedTouches) {
forEach(event.changedTouches, (touch) => {
// The first parameter should not be undefined (#432)
assign(pointers[touch.identifier] || {}, getPointer(touch, true));
});
} else {
assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));
}
this.change(event);
},
cropEnd(event) {
if (this.disabled) {
return;
}
const { action, pointers } = this;
if (event.changedTouches) {
forEach(event.changedTouches, (touch) => {
delete pointers[touch.identifier];
});
} else {
delete pointers[event.pointerId || 0];
}
if (!action) {
return;
}
event.preventDefault();
if (!Object.keys(pointers).length) {
this.action = '';
}
if (this.cropping) {
this.cropping = false;
toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);
}
dispatchEvent(this.element, EVENT_CROP_END, {
originalEvent: event,
action,
});
},
};

834
server/node_modules/cropperjs/src/js/methods.js generated vendored Normal file
View File

@@ -0,0 +1,834 @@
import {
CLASS_CROP,
CLASS_DISABLED,
CLASS_HIDDEN,
CLASS_MODAL,
CLASS_MOVE,
DATA_ACTION,
DRAG_MODE_CROP,
DRAG_MODE_MOVE,
DRAG_MODE_NONE,
EVENT_ZOOM,
NAMESPACE,
} from './constants';
import {
addClass,
assign,
dispatchEvent,
forEach,
getAdjustedSizes,
getOffset,
getPointersCenter,
getSourceCanvas,
isNumber,
isPlainObject,
isUndefined,
normalizeDecimalNumber,
removeClass,
setData,
toggleClass,
} from './utilities';
export default {
// Show the crop box manually
crop() {
if (this.ready && !this.cropped && !this.disabled) {
this.cropped = true;
this.limitCropBox(true, true);
if (this.options.modal) {
addClass(this.dragBox, CLASS_MODAL);
}
removeClass(this.cropBox, CLASS_HIDDEN);
this.setCropBoxData(this.initialCropBoxData);
}
return this;
},
// Reset the image and crop box to their initial states
reset() {
if (this.ready && !this.disabled) {
this.imageData = assign({}, this.initialImageData);
this.canvasData = assign({}, this.initialCanvasData);
this.cropBoxData = assign({}, this.initialCropBoxData);
this.renderCanvas();
if (this.cropped) {
this.renderCropBox();
}
}
return this;
},
// Clear the crop box
clear() {
if (this.cropped && !this.disabled) {
assign(this.cropBoxData, {
left: 0,
top: 0,
width: 0,
height: 0,
});
this.cropped = false;
this.renderCropBox();
this.limitCanvas(true, true);
// Render canvas after crop box rendered
this.renderCanvas();
removeClass(this.dragBox, CLASS_MODAL);
addClass(this.cropBox, CLASS_HIDDEN);
}
return this;
},
/**
* Replace the image's src and rebuild the cropper
* @param {string} url - The new URL.
* @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.
* @returns {Cropper} this
*/
replace(url, hasSameSize = false) {
if (!this.disabled && url) {
if (this.isImg) {
this.element.src = url;
}
if (hasSameSize) {
this.url = url;
this.image.src = url;
if (this.ready) {
this.viewBoxImage.src = url;
forEach(this.previews, (element) => {
element.getElementsByTagName('img')[0].src = url;
});
}
} else {
if (this.isImg) {
this.replaced = true;
}
this.options.data = null;
this.uncreate();
this.load(url);
}
}
return this;
},
// Enable (unfreeze) the cropper
enable() {
if (this.ready && this.disabled) {
this.disabled = false;
removeClass(this.cropper, CLASS_DISABLED);
}
return this;
},
// Disable (freeze) the cropper
disable() {
if (this.ready && !this.disabled) {
this.disabled = true;
addClass(this.cropper, CLASS_DISABLED);
}
return this;
},
/**
* Destroy the cropper and remove the instance from the image
* @returns {Cropper} this
*/
destroy() {
const { element } = this;
if (!element[NAMESPACE]) {
return this;
}
element[NAMESPACE] = undefined;
if (this.isImg && this.replaced) {
element.src = this.originalUrl;
}
this.uncreate();
return this;
},
/**
* Move the canvas with relative offsets
* @param {number} offsetX - The relative offset distance on the x-axis.
* @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis.
* @returns {Cropper} this
*/
move(offsetX, offsetY = offsetX) {
const { left, top } = this.canvasData;
return this.moveTo(
isUndefined(offsetX) ? offsetX : (left + Number(offsetX)),
isUndefined(offsetY) ? offsetY : (top + Number(offsetY)),
);
},
/**
* Move the canvas to an absolute point
* @param {number} x - The x-axis coordinate.
* @param {number} [y=x] - The y-axis coordinate.
* @returns {Cropper} this
*/
moveTo(x, y = x) {
const { canvasData } = this;
let changed = false;
x = Number(x);
y = Number(y);
if (this.ready && !this.disabled && this.options.movable) {
if (isNumber(x)) {
canvasData.left = x;
changed = true;
}
if (isNumber(y)) {
canvasData.top = y;
changed = true;
}
if (changed) {
this.renderCanvas(true);
}
}
return this;
},
/**
* Zoom the canvas with a relative ratio
* @param {number} ratio - The target ratio.
* @param {Event} _originalEvent - The original event if any.
* @returns {Cropper} this
*/
zoom(ratio, _originalEvent) {
const { canvasData } = this;
ratio = Number(ratio);
if (ratio < 0) {
ratio = 1 / (1 - ratio);
} else {
ratio = 1 + ratio;
}
return this.zoomTo((canvasData.width * ratio) / canvasData.naturalWidth, null, _originalEvent);
},
/**
* Zoom the canvas to an absolute ratio
* @param {number} ratio - The target ratio.
* @param {Object} pivot - The zoom pivot point coordinate.
* @param {Event} _originalEvent - The original event if any.
* @returns {Cropper} this
*/
zoomTo(ratio, pivot, _originalEvent) {
const { options, canvasData } = this;
const {
width,
height,
naturalWidth,
naturalHeight,
} = canvasData;
ratio = Number(ratio);
if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {
const newWidth = naturalWidth * ratio;
const newHeight = naturalHeight * ratio;
if (dispatchEvent(this.element, EVENT_ZOOM, {
ratio,
oldRatio: width / naturalWidth,
originalEvent: _originalEvent,
}) === false) {
return this;
}
if (_originalEvent) {
const { pointers } = this;
const offset = getOffset(this.cropper);
const center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {
pageX: _originalEvent.pageX,
pageY: _originalEvent.pageY,
};
// Zoom from the triggering point of the event
canvasData.left -= (newWidth - width) * (
((center.pageX - offset.left) - canvasData.left) / width
);
canvasData.top -= (newHeight - height) * (
((center.pageY - offset.top) - canvasData.top) / height
);
} else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
canvasData.left -= (newWidth - width) * (
(pivot.x - canvasData.left) / width
);
canvasData.top -= (newHeight - height) * (
(pivot.y - canvasData.top) / height
);
} else {
// Zoom from the center of the canvas
canvasData.left -= (newWidth - width) / 2;
canvasData.top -= (newHeight - height) / 2;
}
canvasData.width = newWidth;
canvasData.height = newHeight;
this.renderCanvas(true);
}
return this;
},
/**
* Rotate the canvas with a relative degree
* @param {number} degree - The rotate degree.
* @returns {Cropper} this
*/
rotate(degree) {
return this.rotateTo((this.imageData.rotate || 0) + Number(degree));
},
/**
* Rotate the canvas to an absolute degree
* @param {number} degree - The rotate degree.
* @returns {Cropper} this
*/
rotateTo(degree) {
degree = Number(degree);
if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {
this.imageData.rotate = degree % 360;
this.renderCanvas(true, true);
}
return this;
},
/**
* Scale the image on the x-axis.
* @param {number} scaleX - The scale ratio on the x-axis.
* @returns {Cropper} this
*/
scaleX(scaleX) {
const { scaleY } = this.imageData;
return this.scale(scaleX, isNumber(scaleY) ? scaleY : 1);
},
/**
* Scale the image on the y-axis.
* @param {number} scaleY - The scale ratio on the y-axis.
* @returns {Cropper} this
*/
scaleY(scaleY) {
const { scaleX } = this.imageData;
return this.scale(isNumber(scaleX) ? scaleX : 1, scaleY);
},
/**
* Scale the image
* @param {number} scaleX - The scale ratio on the x-axis.
* @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
* @returns {Cropper} this
*/
scale(scaleX, scaleY = scaleX) {
const { imageData } = this;
let transformed = false;
scaleX = Number(scaleX);
scaleY = Number(scaleY);
if (this.ready && !this.disabled && this.options.scalable) {
if (isNumber(scaleX)) {
imageData.scaleX = scaleX;
transformed = true;
}
if (isNumber(scaleY)) {
imageData.scaleY = scaleY;
transformed = true;
}
if (transformed) {
this.renderCanvas(true, true);
}
}
return this;
},
/**
* Get the cropped area position and size data (base on the original image)
* @param {boolean} [rounded=false] - Indicate if round the data values or not.
* @returns {Object} The result cropped data.
*/
getData(rounded = false) {
const {
options,
imageData,
canvasData,
cropBoxData,
} = this;
let data;
if (this.ready && this.cropped) {
data = {
x: cropBoxData.left - canvasData.left,
y: cropBoxData.top - canvasData.top,
width: cropBoxData.width,
height: cropBoxData.height,
};
const ratio = imageData.width / imageData.naturalWidth;
forEach(data, (n, i) => {
data[i] = n / ratio;
});
if (rounded) {
// In case rounding off leads to extra 1px in right or bottom border
// we should round the top-left corner and the dimension (#343).
const bottom = Math.round(data.y + data.height);
const right = Math.round(data.x + data.width);
data.x = Math.round(data.x);
data.y = Math.round(data.y);
data.width = right - data.x;
data.height = bottom - data.y;
}
} else {
data = {
x: 0,
y: 0,
width: 0,
height: 0,
};
}
if (options.rotatable) {
data.rotate = imageData.rotate || 0;
}
if (options.scalable) {
data.scaleX = imageData.scaleX || 1;
data.scaleY = imageData.scaleY || 1;
}
return data;
},
/**
* Set the cropped area position and size with new data
* @param {Object} data - The new data.
* @returns {Cropper} this
*/
setData(data) {
const { options, imageData, canvasData } = this;
const cropBoxData = {};
if (this.ready && !this.disabled && isPlainObject(data)) {
let transformed = false;
if (options.rotatable) {
if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {
imageData.rotate = data.rotate;
transformed = true;
}
}
if (options.scalable) {
if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) {
imageData.scaleX = data.scaleX;
transformed = true;
}
if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {
imageData.scaleY = data.scaleY;
transformed = true;
}
}
if (transformed) {
this.renderCanvas(true, true);
}
const ratio = imageData.width / imageData.naturalWidth;
if (isNumber(data.x)) {
cropBoxData.left = (data.x * ratio) + canvasData.left;
}
if (isNumber(data.y)) {
cropBoxData.top = (data.y * ratio) + canvasData.top;
}
if (isNumber(data.width)) {
cropBoxData.width = data.width * ratio;
}
if (isNumber(data.height)) {
cropBoxData.height = data.height * ratio;
}
this.setCropBoxData(cropBoxData);
}
return this;
},
/**
* Get the container size data.
* @returns {Object} The result container data.
*/
getContainerData() {
return this.ready ? assign({}, this.containerData) : {};
},
/**
* Get the image position and size data.
* @returns {Object} The result image data.
*/
getImageData() {
return this.sized ? assign({}, this.imageData) : {};
},
/**
* Get the canvas position and size data.
* @returns {Object} The result canvas data.
*/
getCanvasData() {
const { canvasData } = this;
const data = {};
if (this.ready) {
forEach([
'left',
'top',
'width',
'height',
'naturalWidth',
'naturalHeight',
], (n) => {
data[n] = canvasData[n];
});
}
return data;
},
/**
* Set the canvas position and size with new data.
* @param {Object} data - The new canvas data.
* @returns {Cropper} this
*/
setCanvasData(data) {
const { canvasData } = this;
const { aspectRatio } = canvasData;
if (this.ready && !this.disabled && isPlainObject(data)) {
if (isNumber(data.left)) {
canvasData.left = data.left;
}
if (isNumber(data.top)) {
canvasData.top = data.top;
}
if (isNumber(data.width)) {
canvasData.width = data.width;
canvasData.height = data.width / aspectRatio;
} else if (isNumber(data.height)) {
canvasData.height = data.height;
canvasData.width = data.height * aspectRatio;
}
this.renderCanvas(true);
}
return this;
},
/**
* Get the crop box position and size data.
* @returns {Object} The result crop box data.
*/
getCropBoxData() {
const { cropBoxData } = this;
let data;
if (this.ready && this.cropped) {
data = {
left: cropBoxData.left,
top: cropBoxData.top,
width: cropBoxData.width,
height: cropBoxData.height,
};
}
return data || {};
},
/**
* Set the crop box position and size with new data.
* @param {Object} data - The new crop box data.
* @returns {Cropper} this
*/
setCropBoxData(data) {
const { cropBoxData } = this;
const { aspectRatio } = this.options;
let widthChanged;
let heightChanged;
if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {
if (isNumber(data.left)) {
cropBoxData.left = data.left;
}
if (isNumber(data.top)) {
cropBoxData.top = data.top;
}
if (isNumber(data.width) && data.width !== cropBoxData.width) {
widthChanged = true;
cropBoxData.width = data.width;
}
if (isNumber(data.height) && data.height !== cropBoxData.height) {
heightChanged = true;
cropBoxData.height = data.height;
}
if (aspectRatio) {
if (widthChanged) {
cropBoxData.height = cropBoxData.width / aspectRatio;
} else if (heightChanged) {
cropBoxData.width = cropBoxData.height * aspectRatio;
}
}
this.renderCropBox();
}
return this;
},
/**
* Get a canvas drawn the cropped image.
* @param {Object} [options={}] - The config options.
* @returns {HTMLCanvasElement} - The result canvas.
*/
getCroppedCanvas(options = {}) {
if (!this.ready || !window.HTMLCanvasElement) {
return null;
}
const { canvasData } = this;
const source = getSourceCanvas(this.image, this.imageData, canvasData, options);
// Returns the source canvas if it is not cropped.
if (!this.cropped) {
return source;
}
let {
x: initialX,
y: initialY,
width: initialWidth,
height: initialHeight,
} = this.getData(options.rounded);
const ratio = source.width / Math.floor(canvasData.naturalWidth);
if (ratio !== 1) {
initialX *= ratio;
initialY *= ratio;
initialWidth *= ratio;
initialHeight *= ratio;
}
const aspectRatio = initialWidth / initialHeight;
const maxSizes = getAdjustedSizes({
aspectRatio,
width: options.maxWidth || Infinity,
height: options.maxHeight || Infinity,
});
const minSizes = getAdjustedSizes({
aspectRatio,
width: options.minWidth || 0,
height: options.minHeight || 0,
}, 'cover');
let {
width,
height,
} = getAdjustedSizes({
aspectRatio,
width: options.width || (ratio !== 1 ? source.width : initialWidth),
height: options.height || (ratio !== 1 ? source.height : initialHeight),
});
width = Math.min(maxSizes.width, Math.max(minSizes.width, width));
height = Math.min(maxSizes.height, Math.max(minSizes.height, height));
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
context.fillStyle = options.fillColor || 'transparent';
context.fillRect(0, 0, width, height);
const { imageSmoothingEnabled = true, imageSmoothingQuality } = options;
context.imageSmoothingEnabled = imageSmoothingEnabled;
if (imageSmoothingQuality) {
context.imageSmoothingQuality = imageSmoothingQuality;
}
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage
const sourceWidth = source.width;
const sourceHeight = source.height;
// Source canvas parameters
let srcX = initialX;
let srcY = initialY;
let srcWidth;
let srcHeight;
// Destination canvas parameters
let dstX;
let dstY;
let dstWidth;
let dstHeight;
if (srcX <= -initialWidth || srcX > sourceWidth) {
srcX = 0;
srcWidth = 0;
dstX = 0;
dstWidth = 0;
} else if (srcX <= 0) {
dstX = -srcX;
srcX = 0;
srcWidth = Math.min(sourceWidth, initialWidth + srcX);
dstWidth = srcWidth;
} else if (srcX <= sourceWidth) {
dstX = 0;
srcWidth = Math.min(initialWidth, sourceWidth - srcX);
dstWidth = srcWidth;
}
if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) {
srcY = 0;
srcHeight = 0;
dstY = 0;
dstHeight = 0;
} else if (srcY <= 0) {
dstY = -srcY;
srcY = 0;
srcHeight = Math.min(sourceHeight, initialHeight + srcY);
dstHeight = srcHeight;
} else if (srcY <= sourceHeight) {
dstY = 0;
srcHeight = Math.min(initialHeight, sourceHeight - srcY);
dstHeight = srcHeight;
}
const params = [
srcX,
srcY,
srcWidth,
srcHeight,
];
// Avoid "IndexSizeError"
if (dstWidth > 0 && dstHeight > 0) {
const scale = width / initialWidth;
params.push(
dstX * scale,
dstY * scale,
dstWidth * scale,
dstHeight * scale,
);
}
// All the numerical parameters should be integer for `drawImage`
// https://github.com/fengyuanchen/cropper/issues/476
context.drawImage(source, ...params.map((param) => Math.floor(normalizeDecimalNumber(param))));
return canvas;
},
/**
* Change the aspect ratio of the crop box.
* @param {number} aspectRatio - The new aspect ratio.
* @returns {Cropper} this
*/
setAspectRatio(aspectRatio) {
const { options } = this;
if (!this.disabled && !isUndefined(aspectRatio)) {
// 0 -> NaN
options.aspectRatio = Math.max(0, aspectRatio) || NaN;
if (this.ready) {
this.initCropBox();
if (this.cropped) {
this.renderCropBox();
}
}
}
return this;
},
/**
* Change the drag mode.
* @param {string} mode - The new drag mode.
* @returns {Cropper} this
*/
setDragMode(mode) {
const { options, dragBox, face } = this;
if (this.ready && !this.disabled) {
const croppable = mode === DRAG_MODE_CROP;
const movable = options.movable && mode === DRAG_MODE_MOVE;
mode = (croppable || movable) ? mode : DRAG_MODE_NONE;
options.dragMode = mode;
setData(dragBox, DATA_ACTION, mode);
toggleClass(dragBox, CLASS_CROP, croppable);
toggleClass(dragBox, CLASS_MOVE, movable);
if (!options.cropBoxMovable) {
// Sync drag mode to crop box when it is not movable
setData(face, DATA_ACTION, mode);
toggleClass(face, CLASS_CROP, croppable);
toggleClass(face, CLASS_MOVE, movable);
}
}
return this;
},
};

148
server/node_modules/cropperjs/src/js/preview.js generated vendored Normal file
View File

@@ -0,0 +1,148 @@
import { DATA_PREVIEW } from './constants';
import {
assign,
forEach,
getData,
getTransforms,
removeData,
setData,
setStyle,
} from './utilities';
export default {
initPreview() {
const { element, crossOrigin } = this;
const { preview } = this.options;
const url = crossOrigin ? this.crossOriginUrl : this.url;
const alt = element.alt || 'The image to preview';
const image = document.createElement('img');
if (crossOrigin) {
image.crossOrigin = crossOrigin;
}
image.src = url;
image.alt = alt;
this.viewBox.appendChild(image);
this.viewBoxImage = image;
if (!preview) {
return;
}
let previews = preview;
if (typeof preview === 'string') {
previews = element.ownerDocument.querySelectorAll(preview);
} else if (preview.querySelector) {
previews = [preview];
}
this.previews = previews;
forEach(previews, (el) => {
const img = document.createElement('img');
// Save the original size for recover
setData(el, DATA_PREVIEW, {
width: el.offsetWidth,
height: el.offsetHeight,
html: el.innerHTML,
});
if (crossOrigin) {
img.crossOrigin = crossOrigin;
}
img.src = url;
img.alt = alt;
/**
* Override img element styles
* Add `display:block` to avoid margin top issue
* Add `height:auto` to override `height` attribute on IE8
* (Occur only when margin-top <= -height)
*/
img.style.cssText = (
'display:block;'
+ 'width:100%;'
+ 'height:auto;'
+ 'min-width:0!important;'
+ 'min-height:0!important;'
+ 'max-width:none!important;'
+ 'max-height:none!important;'
+ 'image-orientation:0deg!important;"'
);
el.innerHTML = '';
el.appendChild(img);
});
},
resetPreview() {
forEach(this.previews, (element) => {
const data = getData(element, DATA_PREVIEW);
setStyle(element, {
width: data.width,
height: data.height,
});
element.innerHTML = data.html;
removeData(element, DATA_PREVIEW);
});
},
preview() {
const { imageData, canvasData, cropBoxData } = this;
const { width: cropBoxWidth, height: cropBoxHeight } = cropBoxData;
const { width, height } = imageData;
const left = cropBoxData.left - canvasData.left - imageData.left;
const top = cropBoxData.top - canvasData.top - imageData.top;
if (!this.cropped || this.disabled) {
return;
}
setStyle(this.viewBoxImage, assign({
width,
height,
}, getTransforms(assign({
translateX: -left,
translateY: -top,
}, imageData))));
forEach(this.previews, (element) => {
const data = getData(element, DATA_PREVIEW);
const originalWidth = data.width;
const originalHeight = data.height;
let newWidth = originalWidth;
let newHeight = originalHeight;
let ratio = 1;
if (cropBoxWidth) {
ratio = originalWidth / cropBoxWidth;
newHeight = cropBoxHeight * ratio;
}
if (cropBoxHeight && newHeight > originalHeight) {
ratio = originalHeight / cropBoxHeight;
newWidth = cropBoxWidth * ratio;
newHeight = originalHeight;
}
setStyle(element, {
width: newWidth,
height: newHeight,
});
setStyle(element.getElementsByTagName('img')[0], assign({
width: width * ratio,
height: height * ratio,
}, getTransforms(assign({
translateX: -left * ratio,
translateY: -top * ratio,
}, imageData))));
});
},
};

506
server/node_modules/cropperjs/src/js/render.js generated vendored Normal file
View File

@@ -0,0 +1,506 @@
import {
ACTION_ALL,
ACTION_MOVE,
CLASS_HIDDEN,
DATA_ACTION,
EVENT_CROP,
MIN_CONTAINER_HEIGHT,
MIN_CONTAINER_WIDTH,
} from './constants';
import {
addClass,
assign,
dispatchEvent,
getAdjustedSizes,
getRotatedSizes,
getTransforms,
removeClass,
setData,
setStyle,
} from './utilities';
export default {
render() {
this.initContainer();
this.initCanvas();
this.initCropBox();
this.renderCanvas();
if (this.cropped) {
this.renderCropBox();
}
},
initContainer() {
const {
element,
options,
container,
cropper,
} = this;
const minWidth = Number(options.minContainerWidth);
const minHeight = Number(options.minContainerHeight);
addClass(cropper, CLASS_HIDDEN);
removeClass(element, CLASS_HIDDEN);
const containerData = {
width: Math.max(
container.offsetWidth,
minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH,
),
height: Math.max(
container.offsetHeight,
minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT,
),
};
this.containerData = containerData;
setStyle(cropper, {
width: containerData.width,
height: containerData.height,
});
addClass(element, CLASS_HIDDEN);
removeClass(cropper, CLASS_HIDDEN);
},
// Canvas (image wrapper)
initCanvas() {
const { containerData, imageData } = this;
const { viewMode } = this.options;
const rotated = Math.abs(imageData.rotate) % 180 === 90;
const naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
const naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
const aspectRatio = naturalWidth / naturalHeight;
let canvasWidth = containerData.width;
let canvasHeight = containerData.height;
if (containerData.height * aspectRatio > containerData.width) {
if (viewMode === 3) {
canvasWidth = containerData.height * aspectRatio;
} else {
canvasHeight = containerData.width / aspectRatio;
}
} else if (viewMode === 3) {
canvasHeight = containerData.width / aspectRatio;
} else {
canvasWidth = containerData.height * aspectRatio;
}
const canvasData = {
aspectRatio,
naturalWidth,
naturalHeight,
width: canvasWidth,
height: canvasHeight,
};
this.canvasData = canvasData;
this.limited = (viewMode === 1 || viewMode === 2);
this.limitCanvas(true, true);
canvasData.width = Math.min(
Math.max(canvasData.width, canvasData.minWidth),
canvasData.maxWidth,
);
canvasData.height = Math.min(
Math.max(canvasData.height, canvasData.minHeight),
canvasData.maxHeight,
);
canvasData.left = (containerData.width - canvasData.width) / 2;
canvasData.top = (containerData.height - canvasData.height) / 2;
canvasData.oldLeft = canvasData.left;
canvasData.oldTop = canvasData.top;
this.initialCanvasData = assign({}, canvasData);
},
limitCanvas(sizeLimited, positionLimited) {
const {
options,
containerData,
canvasData,
cropBoxData,
} = this;
const { viewMode } = options;
const { aspectRatio } = canvasData;
const cropped = this.cropped && cropBoxData;
if (sizeLimited) {
let minCanvasWidth = Number(options.minCanvasWidth) || 0;
let minCanvasHeight = Number(options.minCanvasHeight) || 0;
if (viewMode > 1) {
minCanvasWidth = Math.max(minCanvasWidth, containerData.width);
minCanvasHeight = Math.max(minCanvasHeight, containerData.height);
if (viewMode === 3) {
if (minCanvasHeight * aspectRatio > minCanvasWidth) {
minCanvasWidth = minCanvasHeight * aspectRatio;
} else {
minCanvasHeight = minCanvasWidth / aspectRatio;
}
}
} else if (viewMode > 0) {
if (minCanvasWidth) {
minCanvasWidth = Math.max(
minCanvasWidth,
cropped ? cropBoxData.width : 0,
);
} else if (minCanvasHeight) {
minCanvasHeight = Math.max(
minCanvasHeight,
cropped ? cropBoxData.height : 0,
);
} else if (cropped) {
minCanvasWidth = cropBoxData.width;
minCanvasHeight = cropBoxData.height;
if (minCanvasHeight * aspectRatio > minCanvasWidth) {
minCanvasWidth = minCanvasHeight * aspectRatio;
} else {
minCanvasHeight = minCanvasWidth / aspectRatio;
}
}
}
({ width: minCanvasWidth, height: minCanvasHeight } = getAdjustedSizes({
aspectRatio,
width: minCanvasWidth,
height: minCanvasHeight,
}));
canvasData.minWidth = minCanvasWidth;
canvasData.minHeight = minCanvasHeight;
canvasData.maxWidth = Infinity;
canvasData.maxHeight = Infinity;
}
if (positionLimited) {
if (viewMode > (cropped ? 0 : 1)) {
const newCanvasLeft = containerData.width - canvasData.width;
const newCanvasTop = containerData.height - canvasData.height;
canvasData.minLeft = Math.min(0, newCanvasLeft);
canvasData.minTop = Math.min(0, newCanvasTop);
canvasData.maxLeft = Math.max(0, newCanvasLeft);
canvasData.maxTop = Math.max(0, newCanvasTop);
if (cropped && this.limited) {
canvasData.minLeft = Math.min(
cropBoxData.left,
cropBoxData.left + (cropBoxData.width - canvasData.width),
);
canvasData.minTop = Math.min(
cropBoxData.top,
cropBoxData.top + (cropBoxData.height - canvasData.height),
);
canvasData.maxLeft = cropBoxData.left;
canvasData.maxTop = cropBoxData.top;
if (viewMode === 2) {
if (canvasData.width >= containerData.width) {
canvasData.minLeft = Math.min(0, newCanvasLeft);
canvasData.maxLeft = Math.max(0, newCanvasLeft);
}
if (canvasData.height >= containerData.height) {
canvasData.minTop = Math.min(0, newCanvasTop);
canvasData.maxTop = Math.max(0, newCanvasTop);
}
}
}
} else {
canvasData.minLeft = -canvasData.width;
canvasData.minTop = -canvasData.height;
canvasData.maxLeft = containerData.width;
canvasData.maxTop = containerData.height;
}
}
},
renderCanvas(changed, transformed) {
const { canvasData, imageData } = this;
if (transformed) {
const { width: naturalWidth, height: naturalHeight } = getRotatedSizes({
width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),
degree: imageData.rotate || 0,
});
const width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
const height = canvasData.height * (naturalHeight / canvasData.naturalHeight);
canvasData.left -= (width - canvasData.width) / 2;
canvasData.top -= (height - canvasData.height) / 2;
canvasData.width = width;
canvasData.height = height;
canvasData.aspectRatio = naturalWidth / naturalHeight;
canvasData.naturalWidth = naturalWidth;
canvasData.naturalHeight = naturalHeight;
this.limitCanvas(true, false);
}
if (canvasData.width > canvasData.maxWidth
|| canvasData.width < canvasData.minWidth) {
canvasData.left = canvasData.oldLeft;
}
if (canvasData.height > canvasData.maxHeight
|| canvasData.height < canvasData.minHeight) {
canvasData.top = canvasData.oldTop;
}
canvasData.width = Math.min(
Math.max(canvasData.width, canvasData.minWidth),
canvasData.maxWidth,
);
canvasData.height = Math.min(
Math.max(canvasData.height, canvasData.minHeight),
canvasData.maxHeight,
);
this.limitCanvas(false, true);
canvasData.left = Math.min(
Math.max(canvasData.left, canvasData.minLeft),
canvasData.maxLeft,
);
canvasData.top = Math.min(
Math.max(canvasData.top, canvasData.minTop),
canvasData.maxTop,
);
canvasData.oldLeft = canvasData.left;
canvasData.oldTop = canvasData.top;
setStyle(this.canvas, assign({
width: canvasData.width,
height: canvasData.height,
}, getTransforms({
translateX: canvasData.left,
translateY: canvasData.top,
})));
this.renderImage(changed);
if (this.cropped && this.limited) {
this.limitCropBox(true, true);
}
},
renderImage(changed) {
const { canvasData, imageData } = this;
const width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
const height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
assign(imageData, {
width,
height,
left: (canvasData.width - width) / 2,
top: (canvasData.height - height) / 2,
});
setStyle(this.image, assign({
width: imageData.width,
height: imageData.height,
}, getTransforms(assign({
translateX: imageData.left,
translateY: imageData.top,
}, imageData))));
if (changed) {
this.output();
}
},
initCropBox() {
const { options, canvasData } = this;
const aspectRatio = options.aspectRatio || options.initialAspectRatio;
const autoCropArea = Number(options.autoCropArea) || 0.8;
const cropBoxData = {
width: canvasData.width,
height: canvasData.height,
};
if (aspectRatio) {
if (canvasData.height * aspectRatio > canvasData.width) {
cropBoxData.height = cropBoxData.width / aspectRatio;
} else {
cropBoxData.width = cropBoxData.height * aspectRatio;
}
}
this.cropBoxData = cropBoxData;
this.limitCropBox(true, true);
// Initialize auto crop area
cropBoxData.width = Math.min(
Math.max(cropBoxData.width, cropBoxData.minWidth),
cropBoxData.maxWidth,
);
cropBoxData.height = Math.min(
Math.max(cropBoxData.height, cropBoxData.minHeight),
cropBoxData.maxHeight,
);
// The width/height of auto crop area must large than "minWidth/Height"
cropBoxData.width = Math.max(
cropBoxData.minWidth,
cropBoxData.width * autoCropArea,
);
cropBoxData.height = Math.max(
cropBoxData.minHeight,
cropBoxData.height * autoCropArea,
);
cropBoxData.left = (
canvasData.left + ((canvasData.width - cropBoxData.width) / 2)
);
cropBoxData.top = (
canvasData.top + ((canvasData.height - cropBoxData.height) / 2)
);
cropBoxData.oldLeft = cropBoxData.left;
cropBoxData.oldTop = cropBoxData.top;
this.initialCropBoxData = assign({}, cropBoxData);
},
limitCropBox(sizeLimited, positionLimited) {
const {
options,
containerData,
canvasData,
cropBoxData,
limited,
} = this;
const { aspectRatio } = options;
if (sizeLimited) {
let minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
let minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
let maxCropBoxWidth = limited ? Math.min(
containerData.width,
canvasData.width,
canvasData.width + canvasData.left,
containerData.width - canvasData.left,
) : containerData.width;
let maxCropBoxHeight = limited ? Math.min(
containerData.height,
canvasData.height,
canvasData.height + canvasData.top,
containerData.height - canvasData.top,
) : containerData.height;
// The min/maxCropBoxWidth/Height must be less than container's width/height
minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);
minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);
if (aspectRatio) {
if (minCropBoxWidth && minCropBoxHeight) {
if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {
minCropBoxHeight = minCropBoxWidth / aspectRatio;
} else {
minCropBoxWidth = minCropBoxHeight * aspectRatio;
}
} else if (minCropBoxWidth) {
minCropBoxHeight = minCropBoxWidth / aspectRatio;
} else if (minCropBoxHeight) {
minCropBoxWidth = minCropBoxHeight * aspectRatio;
}
if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {
maxCropBoxHeight = maxCropBoxWidth / aspectRatio;
} else {
maxCropBoxWidth = maxCropBoxHeight * aspectRatio;
}
}
// The minWidth/Height must be less than maxWidth/Height
cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);
cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);
cropBoxData.maxWidth = maxCropBoxWidth;
cropBoxData.maxHeight = maxCropBoxHeight;
}
if (positionLimited) {
if (limited) {
cropBoxData.minLeft = Math.max(0, canvasData.left);
cropBoxData.minTop = Math.max(0, canvasData.top);
cropBoxData.maxLeft = Math.min(
containerData.width,
canvasData.left + canvasData.width,
) - cropBoxData.width;
cropBoxData.maxTop = Math.min(
containerData.height,
canvasData.top + canvasData.height,
) - cropBoxData.height;
} else {
cropBoxData.minLeft = 0;
cropBoxData.minTop = 0;
cropBoxData.maxLeft = containerData.width - cropBoxData.width;
cropBoxData.maxTop = containerData.height - cropBoxData.height;
}
}
},
renderCropBox() {
const { options, containerData, cropBoxData } = this;
if (cropBoxData.width > cropBoxData.maxWidth
|| cropBoxData.width < cropBoxData.minWidth) {
cropBoxData.left = cropBoxData.oldLeft;
}
if (cropBoxData.height > cropBoxData.maxHeight
|| cropBoxData.height < cropBoxData.minHeight) {
cropBoxData.top = cropBoxData.oldTop;
}
cropBoxData.width = Math.min(
Math.max(cropBoxData.width, cropBoxData.minWidth),
cropBoxData.maxWidth,
);
cropBoxData.height = Math.min(
Math.max(cropBoxData.height, cropBoxData.minHeight),
cropBoxData.maxHeight,
);
this.limitCropBox(false, true);
cropBoxData.left = Math.min(
Math.max(cropBoxData.left, cropBoxData.minLeft),
cropBoxData.maxLeft,
);
cropBoxData.top = Math.min(
Math.max(cropBoxData.top, cropBoxData.minTop),
cropBoxData.maxTop,
);
cropBoxData.oldLeft = cropBoxData.left;
cropBoxData.oldTop = cropBoxData.top;
if (options.movable && options.cropBoxMovable) {
// Turn to move the canvas when the crop box is equal to the container
setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width
&& cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);
}
setStyle(this.cropBox, assign({
width: cropBoxData.width,
height: cropBoxData.height,
}, getTransforms({
translateX: cropBoxData.left,
translateY: cropBoxData.top,
})));
if (this.cropped && this.limited) {
this.limitCanvas(true, true);
}
if (!this.disabled) {
this.output();
}
},
output() {
this.preview();
dispatchEvent(this.element, EVENT_CROP, this.getData());
},
};

27
server/node_modules/cropperjs/src/js/template.js generated vendored Normal file
View File

@@ -0,0 +1,27 @@
export default (
'<div class="cropper-container" touch-action="none">'
+ '<div class="cropper-wrap-box">'
+ '<div class="cropper-canvas"></div>'
+ '</div>'
+ '<div class="cropper-drag-box"></div>'
+ '<div class="cropper-crop-box">'
+ '<span class="cropper-view-box"></span>'
+ '<span class="cropper-dashed dashed-h"></span>'
+ '<span class="cropper-dashed dashed-v"></span>'
+ '<span class="cropper-center"></span>'
+ '<span class="cropper-face"></span>'
+ '<span class="cropper-line line-e" data-cropper-action="e"></span>'
+ '<span class="cropper-line line-n" data-cropper-action="n"></span>'
+ '<span class="cropper-line line-w" data-cropper-action="w"></span>'
+ '<span class="cropper-line line-s" data-cropper-action="s"></span>'
+ '<span class="cropper-point point-e" data-cropper-action="e"></span>'
+ '<span class="cropper-point point-n" data-cropper-action="n"></span>'
+ '<span class="cropper-point point-w" data-cropper-action="w"></span>'
+ '<span class="cropper-point point-s" data-cropper-action="s"></span>'
+ '<span class="cropper-point point-ne" data-cropper-action="ne"></span>'
+ '<span class="cropper-point point-nw" data-cropper-action="nw"></span>'
+ '<span class="cropper-point point-sw" data-cropper-action="sw"></span>'
+ '<span class="cropper-point point-se" data-cropper-action="se"></span>'
+ '</div>'
+ '</div>'
);

963
server/node_modules/cropperjs/src/js/utilities.js generated vendored Normal file
View File

@@ -0,0 +1,963 @@
import { IS_BROWSER, WINDOW } from './constants';
/**
* Check if the given value is not a number.
*/
export const isNaN = Number.isNaN || WINDOW.isNaN;
/**
* Check if the given value is a number.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is a number, else `false`.
*/
export function isNumber(value) {
return typeof value === 'number' && !isNaN(value);
}
/**
* Check if the given value is a positive number.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is a positive number, else `false`.
*/
export const isPositiveNumber = (value) => value > 0 && value < Infinity;
/**
* Check if the given value is undefined.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is undefined, else `false`.
*/
export function isUndefined(value) {
return typeof value === 'undefined';
}
/**
* Check if the given value is an object.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is an object, else `false`.
*/
export function isObject(value) {
return typeof value === 'object' && value !== null;
}
const { hasOwnProperty } = Object.prototype;
/**
* Check if the given value is a plain object.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is a plain object, else `false`.
*/
export function isPlainObject(value) {
if (!isObject(value)) {
return false;
}
try {
const { constructor } = value;
const { prototype } = constructor;
return constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');
} catch (error) {
return false;
}
}
/**
* Check if the given value is a function.
* @param {*} value - The value to check.
* @returns {boolean} Returns `true` if the given value is a function, else `false`.
*/
export function isFunction(value) {
return typeof value === 'function';
}
const { slice } = Array.prototype;
/**
* Convert array-like or iterable object to an array.
* @param {*} value - The value to convert.
* @returns {Array} Returns a new array.
*/
export function toArray(value) {
return Array.from ? Array.from(value) : slice.call(value);
}
/**
* Iterate the given data.
* @param {*} data - The data to iterate.
* @param {Function} callback - The process function for each element.
* @returns {*} The original data.
*/
export function forEach(data, callback) {
if (data && isFunction(callback)) {
if (Array.isArray(data) || isNumber(data.length)/* array-like */) {
toArray(data).forEach((value, key) => {
callback.call(data, value, key, data);
});
} else if (isObject(data)) {
Object.keys(data).forEach((key) => {
callback.call(data, data[key], key, data);
});
}
}
return data;
}
/**
* Extend the given object.
* @param {*} target - The target object to extend.
* @param {*} args - The rest objects for merging to the target object.
* @returns {Object} The extended object.
*/
export const assign = Object.assign || function assign(target, ...args) {
if (isObject(target) && args.length > 0) {
args.forEach((arg) => {
if (isObject(arg)) {
Object.keys(arg).forEach((key) => {
target[key] = arg[key];
});
}
});
}
return target;
};
const REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
/**
* Normalize decimal number.
* Check out {@link https://0.30000000000000004.com/}
* @param {number} value - The value to normalize.
* @param {number} [times=100000000000] - The times for normalizing.
* @returns {number} Returns the normalized number.
*/
export function normalizeDecimalNumber(value, times = 100000000000) {
return REGEXP_DECIMALS.test(value) ? (Math.round(value * times) / times) : value;
}
const REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/;
/**
* Apply styles to the given element.
* @param {Element} element - The target element.
* @param {Object} styles - The styles for applying.
*/
export function setStyle(element, styles) {
const { style } = element;
forEach(styles, (value, property) => {
if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
value = `${value}px`;
}
style[property] = value;
});
}
/**
* Check if the given element has a special class.
* @param {Element} element - The element to check.
* @param {string} value - The class to search.
* @returns {boolean} Returns `true` if the special class was found.
*/
export function hasClass(element, value) {
return element.classList
? element.classList.contains(value)
: element.className.indexOf(value) > -1;
}
/**
* Add classes to the given element.
* @param {Element} element - The target element.
* @param {string} value - The classes to be added.
*/
export function addClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, (elem) => {
addClass(elem, value);
});
return;
}
if (element.classList) {
element.classList.add(value);
return;
}
const className = element.className.trim();
if (!className) {
element.className = value;
} else if (className.indexOf(value) < 0) {
element.className = `${className} ${value}`;
}
}
/**
* Remove classes from the given element.
* @param {Element} element - The target element.
* @param {string} value - The classes to be removed.
*/
export function removeClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, (elem) => {
removeClass(elem, value);
});
return;
}
if (element.classList) {
element.classList.remove(value);
return;
}
if (element.className.indexOf(value) >= 0) {
element.className = element.className.replace(value, '');
}
}
/**
* Add or remove classes from the given element.
* @param {Element} element - The target element.
* @param {string} value - The classes to be toggled.
* @param {boolean} added - Add only.
*/
export function toggleClass(element, value, added) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, (elem) => {
toggleClass(elem, value, added);
});
return;
}
// IE10-11 doesn't support the second parameter of `classList.toggle`
if (added) {
addClass(element, value);
} else {
removeClass(element, value);
}
}
const REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g;
/**
* Transform the given string from camelCase to kebab-case
* @param {string} value - The value to transform.
* @returns {string} The transformed value.
*/
export function toParamCase(value) {
return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase();
}
/**
* Get data from the given element.
* @param {Element} element - The target element.
* @param {string} name - The data key to get.
* @returns {string} The data value.
*/
export function getData(element, name) {
if (isObject(element[name])) {
return element[name];
}
if (element.dataset) {
return element.dataset[name];
}
return element.getAttribute(`data-${toParamCase(name)}`);
}
/**
* Set data to the given element.
* @param {Element} element - The target element.
* @param {string} name - The data key to set.
* @param {string} data - The data value.
*/
export function setData(element, name, data) {
if (isObject(data)) {
element[name] = data;
} else if (element.dataset) {
element.dataset[name] = data;
} else {
element.setAttribute(`data-${toParamCase(name)}`, data);
}
}
/**
* Remove data from the given element.
* @param {Element} element - The target element.
* @param {string} name - The data key to remove.
*/
export function removeData(element, name) {
if (isObject(element[name])) {
try {
delete element[name];
} catch (error) {
element[name] = undefined;
}
} else if (element.dataset) {
// #128 Safari not allows to delete dataset property
try {
delete element.dataset[name];
} catch (error) {
element.dataset[name] = undefined;
}
} else {
element.removeAttribute(`data-${toParamCase(name)}`);
}
}
const REGEXP_SPACES = /\s\s*/;
const onceSupported = (() => {
let supported = false;
if (IS_BROWSER) {
let once = false;
const listener = () => {};
const options = Object.defineProperty({}, 'once', {
get() {
supported = true;
return once;
},
/**
* This setter can fix a `TypeError` in strict mode
* {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}
* @param {boolean} value - The value to set
*/
set(value) {
once = value;
},
});
WINDOW.addEventListener('test', listener, options);
WINDOW.removeEventListener('test', listener, options);
}
return supported;
})();
/**
* Remove event listener from the target element.
* @param {Element} element - The event target.
* @param {string} type - The event type(s).
* @param {Function} listener - The event listener.
* @param {Object} options - The event options.
*/
export function removeListener(element, type, listener, options = {}) {
let handler = listener;
type.trim().split(REGEXP_SPACES).forEach((event) => {
if (!onceSupported) {
const { listeners } = element;
if (listeners && listeners[event] && listeners[event][listener]) {
handler = listeners[event][listener];
delete listeners[event][listener];
if (Object.keys(listeners[event]).length === 0) {
delete listeners[event];
}
if (Object.keys(listeners).length === 0) {
delete element.listeners;
}
}
}
element.removeEventListener(event, handler, options);
});
}
/**
* Add event listener to the target element.
* @param {Element} element - The event target.
* @param {string} type - The event type(s).
* @param {Function} listener - The event listener.
* @param {Object} options - The event options.
*/
export function addListener(element, type, listener, options = {}) {
let handler = listener;
type.trim().split(REGEXP_SPACES).forEach((event) => {
if (options.once && !onceSupported) {
const { listeners = {} } = element;
handler = (...args) => {
delete listeners[event][listener];
element.removeEventListener(event, handler, options);
listener.apply(element, args);
};
if (!listeners[event]) {
listeners[event] = {};
}
if (listeners[event][listener]) {
element.removeEventListener(event, listeners[event][listener], options);
}
listeners[event][listener] = handler;
element.listeners = listeners;
}
element.addEventListener(event, handler, options);
});
}
/**
* Dispatch event on the target element.
* @param {Element} element - The event target.
* @param {string} type - The event type(s).
* @param {Object} data - The additional event data.
* @returns {boolean} Indicate if the event is default prevented or not.
*/
export function dispatchEvent(element, type, data) {
let event;
// Event and CustomEvent on IE9-11 are global objects, not constructors
if (isFunction(Event) && isFunction(CustomEvent)) {
event = new CustomEvent(type, {
detail: data,
bubbles: true,
cancelable: true,
});
} else {
event = document.createEvent('CustomEvent');
event.initCustomEvent(type, true, true, data);
}
return element.dispatchEvent(event);
}
/**
* Get the offset base on the document.
* @param {Element} element - The target element.
* @returns {Object} The offset data.
*/
export function getOffset(element) {
const box = element.getBoundingClientRect();
return {
left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
top: box.top + (window.pageYOffset - document.documentElement.clientTop),
};
}
const { location } = WINDOW;
const REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
/**
* Check if the given URL is a cross origin URL.
* @param {string} url - The target URL.
* @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`.
*/
export function isCrossOriginURL(url) {
const parts = url.match(REGEXP_ORIGINS);
return parts !== null && (
parts[1] !== location.protocol
|| parts[2] !== location.hostname
|| parts[3] !== location.port
);
}
/**
* Add timestamp to the given URL.
* @param {string} url - The target URL.
* @returns {string} The result URL.
*/
export function addTimestamp(url) {
const timestamp = `timestamp=${(new Date()).getTime()}`;
return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;
}
/**
* Get transforms base on the given object.
* @param {Object} obj - The target object.
* @returns {string} A string contains transform values.
*/
export function getTransforms({
rotate,
scaleX,
scaleY,
translateX,
translateY,
}) {
const values = [];
if (isNumber(translateX) && translateX !== 0) {
values.push(`translateX(${translateX}px)`);
}
if (isNumber(translateY) && translateY !== 0) {
values.push(`translateY(${translateY}px)`);
}
// Rotate should come first before scale to match orientation transform
if (isNumber(rotate) && rotate !== 0) {
values.push(`rotate(${rotate}deg)`);
}
if (isNumber(scaleX) && scaleX !== 1) {
values.push(`scaleX(${scaleX})`);
}
if (isNumber(scaleY) && scaleY !== 1) {
values.push(`scaleY(${scaleY})`);
}
const transform = values.length ? values.join(' ') : 'none';
return {
WebkitTransform: transform,
msTransform: transform,
transform,
};
}
/**
* Get the max ratio of a group of pointers.
* @param {string} pointers - The target pointers.
* @returns {number} The result ratio.
*/
export function getMaxZoomRatio(pointers) {
const pointers2 = { ...pointers };
let maxRatio = 0;
forEach(pointers, (pointer, pointerId) => {
delete pointers2[pointerId];
forEach(pointers2, (pointer2) => {
const x1 = Math.abs(pointer.startX - pointer2.startX);
const y1 = Math.abs(pointer.startY - pointer2.startY);
const x2 = Math.abs(pointer.endX - pointer2.endX);
const y2 = Math.abs(pointer.endY - pointer2.endY);
const z1 = Math.sqrt((x1 * x1) + (y1 * y1));
const z2 = Math.sqrt((x2 * x2) + (y2 * y2));
const ratio = (z2 - z1) / z1;
if (Math.abs(ratio) > Math.abs(maxRatio)) {
maxRatio = ratio;
}
});
});
return maxRatio;
}
/**
* Get a pointer from an event object.
* @param {Object} event - The target event object.
* @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.
* @returns {Object} The result pointer contains start and/or end point coordinates.
*/
export function getPointer({ pageX, pageY }, endOnly) {
const end = {
endX: pageX,
endY: pageY,
};
return endOnly ? end : ({
startX: pageX,
startY: pageY,
...end,
});
}
/**
* Get the center point coordinate of a group of pointers.
* @param {Object} pointers - The target pointers.
* @returns {Object} The center point coordinate.
*/
export function getPointersCenter(pointers) {
let pageX = 0;
let pageY = 0;
let count = 0;
forEach(pointers, ({ startX, startY }) => {
pageX += startX;
pageY += startY;
count += 1;
});
pageX /= count;
pageY /= count;
return {
pageX,
pageY,
};
}
/**
* Get the max sizes in a rectangle under the given aspect ratio.
* @param {Object} data - The original sizes.
* @param {string} [type='contain'] - The adjust type.
* @returns {Object} The result sizes.
*/
export function getAdjustedSizes(
{
aspectRatio,
height,
width,
},
type = 'contain', // or 'cover'
) {
const isValidWidth = isPositiveNumber(width);
const isValidHeight = isPositiveNumber(height);
if (isValidWidth && isValidHeight) {
const adjustedWidth = height * aspectRatio;
if ((type === 'contain' && adjustedWidth > width) || (type === 'cover' && adjustedWidth < width)) {
height = width / aspectRatio;
} else {
width = height * aspectRatio;
}
} else if (isValidWidth) {
height = width / aspectRatio;
} else if (isValidHeight) {
width = height * aspectRatio;
}
return {
width,
height,
};
}
/**
* Get the new sizes of a rectangle after rotated.
* @param {Object} data - The original sizes.
* @returns {Object} The result sizes.
*/
export function getRotatedSizes({ width, height, degree }) {
degree = Math.abs(degree) % 180;
if (degree === 90) {
return {
width: height,
height: width,
};
}
const arc = ((degree % 90) * Math.PI) / 180;
const sinArc = Math.sin(arc);
const cosArc = Math.cos(arc);
const newWidth = (width * cosArc) + (height * sinArc);
const newHeight = (width * sinArc) + (height * cosArc);
return degree > 90 ? {
width: newHeight,
height: newWidth,
} : {
width: newWidth,
height: newHeight,
};
}
/**
* Get a canvas which drew the given image.
* @param {HTMLImageElement} image - The image for drawing.
* @param {Object} imageData - The image data.
* @param {Object} canvasData - The canvas data.
* @param {Object} options - The options.
* @returns {HTMLCanvasElement} The result canvas.
*/
export function getSourceCanvas(
image,
{
aspectRatio: imageAspectRatio,
naturalWidth: imageNaturalWidth,
naturalHeight: imageNaturalHeight,
rotate = 0,
scaleX = 1,
scaleY = 1,
},
{
aspectRatio,
naturalWidth,
naturalHeight,
},
{
fillColor = 'transparent',
imageSmoothingEnabled = true,
imageSmoothingQuality = 'low',
maxWidth = Infinity,
maxHeight = Infinity,
minWidth = 0,
minHeight = 0,
},
) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const maxSizes = getAdjustedSizes({
aspectRatio,
width: maxWidth,
height: maxHeight,
});
const minSizes = getAdjustedSizes({
aspectRatio,
width: minWidth,
height: minHeight,
}, 'cover');
const width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
const height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));
// Note: should always use image's natural sizes for drawing as
// imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90
const destMaxSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: maxWidth,
height: maxHeight,
});
const destMinSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: minWidth,
height: minHeight,
}, 'cover');
const destWidth = Math.min(
destMaxSizes.width,
Math.max(destMinSizes.width, imageNaturalWidth),
);
const destHeight = Math.min(
destMaxSizes.height,
Math.max(destMinSizes.height, imageNaturalHeight),
);
const params = [
-destWidth / 2,
-destHeight / 2,
destWidth,
destHeight,
];
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
context.fillStyle = fillColor;
context.fillRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.rotate((rotate * Math.PI) / 180);
context.scale(scaleX, scaleY);
context.imageSmoothingEnabled = imageSmoothingEnabled;
context.imageSmoothingQuality = imageSmoothingQuality;
context.drawImage(image, ...params.map((param) => Math.floor(normalizeDecimalNumber(param))));
context.restore();
return canvas;
}
const { fromCharCode } = String;
/**
* Get string from char code in data view.
* @param {DataView} dataView - The data view for read.
* @param {number} start - The start index.
* @param {number} length - The read length.
* @returns {string} The read result.
*/
export function getStringFromCharCode(dataView, start, length) {
let str = '';
length += start;
for (let i = start; i < length; i += 1) {
str += fromCharCode(dataView.getUint8(i));
}
return str;
}
const REGEXP_DATA_URL_HEAD = /^data:.*,/;
/**
* Transform Data URL to array buffer.
* @param {string} dataURL - The Data URL to transform.
* @returns {ArrayBuffer} The result array buffer.
*/
export function dataURLToArrayBuffer(dataURL) {
const base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
const binary = atob(base64);
const arrayBuffer = new ArrayBuffer(binary.length);
const uint8 = new Uint8Array(arrayBuffer);
forEach(uint8, (value, i) => {
uint8[i] = binary.charCodeAt(i);
});
return arrayBuffer;
}
/**
* Transform array buffer to Data URL.
* @param {ArrayBuffer} arrayBuffer - The array buffer to transform.
* @param {string} mimeType - The mime type of the Data URL.
* @returns {string} The result Data URL.
*/
export function arrayBufferToDataURL(arrayBuffer, mimeType) {
const chunks = [];
// Chunk Typed Array for better performance (#435)
const chunkSize = 8192;
let uint8 = new Uint8Array(arrayBuffer);
while (uint8.length > 0) {
// XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9
// eslint-disable-next-line prefer-spread
chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));
uint8 = uint8.subarray(chunkSize);
}
return `data:${mimeType};base64,${btoa(chunks.join(''))}`;
}
/**
* Get orientation value from given array buffer.
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
* @returns {number} The read orientation value.
*/
export function resetAndGetOrientation(arrayBuffer) {
const dataView = new DataView(arrayBuffer);
let orientation;
// Ignores range error when the image does not have correct Exif information
try {
let littleEndian;
let app1Start;
let ifdStart;
// Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
const length = dataView.byteLength;
let offset = 2;
while (offset + 1 < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset += 1;
}
}
if (app1Start) {
const exifIDCode = app1Start + 4;
const tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
const endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
const firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
const length = dataView.getUint16(ifdStart, littleEndian);
let offset;
let i;
for (i = 0; i < length; i += 1) {
offset = ifdStart + (i * 12) + 2;
if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
// 8 is the offset of the current tag's value
offset += 8;
// Get the original orientation value
orientation = dataView.getUint16(offset, littleEndian);
// Override the orientation with its default value
dataView.setUint16(offset, 1, littleEndian);
break;
}
}
}
} catch (error) {
orientation = 1;
}
return orientation;
}
/**
* Parse Exif Orientation value.
* @param {number} orientation - The orientation to parse.
* @returns {Object} The parsed result.
*/
export function parseOrientation(orientation) {
let rotate = 0;
let scaleX = 1;
let scaleY = 1;
switch (orientation) {
// Flip horizontal
case 2:
scaleX = -1;
break;
// Rotate left 180°
case 3:
rotate = -180;
break;
// Flip vertical
case 4:
scaleY = -1;
break;
// Flip vertical and rotate right 90°
case 5:
rotate = 90;
scaleY = -1;
break;
// Rotate right 90°
case 6:
rotate = 90;
break;
// Flip horizontal and rotate right 90°
case 7:
rotate = 90;
scaleX = -1;
break;
// Rotate left 90°
case 8:
rotate = -90;
break;
default:
}
return {
rotate,
scaleX,
scaleY,
};
}

204
server/node_modules/cropperjs/types/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,204 @@
declare namespace Cropper {
export type Action = 'crop' | 'move' | 'zoom' | 'e' | 's' | 'w' | 'n' | 'ne' | 'nw' | 'se' | 'sw' | 'all';
export type DragMode = 'crop' | 'move' | 'none';
export type ImageSmoothingQuality = 'low' | 'medium' | 'high';
export type ViewMode = 0 | 1 | 2 | 3;
export interface Data {
x: number;
y: number;
width: number;
height: number;
rotate: number;
scaleX: number;
scaleY: number;
}
export interface ContainerData {
width: number;
height: number;
}
export interface ImageData {
left: number;
top: number;
width: number;
height: number;
rotate: number;
scaleX: number;
scaleY: number;
naturalWidth: number;
naturalHeight: number;
aspectRatio: number;
}
export interface CanvasData {
left: number;
top: number;
width: number;
height: number;
naturalWidth: number;
naturalHeight: number;
}
export interface CropBoxData {
left: number;
top: number;
width: number;
height: number;
}
export interface GetCroppedCanvasOptions {
width?: number;
height?: number;
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
rounded?: boolean;
fillColor?: string;
imageSmoothingEnabled?: boolean;
imageSmoothingQuality?: ImageSmoothingQuality;
}
export interface SetDataOptions {
x?: number;
y?: number;
width?: number;
height?: number;
rotate?: number;
scaleX?: number;
scaleY?: number;
}
export interface SetCanvasDataOptions {
left?: number;
top?: number;
width?: number;
height?: number;
}
export interface SetCropBoxDataOptions {
left?: number;
top?: number;
width?: number;
height?: number;
}
interface CropperEvent<T extends EventTarget = EventTarget> extends CustomEvent {
currentTarget: T & { cropper: Cropper };
}
export type ReadyEvent<T extends EventTarget> = CropperEvent<T>
export interface CropEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: Data;
}
export interface CropEventData {
originalEvent: PointerEvent | TouchEvent | MouseEvent;
action: Action;
}
export interface CropStartEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData;
}
export interface CropMoveEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData;
}
export interface CropEndEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: CropEventData;
}
export interface ZoomEventData {
originalEvent: WheelEvent | PointerEvent | TouchEvent | MouseEvent;
oldRatio: number;
ratio: number;
}
export interface ZoomEvent<T extends EventTarget = EventTarget> extends CropperEvent<T> {
detail: ZoomEventData;
}
export interface Options<T extends EventTarget = EventTarget> {
aspectRatio?: number;
autoCrop?: boolean;
autoCropArea?: number;
background?: boolean;
center?: boolean;
checkCrossOrigin?: boolean;
checkOrientation?: boolean;
cropBoxMovable?: boolean;
cropBoxResizable?: boolean;
data?: SetDataOptions;
dragMode?: DragMode;
guides?: boolean;
highlight?: boolean;
initialAspectRatio?: number;
minCanvasHeight?: number;
minCanvasWidth?: number;
minContainerHeight?: number;
minContainerWidth?: number;
minCropBoxHeight?: number;
minCropBoxWidth?: number;
modal?: boolean;
movable?: boolean;
preview?: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement> | string;
responsive?: boolean;
restore?: boolean;
rotatable?: boolean;
scalable?: boolean;
toggleDragModeOnDblclick?: boolean;
viewMode?: ViewMode;
wheelZoomRatio?: number;
zoomOnTouch?: boolean;
zoomOnWheel?: boolean;
zoomable?: boolean;
ready?(event: ReadyEvent<T>): void;
crop?(event: CropEvent<T>): void;
cropend?(event: CropEndEvent<T>): void;
cropmove?(event: CropMoveEvent<T>): void;
cropstart?(event: CropStartEvent<T>): void;
zoom?(event: ZoomEvent<T>): void;
}
}
declare class Cropper {
constructor(element: HTMLImageElement, options?: Cropper.Options<HTMLImageElement>);
constructor(element: HTMLCanvasElement, options?: Cropper.Options<HTMLCanvasElement>);
clear(): Cropper;
crop(): Cropper;
destroy(): Cropper;
disable(): Cropper;
enable(): Cropper;
getCanvasData(): Cropper.CanvasData;
getContainerData(): Cropper.ContainerData;
getCropBoxData(): Cropper.CropBoxData;
getCroppedCanvas(options?: Cropper.GetCroppedCanvasOptions): HTMLCanvasElement;
getData(rounded?: boolean): Cropper.Data;
getImageData(): Cropper.ImageData;
move(offsetX: number, offsetY?: number): Cropper;
moveTo(x: number, y?: number): Cropper;
replace(url: string, onlyColorChanged?: boolean): Cropper;
reset(): Cropper;
rotate(degree: number): Cropper;
rotateTo(degree: number): Cropper;
scale(scaleX: number, scaleY?: number): Cropper;
scaleX(scaleX: number): Cropper;
scaleY(scaleY: number): Cropper;
setAspectRatio(aspectRatio: number): Cropper;
setCanvasData(data: Cropper.SetCanvasDataOptions): Cropper;
setCropBoxData(data: Cropper.SetCropBoxDataOptions): Cropper;
setData(data: Cropper.SetDataOptions): Cropper;
setDragMode(dragMode: Cropper.DragMode): Cropper;
zoom(ratio: number): Cropper;
zoomTo(ratio: number, pivot?: { x: number; y: number }): Cropper;
static noConflict(): Cropper;
static setDefaults(options: Cropper.Options<EventTarget>): void;
}
declare module 'cropperjs' {
export default Cropper;
}