Showing preview only (795K chars total). Download the full file or copy to clipboard to get everything.
Repository: fengyuanchen/cropper
Branch: master
Commit: e5d78e52f683
Files: 41
Total size: 770.3 KB
Directory structure:
gitextract_v2xkuq6t/
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ └── bug_report.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── composer.json
├── dist/
│ ├── cropper.common.js
│ ├── cropper.css
│ ├── cropper.esm.js
│ └── cropper.js
├── docs/
│ ├── css/
│ │ ├── cropper.css
│ │ └── main.css
│ ├── index.html
│ ├── js/
│ │ ├── cropper.js
│ │ └── main.js
│ ├── v2.3.4/
│ │ ├── css/
│ │ │ ├── cropper.css
│ │ │ └── main.css
│ │ ├── index.html
│ │ └── js/
│ │ ├── cropper.js
│ │ └── main.js
│ └── v3.1.6/
│ ├── css/
│ │ ├── cropper.css
│ │ └── main.css
│ ├── index.html
│ └── js/
│ ├── cropper.js
│ └── main.js
├── karma.conf.js
├── package.json
├── postcss.config.js
├── rollup.config.js
├── src/
│ ├── index.css
│ └── index.js
└── test/
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintrc
================================================
{
"extends": "airbnb-base",
"env": {
"browser": true
},
"root": true,
"rules": {
"import/no-extraneous-dependencies": "off",
"no-param-reassign": "off",
"no-restricted-properties": "off",
"valid-jsdoc": ["error", {
"requireReturn": false
}]
},
"overrides": [
{
"files": "test/**/*.js",
"env": {
"jquery": true,
"mocha": true
},
"globals": {
"expect": true
},
"rules": {
"no-unused-expressions": "off"
}
}
]
}
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Contributor Code of Conduct
As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
This Code of Conduct is adapted from the [Contributor Covenant](http:contributor-covenant.org), version 1.0.0, available at https://www.contributor-covenant.org/version/1/0/0/code-of-conduct.html
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to Cropper
> Based on [Angular's contributing guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md).
We would love for you to contribute to Cropper and help make it even better than it is today! As a contributor, here are the guidelines we would like you to follow:
- [Code of Conduct](#code-of-conduct)
- [Question or Problem](#question-or-problem)
- [Issues and Bugs](#issues-and-bugs)
- [Feature Requests](#feature-requests)
- [Submission Guidelines](#submission-guidelines)
- [Coding Rules](#coding-rules)
- [Commit Message Guidelines](#commit-message-guidelines)
## Code of Conduct
Help us keep Cropper open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).
## Question or Problem
Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com/questions/tagged/cropper) where the questions should be tagged with tag `cropper`.
Stack Overflow is a much better place to ask questions since:
- There are thousands of people willing to help on Stack Overflow.
- Questions and answers stay available for public viewing so your question / answer might help someone else.
- Stack Overflow's voting system assures that the best answers are prominently visible.
To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.
## Issues and Bugs
If you find a bug in the source code, you can help us by [submitting an issue](#submitting-an-issue) to our [GitHub Repository](https://github.com/fengyuanchen/cropper). Even better, you can [submit a Pull Request](#submitting-a-pull-request-pr) with a fix.
## Feature Requests
You can *request* a new feature by [submitting an issue](#submitting-an-issue) to our [GitHub Repository](https://github.com/fengyuanchen/cropper). If you would like to *implement* a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.
Please consider what kind of change it is:
- For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
- **Small Features** can be crafted and directly [submitted as a Pull Request](#submitting-a-pull-request-pr).
## Submission Guidelines
### Submitting an Issue
Before you submit an issue, please search the [issue tracker](https://github.com/fengyuanchen/cropper/issues), maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a minimal reproduction scenario using [CodePen](https://codepen.io/pen). Having a live, reproducible scenario gives us wealth of important information without going back & forth to you with additional questions like:
- version of Cropper used
- 3rd-party libraries and their versions
- and most importantly - a use-case that fails
A minimal reproduce scenario using [CodePen](https://codepen.io/pen) allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. If [CodePen](https://codepen.io/pen) is not a suitable way to demonstrate the problem (for example for issues related to our npm packaging), please create a standalone git repository demonstrating the problem.
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal reproduce scenario. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
You can file new issues by filling out our [new issue form](https://github.com/fengyuanchen/cropper/issues/new).
### Submitting a Pull Request (PR)
Before you submit your Pull Request (PR) consider the following guidelines:
1. Search [GitHub](https://github.com/fengyuanchen/cropper/pulls) for an open or closed PR that relates to your submission. You don't want to duplicate effort.
1. Fork the **fengyuanchen/cropper** repo.
1. Make your changes in a new git branch:
```shell
git checkout -b my-fix-branch master
```
1. Create your patch, **including appropriate test cases**.
1. Follow our [Coding Rules](#coding-rules).
1. Run the full Cropper test suite, and ensure that all tests pass.
1. Commit your changes using a descriptive commit message that follows our [Commit Message Guidelines](#commit-message-guidelines). Adherence to these guidelines is necessary because release notes are automatically generated from these messages.
```shell
git commit -a
```
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
1. Push your branch to GitHub:
```shell
git push origin my-fix-branch
```
1. In GitHub, send a pull request to `cropper:master`.
1. If we suggest changes then:
- Make the required updates.
- Re-run the Cropper test suites to ensure tests are still passing.
- Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
```shell
git rebase master -i
git push -f
```
That's it! Thank you for your contribution!
#### After your pull request is merged
After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository:
1. Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
```shell
git push origin --delete my-fix-branch
```
1. Check out the master branch:
```shell
git checkout master -f
```
1. Delete the local branch:
```shell
git branch -D my-fix-branch
```
1. Update your master with the latest upstream version:
```shell
git pull --ff upstream master
```
## Coding Rules
To ensure consistency throughout the source code, keep these rules in mind as you are working:
- All features or bug fixes **must be tested** by one or more specs (unit-tests).
- All public API methods **must be documented**.
- We follow [Airbnb's JavaScript Style Guide](https://github.com/airbnb/javascript).
## Commit Message Guidelines
### Commit Message Format
A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**:
```
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```
The **header** is mandatory and the **scope** of the header is optional.
Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.
The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
Here are some [samples](https://github.com/fengyuanchen/cropper/commits/master).
### Revert
If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
### Type
Must be one of the following:
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
- **docs**: Documentation only changes
- **feat**: A new feature
- **fix**: A bug fix
- **perf**: A code change that improves performance
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- **test**: Adding missing tests or correcting existing tests
### Scope
The scope could be anything specifying place of the commit change. For example `move`, `zoom`, `rotate`, etc...
### Subject
The subject contains succinct description of the change:
- Use the imperative, present tense: "change" not "changed" nor "changes".
- Don't capitalize first letter.
- No dot (.) at the end.
### Body
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
### Footer
The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit **Closes**.
**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
## PR Checklist
Please check if your PR fulfills the following requirements:
- [ ] The commit message follows our [guidelines](https://github.com/fengyuanchen/cropper/blob/master/.github/CONTRIBUTING.md#commit-message-guidelines).
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
## PR Type
What kind of change does this PR introduce?
<!-- Please check the one that applies to this PR using "x". -->
- [ ] Bugfix
- [ ] Feature
- [ ] Code style update
- [ ] Refactor
- [ ] Build related changes
- [ ] Documentation content changes
- [ ] Other, Please describe:
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
Issue Number: N/A
## What is the new behavior?
<!-- Describe what the new behavior would be. -->
## Does this PR introduce a breaking change?
- [ ] Yes
- [ ] No
<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
## Other information
================================================
FILE: .gitignore
================================================
*.local
*.map
coverage
node_modules
================================================
FILE: .stylelintrc
================================================
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"no-descending-specificity": null,
"order/properties-alphabetical-order": true
}
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js: node
cache: npm
script:
- npm run lint
- npm run build
- npm test
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## 4.1.0 (Oct 12, 2019)
- Upgrade the built-in Cropper.js to v1.5.6.
## 4.0.0 (Apr 1, 2018)
- Upgrade the built-in Cropper.js to v1.3.4.
## 4.0.0-beta (Mar 3, 2018)
- Upgrade the built-in Cropper.js to v1.3.2.
## 4.0.0-alpha (Mar 1, 2018)
- The core code of Cropper is replaced with [Cropper.js](https://github.com/fengyuanchen/cropperjs) now.
- Migration from Cropper 3.x:
- **Before:**
```js
$().cropper({
crop(event) {
console.log(
event.x,
event.y,
event.width,
event.height,
event.rotate,
event.scaleX,
event.scaleY,
);
},
});
```
- **After:**
```js
$().cropper({
crop(event) {
console.log(
event.detail.x,
event.detail.y,
event.detail.width,
event.detail.height,
event.detail.rotate,
event.detail.scaleX,
event.detail.scaleY,
);
},
});
```
## 3.1.6 (Mar 1, 2018)
- Fixed a bug of incorrect behavior of `viewMode: 2`.
## 3.1.5 (Feb 25, 2018)
- Fixed a bug of `getCroppedCanvas` method when provide `maxWidth` or `maxHeight` options (#953).
## 3.1.4 (Jan 13, 2018)
- Fixed a bug of rotation (#938).
## 3.1.3 (Oct 21, 2017)
- Fixed a bug of render when disable one of `rotatable` and `scalable` options.
## 3.1.2 (Oct 18, 2017)
- Normalize related decimal numbers when crop an image with canvas (#918).
- Ignore unnecessary files when publish to NPM (#928).
## 3.1.1 (Oct 11, 2017)
- Supports to load in node environment.
## 3.1.0 (Oct 8, 2017)
- Added 4 new options to `getCroppedCanvas` method: `minWidth`, `minHeight`, `maxWidth` and `maxHeight`.
- Enhanced image scaling: the `scaleX` and `scaleY` values should only be `1` or `-1` before, but now they can be any numbers.
- Improved crop box resizing behavior in the northeast, northwest, southeast and southwest directions.
## 3.0.0 (Sep 3, 2017)
- Improved crop box resizing behavior in the east, west, south and north directions.
## 3.0.0-rc.3 (Jul 7, 2017)
- Added two new options (`imageSmoothingEnabled` and `imageSmoothingQuality`) to `getCroppedCanvas` method.
## 3.0.0-rc.2 (May 30, 2017)
- Improved performance for large images(#856).
- Fixed the issue of `ArrayBuffer` reference error in IE9 (#885).
- Fixed an issue of canvas box initialization.
## 3.0.0-rc.1 (Apr 30, 2017)
- Use `window.jQuery` instead of `window.$` for browser side usage (#876).
- Change the `main` field value from `dist/cropper.js` (UMD) to `dist/cropper.common.js` (CommonJS).
- Added `module` and `browser` fields to `package.json`.
## 3.0.0-rc (Mar 25, 2017)
- Clear cached pointers correctly to avoid touch zoom problem.
- Improve the `responsive` option (only available when the container width/height great than the minContainerWidth/Height)
- Improve the `toggleDragModeOnDblclick` option (only available when the `dragMode` option is set to `crop` or `move`)
## 3.0.0-beta (Feb 25, 2017)
- Fixed the bug of rotate square image lead image shrink.
- Improved RegExps for DataURL processing.
## 3.0.0-alpha.1 (Jan 21, 2017)
- Use CSS3 2D Transforms instead of `left` and `top` for better performance.
- Set `withCredentials` attribute when read the image data by XMLHttpRequest.
## 3.0.0-alpha (Jan 15, 2017)
- Removed `build` event.
- Renamed `built` event to `ready`.
- Removed event namespace.
- Ported code to ECMAScript 6.
- Dropped IE8 support.
- Improved event handler for Pointer Events (#824).
- Improved setCropBoxData method.
- Fixed a bug of auto crop when replace the image.
## 2.3.4 (Sep 3, 2016)
- Fixed a bug of cropping in view mode 1 and 2.
- Fixed a bug of calling `ready` event twice when call `replace` method.
- Fixed dependencies problem in the package.json file.
## 2.3.3 (Aug 10, 2016)
- Allow scroll when the `dragMode` is "none" on touch screens (#727).
- Fixed the issue of orientation transform (#740).
## 2.3.2 (Jun 8, 2016)
- Fixed wrong property reference (#705)
- Fixed the wrong place of the crop event triggering (#706).
- Fixed the calling order of `scale` and `rotate` (#709).
## 2.3.1 (May 28, 2016)
- Improved the rotate and scale transform behavior (#633, idea by afeibus).
- Improved the `getCroppedCanvas` method to return the whole canvas if it is not cropped (#666, PR by @vinnymac).
- Check cross origin setting when load image by XMLHTTPRequest (#669)
## 2.3.0 (Feb 22, 2016)
- Added a new parameter to the `replace` method for applying filters.
- Improved the image initializing for Safari (#120, #509).
- Fixed incorrect size limitation of the crop box.
- Fixed incorrect cropped canvas when scaleX or scaleY great than 1 (#598).
## 2.2.5 (Jan 18, 2016)
- Fixed crossOriginUrl undefined error when exists the `crossOrigin` property.
## 2.2.4 (Jan 1, 2016)
- Fixed a dimension bug in the "getCroppedCanvas" method.
- Added an example for cropping round image.
## 2.2.3 (Dec 28, 2015)
- Supports to zoom from event triggering point.
## 2.2.2 (Dec 24, 2015)
- Limit wheel speed to prevent zoom too fast
- Improve the `setCropBoxData` method
## 2.2.1 (Dec 12, 2015)
- Handle Data URL (Fixed #540: avoid to use XMLHttpRequest to open a Data URL)
- Handle ajax error when load ArrayBuffer
- Not to transform the image to base64 when Orientation equals to `1`
## 2.2.0 (Dec 6, 2015)
- Added a new option: `checkOrientation` (#120, #509)
- Added a timestamp to the url of preview image (#531)
## 2.1.0 (Dec 2, 2015)
- Added new `restore` option
## 2.0.2 (Nov 30, 2015)
- Fixed #476: Floor the numerical parameters for `CanvasRenderingContext2D.drawImage`
## 2.0.1 (Nov 18, 2015)
- Improved new crop box creating
## 2.0.0 (Nov 11, 2015)
### Common
- Supports four modes
- Supports three drag modes
- Improved the experience of cropping
- Makes the crop box's borders and handlers visible when overflow
- Fixed an issue of canvas limitation
- Fixed an issue of cropping
### Options
- Added `viewMode`
- Added `dragMode`
- Renamed `touchDragZoom` to `zoomOnTouch`
- Renamed `mouseWheelZoom` to `zoomOnWheel`
- Renamed `doubleClickToggle` to `toggleDragModeOnDblclick`
- Renamed `checkImageOrigin` to `checkCrossOrigin`
- Removed `strict` (supported by `viewMode: 1`)
- Removed `dragCrop` (supported by `dragMode: 'crop'`)
### Methods
- Added `moveTo`
- Added `zoomTo`
- Added `rotateTo`
- Added `scaleX`
- Added `scaleY`
- Improved `getCanvasData` (added `naturalWidth` and `naturalHeight`)
### Events
- Improved `zoom` (changed `event.ratio` and added `event.oldRatio`)
## 1.0.0 (Oct 10, 2015)
- Improved canvas limitation
- Improved preview
- Improved test
- Fixed an error in the `clear` method (missed parameters)
- Fixed the issue of crop box limitation (#430)
## 1.0.0-rc.1 (Sep 5, 2015)
- Moved from Less to Sass
- Fixed the issue of `destroy` method (#434)
- Fixed the issue on IE8 (#319)
- Added an example for customizing preview
- Added download button to documentation
- Added FAQ
## 0.11.1 (Aug 22, 2015)
- Optimize "built" and "crop" events
- Improve the starting speed (#422)
- Improve the building process (#428)
- Fix event issue on IE8 (#319)
## 0.11.0 (Aug 10, 2015)
- Improve `setCropBoxData` method (#385)
- Fix event issue on IE10 (#394)
- Optimize code (use `var` for per variable)
### Options
- Add "scalable" option
- Add "wheelZoomRatio" option
- Convert "crop" option to "crop" event
### Methods
- Add "scale" method
- Improve "move" method (the `offsetY` parameter is optional now)
### Events
- Rename "dragstart" to "cropstart"
- Rename "dragmove" to "cropmove"
- Rename "dragend" to "cropend"
- Merge "zoomin" and "zoomout" to "zoom"
- Merge "crop" option and "change" event to "crop" event
## 0.10.1 (Jul 5, 2015)
- Add Pointer Events support (#328)
- Add RTL support (#342)
- Add one new option: "center" (#367)
- Allow cropper to grow vertically (#350)
## 0.10.0 (Jun 8, 2015)
- Add three new options: "change", "cropBoxMovable", "doubleClickToggle"
- Change "movable" option (only for image)
- Rename "resizable" to "cropBoxResizable"
- Add one new event: "change.cropper"
- Locking aspect ratio in "free mode" by holding shift key (#259)
- Sync drag mode to crop box when it is not movable (#300)
## 0.9.3 (May 10, 2015)
- Add one new option: "data"
- Add two new methods: "setData" (#290, #296), "crop" (#275)
- Fix incorrect minWidth/Height size of canvas (#295)
- Fix the strict mode bug (#280)
- Fix the crop box resizing bug (#277)
## 0.9.2 (Apr 18, 2015)
- Improve strict mode to show full image
- Add two new options: "minCanvasWidth" and "minCanvasHeight"
- Reverse mouse wheeling zoom
- Fix incorrect cursor in disabled state
## 0.9.1 (Mar 21, 2015)
- Fix the touch zoom issue (#206)
- Fix the reset issue (#246)
## 0.9.0 (Mar 15, 2015)
- Wraps image with a virtual canvas (for zooming and rotating).
- Limits image position and size in strict mode.
- Supports multiple global croppers by default.
- Outputs cropped canvas for display or get Data URL or get Blob
- Identifies drag events with "event.dragType" property
- Added zoom events for controlling the canvas (image) size.
- Improved responsiveness for window resizing.
### Options
- Change "minContainerWidth" (default value: 300 -> 200)
- Change "minContainerHeight" (default value: 150 -> 100)
- Add "strict"
- Add "zoomin"
- Add "zoomout"
- remove "global"
### Methods
- Change "replace" (not to change the original image any more)
- Change "getImageData" (move rotation-related properties to canvas data)
- Add "getContainerData"
- Add "getCanvasData"
- Add "setCanvasData"
- Add "getCroppedCanvas"
- Remove "setImageData" (replace with "getCanvasData")
- Remove "getDataURL" (replace with "getCroppedCanvas")
### Events
- Add "event.dragType" property to drag events
- Add "zoomin.cropper"
- Add "zoomout.cropper"
## 0.8.0 (Feb 19, 2015)
- Refactored source code.
- Compiles CSS with [Less](http://lesscss.org) CSS preprocessors.
- Supports fixed container.
- Supports rotation with CSS3 2D Transforms.
### Options
- Change the default value of "aspectRatio"
- Rename "done" to "crop"
- Rename "dashed" to "guides"
- Rename "multiple" to "global"
- Add "background"
- Add "highlight"
- Add "responsive"
- Add "mouseWheelZoom"
- Add "touchDragZoom"
- Add "minCropBoxWidth"
- Add "minCropBoxHeight"
- Add "minContainerWidth"
- Add "minContainerHeight"
- Remove "data"
- Remove "minWidth"
- Remove "minHeight"
- Remove "maxWidth"
- Remove "maxHeight"
### Methods
- Change "reset"
- Add "setImageData"
- Add "getCropBoxData"
- Add "setCropBoxData"
- Add "move"
- Remove "setData"
## 0.7.9 (Feb 19, 2015)
- Improve preview.
- Improve rotation.
- Improve responsiveness (#157).
- Enable to move the image when the size of the crop box is the same as the container's (#186).
## 0.7.8 (Feb 8, 2015)
- Add two new options: "minContainerWidth" and "minContainerHeight".
- Improve three methods: "setAspectRatio", "destroy" and "disable".
- Improve mouse wheel zoom.
- Improve drag resizing.
## 0.7.7 (Jan 10, 2015)
- Fix a bug of "dragCrop" option.
- Add a timestamp to the url to bust cache when it's a cross-origin image (#148).
- Fix the issue of "autoCropArea" option (#144).
## 0.7.6 (Dec 20, 2014)
- Fix events binding bugs.
- Change the "done" option and the "getData" method (returns floating-point number) (#130).
- Fix the rotation issue after replace the image (#139).
## 0.7.5 (Nov 27, 2014)
- Reset the ratio when replace the image.
- Add a new option: "checkImageOrigin" (#119).
- Prevent to call the "done" option when it's disabled (#107).
- Improve the preview (#95).
## 0.7.4 (Nov 24, 2014)
- Improve "getDataURL" method, enable to customize the image sizes (#105).
- Fix the issue of destroy (#101).
- Fix the issue of canvas (#106).
## 0.7.3 (Nov 15, 2014)
- Supports cross-origin image (#96, #97).
- Add a new option: "autoCropArea".
- Improve "movable" option.
- Output rotation degree by "getImageData" method (#94).
## 0.7.2 (Nov 11, 2014)
- Fix the image rotation error in Firefox (#92).
## 0.7.1 (Nov 8, 2014)
- Rebuild "rotate" method (#88).
- Fix the issue of free ratio (#87).
- Improve "getDataURL" method (#86).
- Optimize event listeners.
## 0.7.0 (Oct 12, 2014)
- Supports zoom (#36, #79).
- Supports rotation (#1, #81).
- Add two new options: "zoomable" and "rotatable".
- Add six new methods: "enable", "disable", "zoom", "rotate", "getDataURL" (#80) and "setDragMode".
- Rename "release" method to "clear".
- Rename "setImgSrc" method to "replace".
- Rename "getImgInfo" method to "getImageData".
- Some other improvements.
## 0.6.2 (Oct 11, 2014)
- Hide the modal when release the crop box.
- Improve touch events.
## 0.6.1 (Oct 3, 2014)
- Fix an event error.
## 0.6.0 (Sep 20, 2014)
- Add six new options: "dashed", "build", "built", "dragstart", "dragmove" and "dragend".
- Add three new events: "dragstart.cropper", "dragmove.cropper" and "dragend.cropper".
- Remove an old event: "render.cropper".
- Supports to toggle the dashed lines by "dashed" option (#68).
- Fix the issue of events (#71).
- Optimize the source code.
## 0.5.5 (Sep 8, 2014)
- Improve the render when the mouse out of the cropper container (#54).
## 0.5.4 (Aug 30, 2014)
- Fix typos: replace "resizeable" with "resizable" and "moveable" with "movable".
## 0.5.3 (Aug 23, 2014)
- Fix the issue (#64) that the crop box could not move after multiple touches.
## 0.5.2 (Aug 16, 2014)
- Fix a bug of type checking in the options.
- Compress the cropper template string.
## 0.5.1 (Aug 12, 2014)
- Supports canvas (#55).
## 0.5.0 (Aug 10, 2014)
- Add a new option: "multiple".
...
## 0.4.0 (Jul 26, 2014)
- Add eight new options: "autoCrop", "dragCrop", "moveable", "resizeable", "maxWidth", "maxHeight", "minWidth" and "minHeight".
- Add three new methods: "reset", "release" and "destroy".
- Add three new events: "build.cropper", "built.cropper" and "render.cropper".
- Remove two old methods: "enable" and "disable".
- Remove three old events: "dragstart", "dragmove" and "dragend".
- Supports no conflict with the "$.fn.cropper.noConflict" method.
...
## 0.3.0 (May 18, 2014)
- Supports touch.
- Supports events.
- Add three events: "dargstart", "dargmove" and "dargend".
- Add a new method: "setImgSrc".
...
## 0.2.0 (Apr 23, 2014)
- Supports free ratio.
- Add a new option: "data".
- Add four new methods: "getData", "setData", "getImgInfo" and "setAspectRatio".
...
## 0.1.0 (Feb 19, 2014)
- Supports four options: "aspectRatio", "done", "modal" and "preview".
- Supports two methods: "enable" and "disable".
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright 2014-present Chen Fengyuan and contributors
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.
================================================
FILE: README.md
================================================
# Cropper
[](https://travis-ci.org/fengyuanchen/cropper) [](https://www.npmjs.com/package/cropper) [](https://www.npmjs.com/package/cropper) [](https://www.npmjs.com/package/cropper)
> A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with [Cropper.js](https://github.com/fengyuanchen/cropperjs).
- [Demo](https://fengyuanchen.github.io/cropper)
- [Cropper.js](https://github.com/fengyuanchen/cropperjs) - JavaScript image cropper (**recommended**)
- [jquery-cropper](https://github.com/fengyuanchen/jquery-cropper) - A jQuery plugin wrapper for Cropper.js (**recommended** for jQuery users to use this instead of Cropper)
## Main
```text
dist/
├── cropper.css
├── cropper.min.css (compressed)
├── cropper.js (UMD)
├── cropper.min.js (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js (ES Module)
```
## Getting started
### Installation
```shell
npm install cropper jquery
```
Include files:
```html
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
```
### Usage
Initialize with `$.fn.cropper` method.
```html
<!-- Wrap the image or canvas element with a block element (container) -->
<div>
<img id="image" src="picture.jpg">
</div>
```
```css
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
```
```js
var $image = $('#image');
$image.cropper({
aspectRatio: 16 / 9,
crop: function(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
}
});
// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');
```
## Options
See the available [options](https://github.com/fengyuanchen/cropperjs#options) of Cropper.js.
```js
$('img').cropper(options);
```
## Methods
See the available [methods](https://github.com/fengyuanchen/cropperjs#methods) of Cropper.js.
```js
$('img').once('ready', function () {
$(this).cropper('method', argument1, , argument2, ..., argumentN);
});
```
## Events
See the available [events](https://github.com/fengyuanchen/cropperjs#events) of Cropper.js.
```js
$('img').on('event', handler);
```
## No conflict
If you have to use other plugin with the same namespace, just call the `$.fn.cropper.noConflict` method to revert to it.
```html
<script src="other-plugin.js"></script>
<script src="cropper.js"></script>
<script>
$.fn.cropper.noConflict();
// Code that uses other plugin's "$('img').cropper" can follow here.
</script>
```
## Browser support
It is the same as the [browser support of Cropper.js](https://github.com/fengyuanchen/cropperjs#browser-support). As a jQuery plugin, you also need to see the [jQuery Browser Support](https://jquery.com/browser-support/).
## Contributing
Please read through our [contributing guidelines](.github/CONTRIBUTING.md).
## Versioning
Maintained under the [Semantic Versioning guidelines](https://semver.org/).
## License
[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false,
},
],
],
env: {
test: {
plugins: [
'istanbul',
],
},
},
};
================================================
FILE: composer.json
================================================
{
"name": "fengyuanchen/cropper",
"license": "MIT",
"repositories": [
{
"type": "vcs",
"url": "https://github.com/fengyuanchen/cropper"
}
]
}
================================================
FILE: dist/cropper.common.js
================================================
/*!
* Cropper v4.1.0
* https://fengyuanchen.github.io/cropper
*
* Copyright 2014-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2019-10-12T07:43:51.850Z
*/
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var $ = _interopDefault(require('jquery'));
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(source, true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(source).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
var WINDOW = IS_BROWSER ? window : {};
var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
var NAMESPACE = 'cropper'; // Actions
var ACTION_ALL = 'all';
var ACTION_CROP = 'crop';
var ACTION_MOVE = 'move';
var ACTION_ZOOM = 'zoom';
var ACTION_EAST = 'e';
var ACTION_WEST = 'w';
var ACTION_SOUTH = 's';
var ACTION_NORTH = 'n';
var ACTION_NORTH_EAST = 'ne';
var ACTION_NORTH_WEST = 'nw';
var ACTION_SOUTH_EAST = 'se';
var ACTION_SOUTH_WEST = 'sw'; // Classes
var CLASS_CROP = "".concat(NAMESPACE, "-crop");
var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");
var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");
var CLASS_HIDE = "".concat(NAMESPACE, "-hide");
var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");
var CLASS_MODAL = "".concat(NAMESPACE, "-modal");
var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys
var DATA_ACTION = "".concat(NAMESPACE, "Action");
var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes
var DRAG_MODE_CROP = 'crop';
var DRAG_MODE_MOVE = 'move';
var DRAG_MODE_NONE = 'none'; // Events
var EVENT_CROP = 'crop';
var EVENT_CROP_END = 'cropend';
var EVENT_CROP_MOVE = 'cropmove';
var EVENT_CROP_START = 'cropstart';
var EVENT_DBLCLICK = 'dblclick';
var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
var EVENT_READY = 'ready';
var EVENT_RESIZE = 'resize';
var EVENT_WHEEL = 'wheel';
var EVENT_ZOOM = 'zoom'; // Mime types
var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps
var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
var REGEXP_DATA_URL = /^data:/;
var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc
// Inspired by the default width and height of a canvas element.
var MIN_CONTAINER_WIDTH = 200;
var MIN_CONTAINER_HEIGHT = 100;
var DEFAULTS = {
// 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: 200,
minContainerHeight: 100,
// Shortcuts of events
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null
};
var TEMPLATE = '<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>';
/**
* Check if the given value is not a number.
*/
var 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`.
*/
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`.
*/
var isPositiveNumber = function isPositiveNumber(value) {
return 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`.
*/
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`.
*/
function isObject(value) {
return _typeof(value) === 'object' && value !== null;
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
/**
* 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`.
*/
function isPlainObject(value) {
if (!isObject(value)) {
return false;
}
try {
var _constructor = value.constructor;
var prototype = _constructor.prototype;
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`.
*/
function isFunction(value) {
return typeof value === 'function';
}
var slice = Array.prototype.slice;
/**
* Convert array-like or iterable object to an array.
* @param {*} value - The value to convert.
* @returns {Array} Returns a new array.
*/
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.
*/
function forEach(data, callback) {
if (data && isFunction(callback)) {
if (Array.isArray(data) || isNumber(data.length)
/* array-like */
) {
toArray(data).forEach(function (value, key) {
callback.call(data, value, key, data);
});
} else if (isObject(data)) {
Object.keys(data).forEach(function (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.
*/
var assign = Object.assign || function assign(target) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (isObject(target) && args.length > 0) {
args.forEach(function (arg) {
if (isObject(arg)) {
Object.keys(arg).forEach(function (key) {
target[key] = arg[key];
});
}
});
}
return target;
};
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
/**
* Normalize decimal number.
* Check out {@link http://0.30000000000000004.com/}
* @param {number} value - The value to normalize.
* @param {number} [times=100000000000] - The times for normalizing.
* @returns {number} Returns the normalized number.
*/
function normalizeDecimalNumber(value) {
var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
}
var 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.
*/
function setStyle(element, styles) {
var style = element.style;
forEach(styles, function (value, property) {
if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
value = "".concat(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.
*/
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.
*/
function addClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (elem) {
addClass(elem, value);
});
return;
}
if (element.classList) {
element.classList.add(value);
return;
}
var className = element.className.trim();
if (!className) {
element.className = value;
} else if (className.indexOf(value) < 0) {
element.className = "".concat(className, " ").concat(value);
}
}
/**
* Remove classes from the given element.
* @param {Element} element - The target element.
* @param {string} value - The classes to be removed.
*/
function removeClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (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.
*/
function toggleClass(element, value, added) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (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);
}
}
var 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.
*/
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.
*/
function getData(element, name) {
if (isObject(element[name])) {
return element[name];
}
if (element.dataset) {
return element.dataset[name];
}
return element.getAttribute("data-".concat(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.
*/
function setData(element, name, data) {
if (isObject(data)) {
element[name] = data;
} else if (element.dataset) {
element.dataset[name] = data;
} else {
element.setAttribute("data-".concat(toParamCase(name)), data);
}
}
/**
* Remove data from the given element.
* @param {Element} element - The target element.
* @param {string} name - The data key to remove.
*/
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-".concat(toParamCase(name)));
}
}
var REGEXP_SPACES = /\s\s*/;
var onceSupported = function () {
var supported = false;
if (IS_BROWSER) {
var once = false;
var listener = function listener() {};
var options = Object.defineProperty({}, 'once', {
get: function 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: function 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.
*/
function removeListener(element, type, listener) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var handler = listener;
type.trim().split(REGEXP_SPACES).forEach(function (event) {
if (!onceSupported) {
var listeners = element.listeners;
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.
*/
function addListener(element, type, listener) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var _handler = listener;
type.trim().split(REGEXP_SPACES).forEach(function (event) {
if (options.once && !onceSupported) {
var _element$listeners = element.listeners,
listeners = _element$listeners === void 0 ? {} : _element$listeners;
_handler = function handler() {
delete listeners[event][listener];
element.removeEventListener(event, _handler, options);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
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.
*/
function dispatchEvent(element, type, data) {
var 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.
*/
function getOffset(element) {
var box = element.getBoundingClientRect();
return {
left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
top: box.top + (window.pageYOffset - document.documentElement.clientTop)
};
}
var location = WINDOW.location;
var 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`.
*/
function isCrossOriginURL(url) {
var 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.
*/
function addTimestamp(url) {
var timestamp = "timestamp=".concat(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.
*/
function getTransforms(_ref) {
var rotate = _ref.rotate,
scaleX = _ref.scaleX,
scaleY = _ref.scaleY,
translateX = _ref.translateX,
translateY = _ref.translateY;
var values = [];
if (isNumber(translateX) && translateX !== 0) {
values.push("translateX(".concat(translateX, "px)"));
}
if (isNumber(translateY) && translateY !== 0) {
values.push("translateY(".concat(translateY, "px)"));
} // Rotate should come first before scale to match orientation transform
if (isNumber(rotate) && rotate !== 0) {
values.push("rotate(".concat(rotate, "deg)"));
}
if (isNumber(scaleX) && scaleX !== 1) {
values.push("scaleX(".concat(scaleX, ")"));
}
if (isNumber(scaleY) && scaleY !== 1) {
values.push("scaleY(".concat(scaleY, ")"));
}
var transform = values.length ? values.join(' ') : 'none';
return {
WebkitTransform: transform,
msTransform: transform,
transform: transform
};
}
/**
* Get the max ratio of a group of pointers.
* @param {string} pointers - The target pointers.
* @returns {number} The result ratio.
*/
function getMaxZoomRatio(pointers) {
var pointers2 = _objectSpread2({}, pointers);
var ratios = [];
forEach(pointers, function (pointer, pointerId) {
delete pointers2[pointerId];
forEach(pointers2, function (pointer2) {
var x1 = Math.abs(pointer.startX - pointer2.startX);
var y1 = Math.abs(pointer.startY - pointer2.startY);
var x2 = Math.abs(pointer.endX - pointer2.endX);
var y2 = Math.abs(pointer.endY - pointer2.endY);
var z1 = Math.sqrt(x1 * x1 + y1 * y1);
var z2 = Math.sqrt(x2 * x2 + y2 * y2);
var ratio = (z2 - z1) / z1;
ratios.push(ratio);
});
});
ratios.sort(function (a, b) {
return Math.abs(a) < Math.abs(b);
});
return ratios[0];
}
/**
* 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.
*/
function getPointer(_ref2, endOnly) {
var pageX = _ref2.pageX,
pageY = _ref2.pageY;
var end = {
endX: pageX,
endY: pageY
};
return endOnly ? end : _objectSpread2({
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.
*/
function getPointersCenter(pointers) {
var pageX = 0;
var pageY = 0;
var count = 0;
forEach(pointers, function (_ref3) {
var startX = _ref3.startX,
startY = _ref3.startY;
pageX += startX;
pageY += startY;
count += 1;
});
pageX /= count;
pageY /= count;
return {
pageX: pageX,
pageY: 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.
*/
function getAdjustedSizes(_ref4) // or 'cover'
{
var aspectRatio = _ref4.aspectRatio,
height = _ref4.height,
width = _ref4.width;
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
var isValidWidth = isPositiveNumber(width);
var isValidHeight = isPositiveNumber(height);
if (isValidWidth && isValidHeight) {
var 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: width,
height: height
};
}
/**
* Get the new sizes of a rectangle after rotated.
* @param {Object} data - The original sizes.
* @returns {Object} The result sizes.
*/
function getRotatedSizes(_ref5) {
var width = _ref5.width,
height = _ref5.height,
degree = _ref5.degree;
degree = Math.abs(degree) % 180;
if (degree === 90) {
return {
width: height,
height: width
};
}
var arc = degree % 90 * Math.PI / 180;
var sinArc = Math.sin(arc);
var cosArc = Math.cos(arc);
var newWidth = width * cosArc + height * sinArc;
var 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.
*/
function getSourceCanvas(image, _ref6, _ref7, _ref8) {
var imageAspectRatio = _ref6.aspectRatio,
imageNaturalWidth = _ref6.naturalWidth,
imageNaturalHeight = _ref6.naturalHeight,
_ref6$rotate = _ref6.rotate,
rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,
_ref6$scaleX = _ref6.scaleX,
scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,
_ref6$scaleY = _ref6.scaleY,
scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;
var aspectRatio = _ref7.aspectRatio,
naturalWidth = _ref7.naturalWidth,
naturalHeight = _ref7.naturalHeight;
var _ref8$fillColor = _ref8.fillColor,
fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor,
_ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,
imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,
_ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,
imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,
_ref8$maxWidth = _ref8.maxWidth,
maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,
_ref8$maxHeight = _ref8.maxHeight,
maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,
_ref8$minWidth = _ref8.minWidth,
minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,
_ref8$minHeight = _ref8.minHeight,
minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: maxWidth,
height: maxHeight
});
var minSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: minWidth,
height: minHeight
}, 'cover');
var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
var 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
var destMaxSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: maxWidth,
height: maxHeight
});
var destMinSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: minWidth,
height: minHeight
}, 'cover');
var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));
var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));
var 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.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {
return Math.floor(normalizeDecimalNumber(param));
}))));
context.restore();
return canvas;
}
var fromCharCode = String.fromCharCode;
/**
* 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.
*/
function getStringFromCharCode(dataView, start, length) {
var str = '';
length += start;
for (var i = start; i < length; i += 1) {
str += fromCharCode(dataView.getUint8(i));
}
return str;
}
var 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.
*/
function dataURLToArrayBuffer(dataURL) {
var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
var binary = atob(base64);
var arrayBuffer = new ArrayBuffer(binary.length);
var uint8 = new Uint8Array(arrayBuffer);
forEach(uint8, function (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.
*/
function arrayBufferToDataURL(arrayBuffer, mimeType) {
var chunks = []; // Chunk Typed Array for better performance (#435)
var chunkSize = 8192;
var 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:".concat(mimeType, ";base64,").concat(btoa(chunks.join('')));
}
/**
* Get orientation value from given array buffer.
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
* @returns {number} The read orientation value.
*/
function resetAndGetOrientation(arrayBuffer) {
var dataView = new DataView(arrayBuffer);
var orientation; // Ignores range error when the image does not have correct Exif information
try {
var littleEndian;
var app1Start;
var ifdStart; // Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
var length = dataView.byteLength;
var offset = 2;
while (offset + 1 < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset += 1;
}
}
if (app1Start) {
var exifIDCode = app1Start + 4;
var tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
var endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D
/* bigEndian */
) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
var _length = dataView.getUint16(ifdStart, littleEndian);
var _offset;
var 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.
*/
function parseOrientation(orientation) {
var rotate = 0;
var scaleX = 1;
var 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: rotate,
scaleX: scaleX,
scaleY: scaleY
};
}
var render = {
render: function render() {
this.initContainer();
this.initCanvas();
this.initCropBox();
this.renderCanvas();
if (this.cropped) {
this.renderCropBox();
}
},
initContainer: function initContainer() {
var element = this.element,
options = this.options,
container = this.container,
cropper = this.cropper;
addClass(cropper, CLASS_HIDDEN);
removeClass(element, CLASS_HIDDEN);
var containerData = {
width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),
height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)
};
this.containerData = containerData;
setStyle(cropper, {
width: containerData.width,
height: containerData.height
});
addClass(element, CLASS_HIDDEN);
removeClass(cropper, CLASS_HIDDEN);
},
// Canvas (image wrapper)
initCanvas: function initCanvas() {
var containerData = this.containerData,
imageData = this.imageData;
var viewMode = this.options.viewMode;
var rotated = Math.abs(imageData.rotate) % 180 === 90;
var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
var aspectRatio = naturalWidth / naturalHeight;
var canvasWidth = containerData.width;
var 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;
}
var canvasData = {
aspectRatio: aspectRatio,
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
width: canvasWidth,
height: canvasHeight
};
canvasData.left = (containerData.width - canvasWidth) / 2;
canvasData.top = (containerData.height - canvasHeight) / 2;
canvasData.oldLeft = canvasData.left;
canvasData.oldTop = canvasData.top;
this.canvasData = canvasData;
this.limited = viewMode === 1 || viewMode === 2;
this.limitCanvas(true, true);
this.initialImageData = assign({}, imageData);
this.initialCanvasData = assign({}, canvasData);
},
limitCanvas: function limitCanvas(sizeLimited, positionLimited) {
var options = this.options,
containerData = this.containerData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData;
var viewMode = options.viewMode;
var aspectRatio = canvasData.aspectRatio;
var cropped = this.cropped && cropBoxData;
if (sizeLimited) {
var minCanvasWidth = Number(options.minCanvasWidth) || 0;
var 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;
}
}
}
var _getAdjustedSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: minCanvasWidth,
height: minCanvasHeight
});
minCanvasWidth = _getAdjustedSizes.width;
minCanvasHeight = _getAdjustedSizes.height;
canvasData.minWidth = minCanvasWidth;
canvasData.minHeight = minCanvasHeight;
canvasData.maxWidth = Infinity;
canvasData.maxHeight = Infinity;
}
if (positionLimited) {
if (viewMode > (cropped ? 0 : 1)) {
var newCanvasLeft = containerData.width - canvasData.width;
var 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: function renderCanvas(changed, transformed) {
var canvasData = this.canvasData,
imageData = this.imageData;
if (transformed) {
var _getRotatedSizes = getRotatedSizes({
width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),
degree: imageData.rotate || 0
}),
naturalWidth = _getRotatedSizes.width,
naturalHeight = _getRotatedSizes.height;
var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
var 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: function renderImage(changed) {
var canvasData = this.canvasData,
imageData = this.imageData;
var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
assign(imageData, {
width: width,
height: 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: function initCropBox() {
var options = this.options,
canvasData = this.canvasData;
var aspectRatio = options.aspectRatio || options.initialAspectRatio;
var autoCropArea = Number(options.autoCropArea) || 0.8;
var 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: function limitCropBox(sizeLimited, positionLimited) {
var options = this.options,
containerData = this.containerData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData,
limited = this.limited;
var aspectRatio = options.aspectRatio;
if (sizeLimited) {
var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;
var 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: function renderCropBox() {
var options = this.options,
containerData = this.containerData,
cropBoxData = this.cropBoxData;
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: function output() {
this.preview();
dispatchEvent(this.element, EVENT_CROP, this.getData());
}
};
var preview = {
initPreview: function initPreview() {
var element = this.element,
crossOrigin = this.crossOrigin;
var preview = this.options.preview;
var url = crossOrigin ? this.crossOriginUrl : this.url;
var alt = element.alt || 'The image to preview';
var 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;
}
var previews = preview;
if (typeof preview === 'string') {
previews = element.ownerDocument.querySelectorAll(preview);
} else if (preview.querySelector) {
previews = [preview];
}
this.previews = previews;
forEach(previews, function (el) {
var 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: function resetPreview() {
forEach(this.previews, function (element) {
var data = getData(element, DATA_PREVIEW);
setStyle(element, {
width: data.width,
height: data.height
});
element.innerHTML = data.html;
removeData(element, DATA_PREVIEW);
});
},
preview: function preview() {
var imageData = this.imageData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData;
var cropBoxWidth = cropBoxData.width,
cropBoxHeight = cropBoxData.height;
var width = imageData.width,
height = imageData.height;
var left = cropBoxData.left - canvasData.left - imageData.left;
var top = cropBoxData.top - canvasData.top - imageData.top;
if (!this.cropped || this.disabled) {
return;
}
setStyle(this.viewBoxImage, assign({
width: width,
height: height
}, getTransforms(assign({
translateX: -left,
translateY: -top
}, imageData))));
forEach(this.previews, function (element) {
var data = getData(element, DATA_PREVIEW);
var originalWidth = data.width;
var originalHeight = data.height;
var newWidth = originalWidth;
var newHeight = originalHeight;
var 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))));
});
}
};
var events = {
bind: function bind() {
var element = this.element,
options = this.options,
cropper = this.cropper;
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: function unbind() {
var element = this.element,
options = this.options,
cropper = this.cropper;
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);
}
}
};
var handlers = {
resize: function resize() {
var options = this.options,
container = this.container,
containerData = this.containerData;
var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH;
var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT;
if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
return;
}
var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
if (ratio !== 1 || container.offsetHeight !== containerData.height) {
var canvasData;
var cropBoxData;
if (options.restore) {
canvasData = this.getCanvasData();
cropBoxData = this.getCropBoxData();
}
this.render();
if (options.restore) {
this.setCanvasData(forEach(canvasData, function (n, i) {
canvasData[i] = n * ratio;
}));
this.setCropBoxData(forEach(cropBoxData, function (n, i) {
cropBoxData[i] = n * ratio;
}));
}
}
},
dblclick: function 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: function wheel(event) {
var _this = this;
var ratio = Number(this.options.wheelZoomRatio) || 0.1;
var 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(function () {
_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: function cropStart(event) {
var buttons = event.buttons,
button = event.button;
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;
}
var options = this.options,
pointers = this.pointers;
var action;
if (event.changedTouches) {
// Handle touch event
forEach(event.changedTouches, function (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: 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: function cropMove(event) {
var action = this.action;
if (this.disabled || !action) {
return;
}
var pointers = this.pointers;
event.preventDefault();
if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
originalEvent: event,
action: action
}) === false) {
return;
}
if (event.changedTouches) {
forEach(event.changedTouches, function (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: function cropEnd(event) {
if (this.disabled) {
return;
}
var action = this.action,
pointers = this.pointers;
if (event.changedTouches) {
forEach(event.changedTouches, function (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: action
});
}
};
var change = {
change: function change(event) {
var options = this.options,
canvasData = this.canvasData,
containerData = this.containerData,
cropBoxData = this.cropBoxData,
pointers = this.pointers;
var action = this.action;
var aspectRatio = options.aspectRatio;
var left = cropBoxData.left,
top = cropBoxData.top,
width = cropBoxData.width,
height = cropBoxData.height;
var right = left + width;
var bottom = top + height;
var minLeft = 0;
var minTop = 0;
var maxWidth = containerData.width;
var maxHeight = containerData.height;
var renderable = true;
var 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 = cropBoxData.minLeft;
minTop = cropBoxData.minTop;
maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);
maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);
}
var pointer = pointers[Object.keys(pointers)[0]];
var range = {
x: pointer.endX - pointer.startX,
y: pointer.endY - pointer.startY
};
var check = function 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, function (p) {
p.startX = p.endX;
p.startY = p.endY;
});
}
};
var methods = {
// Show the crop box manually
crop: function 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: function 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: function 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: function replace(url) {
var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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, function (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: function enable() {
if (this.ready && this.disabled) {
this.disabled = false;
removeClass(this.cropper, CLASS_DISABLED);
}
return this;
},
// Disable (freeze) the cropper
disable: function 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: function destroy() {
var element = this.element;
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: function move(offsetX) {
var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;
var _this$canvasData = this.canvasData,
left = _this$canvasData.left,
top = _this$canvasData.top;
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: function moveTo(x) {
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
var canvasData = this.canvasData;
var 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: function zoom(ratio, _originalEvent) {
var canvasData = this.canvasData;
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: function zoomTo(ratio, pivot, _originalEvent) {
var options = this.options,
canvasData = this.canvasData;
var width = canvasData.width,
height = canvasData.height,
naturalWidth = canvasData.naturalWidth,
naturalHeight = canvasData.naturalHeight;
ratio = Number(ratio);
if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {
var newWidth = naturalWidth * ratio;
var newHeight = naturalHeight * ratio;
if (dispatchEvent(this.element, EVENT_ZOOM, {
ratio: ratio,
oldRatio: width / naturalWidth,
originalEvent: _originalEvent
}) === false) {
return this;
}
if (_originalEvent) {
var pointers = this.pointers;
var offset = getOffset(this.cropper);
var 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: function 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: function 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: function scaleX(_scaleX) {
var scaleY = this.imageData.scaleY;
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: function scaleY(_scaleY) {
var scaleX = this.imageData.scaleX;
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: function scale(scaleX) {
var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;
var imageData = this.imageData;
var 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: function getData() {
var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var options = this.options,
imageData = this.imageData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData;
var data;
if (this.ready && this.cropped) {
data = {
x: cropBoxData.left - canvasData.left,
y: cropBoxData.top - canvasData.top,
width: cropBoxData.width,
height: cropBoxData.height
};
var ratio = imageData.width / imageData.naturalWidth;
forEach(data, function (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).
var bottom = Math.round(data.y + data.height);
var 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: function setData(data) {
var options = this.options,
imageData = this.imageData,
canvasData = this.canvasData;
var cropBoxData = {};
if (this.ready && !this.disabled && isPlainObject(data)) {
var 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);
}
var 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: function getContainerData() {
return this.ready ? assign({}, this.containerData) : {};
},
/**
* Get the image position and size data.
* @returns {Object} The result image data.
*/
getImageData: function getImageData() {
return this.sized ? assign({}, this.imageData) : {};
},
/**
* Get the canvas position and size data.
* @returns {Object} The result canvas data.
*/
getCanvasData: function getCanvasData() {
var canvasData = this.canvasData;
var data = {};
if (this.ready) {
forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (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: function setCanvasData(data) {
var canvasData = this.canvasData;
var aspectRatio = canvasData.aspectRatio;
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: function getCropBoxData() {
var cropBoxData = this.cropBoxData;
var 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: function setCropBoxData(data) {
var cropBoxData = this.cropBoxData;
var aspectRatio = this.options.aspectRatio;
var widthChanged;
var 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: function getCroppedCanvas() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (!this.ready || !window.HTMLCanvasElement) {
return null;
}
var canvasData = this.canvasData;
var source = getSourceCanvas(this.image, this.imageData, canvasData, options); // Returns the source canvas if it is not cropped.
if (!this.cropped) {
return source;
}
var _this$getData = this.getData(),
initialX = _this$getData.x,
initialY = _this$getData.y,
initialWidth = _this$getData.width,
initialHeight = _this$getData.height;
var ratio = source.width / Math.floor(canvasData.naturalWidth);
if (ratio !== 1) {
initialX *= ratio;
initialY *= ratio;
initialWidth *= ratio;
initialHeight *= ratio;
}
var aspectRatio = initialWidth / initialHeight;
var maxSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: options.maxWidth || Infinity,
height: options.maxHeight || Infinity
});
var minSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: options.minWidth || 0,
height: options.minHeight || 0
}, 'cover');
var _getAdjustedSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: options.width || (ratio !== 1 ? source.width : initialWidth),
height: options.height || (ratio !== 1 ? source.height : initialHeight)
}),
width = _getAdjustedSizes.width,
height = _getAdjustedSizes.height;
width = Math.min(maxSizes.width, Math.max(minSizes.width, width));
height = Math.min(maxSizes.height, Math.max(minSizes.height, height));
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = normalizeDecimalNumber(width);
canvas.height = normalizeDecimalNumber(height);
context.fillStyle = options.fillColor || 'transparent';
context.fillRect(0, 0, width, height);
var _options$imageSmoothi = options.imageSmoothingEnabled,
imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,
imageSmoothingQuality = options.imageSmoothingQuality;
context.imageSmoothingEnabled = imageSmoothingEnabled;
if (imageSmoothingQuality) {
context.imageSmoothingQuality = imageSmoothingQuality;
} // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage
var sourceWidth = source.width;
var sourceHeight = source.height; // Source canvas parameters
var srcX = initialX;
var srcY = initialY;
var srcWidth;
var srcHeight; // Destination canvas parameters
var dstX;
var dstY;
var dstWidth;
var 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;
}
var params = [srcX, srcY, srcWidth, srcHeight]; // Avoid "IndexSizeError"
if (dstWidth > 0 && dstHeight > 0) {
var 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.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {
return 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: function setAspectRatio(aspectRatio) {
var options = this.options;
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: function setDragMode(mode) {
var options = this.options,
dragBox = this.dragBox,
face = this.face;
if (this.ready && !this.disabled) {
var croppable = mode === DRAG_MODE_CROP;
var 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;
}
};
var AnotherCropper = WINDOW.Cropper;
var Cropper =
/*#__PURE__*/
function () {
/**
* Create a new Cropper.
* @param {Element} element - The target element for cropping.
* @param {Object} [options={}] - The configuration options.
*/
function Cropper(element) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Cropper);
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();
}
_createClass(Cropper, [{
key: "init",
value: function init() {
var element = this.element;
var tagName = element.tagName.toLowerCase();
var 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.: "http://example.com/img/picture.jpg"
url = element.src;
} else if (tagName === 'canvas' && window.HTMLCanvasElement) {
url = element.toDataURL();
}
this.load(url);
}
}, {
key: "load",
value: function load(url) {
var _this = this;
if (!url) {
return;
}
this.url = url;
this.imageData = {};
var element = this.element,
options = this.options;
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.
var xhr = new XMLHttpRequest();
var 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 = function () {
// 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 = function () {
_this.read(xhr.response);
};
xhr.onloadend = function () {
_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);
}
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.withCredentials = element.crossOrigin === 'use-credentials';
xhr.send();
}
}, {
key: "read",
value: function read(arrayBuffer) {
var options = this.options,
imageData = this.imageData; // Reset the orientation value to its default value 1
// as some iOS browsers will render image with its orientation
var orientation = resetAndGetOrientation(arrayBuffer);
var rotate = 0;
var scaleX = 1;
var scaleY = 1;
if (orientation > 1) {
// Generate a new URL which has the default orientation value
this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);
var _parseOrientation = parseOrientation(orientation);
rotate = _parseOrientation.rotate;
scaleX = _parseOrientation.scaleX;
scaleY = _parseOrientation.scaleY;
}
if (options.rotatable) {
imageData.rotate = rotate;
}
if (options.scalable) {
imageData.scaleX = scaleX;
imageData.scaleY = scaleY;
}
this.clone();
}
}, {
key: "clone",
value: function clone() {
var element = this.element,
url = this.url;
var crossOrigin = element.crossOrigin;
var 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;
var 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);
}
}, {
key: "start",
value: function start() {
var _this2 = this;
var image = this.image;
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.
var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent);
var done = function done(naturalWidth, naturalHeight) {
assign(_this2.imageData, {
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
aspectRatio: naturalWidth / naturalHeight
});
_this2.sizing = false;
_this2.sized = true;
_this2.build();
}; // Most modern browsers (excepts iOS WebKit)
if (image.naturalWidth && !isIOSWebKit) {
done(image.naturalWidth, image.naturalHeight);
return;
}
var sizingImage = document.createElement('img');
var body = document.body || document.documentElement;
this.sizingImage = sizingImage;
sizingImage.onload = function () {
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);
}
}
}, {
key: "stop",
value: function stop() {
var image = this.image;
image.onload = null;
image.onerror = null;
image.parentNode.removeChild(image);
this.image = null;
}
}, {
key: "build",
value: function build() {
if (!this.sized || this.ready) {
return;
}
var element = this.element,
options = this.options,
image = this.image; // Create cropper elements
var container = element.parentNode;
var template = document.createElement('div');
template.innerHTML = TEMPLATE;
var cropper = template.querySelector(".".concat(NAMESPACE, "-container"));
var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas"));
var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box"));
var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box"));
var face = cropBox.querySelector(".".concat(NAMESPACE, "-face"));
this.container = container;
this.cropper = cropper;
this.canvas = canvas;
this.dragBox = dragBox;
this.cropBox = cropBox;
this.viewBox = cropper.querySelector(".".concat(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 image if is hidden
if (!this.isImg) {
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("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN);
}
if (!options.center) {
addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN);
}
if (options.background) {
addClass(cropper, "".concat(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("".concat(NAMESPACE, "-line")), CLASS_HIDDEN);
addClass(cropBox.getElementsByClassName("".concat(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);
}
}, {
key: "unbuild",
value: function unbuild() {
if (!this.ready) {
return;
}
this.ready = false;
this.unbind();
this.resetPreview();
this.cropper.parentNode.removeChild(this.cropper);
removeClass(this.element, CLASS_HIDDEN);
}
}, {
key: "uncreate",
value: function 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.
*/
}], [{
key: "noConflict",
value: function noConflict() {
window.Cropper = AnotherCropper;
return Cropper;
}
/**
* Change the default options.
* @param {Object} options - The new default options.
*/
}, {
key: "setDefaults",
value: function setDefaults(options) {
assign(DEFAULTS, isPlainObject(options) && options);
}
}]);
return Cropper;
}();
assign(Cropper.prototype, render, preview, events, handlers, change, methods);
if ($.fn) {
var AnotherCropper$1 = $.fn.cropper;
var NAMESPACE$1 = 'cropper';
$.fn.cropper = function jQueryCropper(option) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var result;
this.each(function (i, element) {
var $element = $(element);
var isDestroy = option === 'destroy';
var cropper = $element.data(NAMESPACE$1);
if (!cropper) {
if (isDestroy) {
return;
}
var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
cropper = new Cropper(element, options);
$element.data(NAMESPACE$1, cropper);
}
if (typeof option === 'string') {
var fn = cropper[option];
if ($.isFunction(fn)) {
result = fn.apply(cropper, args);
if (result === cropper) {
result = undefined;
}
if (isDestroy) {
$element.removeData(NAMESPACE$1);
}
}
}
});
return result !== undefined ? result : this;
};
$.fn.cropper.Constructor = Cropper;
$.fn.cropper.setDefaults = Cropper.setDefaults;
$.fn.cropper.noConflict = function noConflict() {
$.fn.cropper = AnotherCropper$1;
return this;
};
}
================================================
FILE: dist/cropper.css
================================================
/*!
* Cropper v4.1.0
* https://fengyuanchen.github.io/cropper
*
* Copyright 2014-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2019-10-12T07:43:47.783Z
*/
.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 {
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;
}
================================================
FILE: dist/cropper.esm.js
================================================
/*!
* Cropper v4.1.0
* https://fengyuanchen.github.io/cropper
*
* Copyright 2014-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2019-10-12T07:43:51.850Z
*/
import $ from 'jquery';
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(source, true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(source).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
var WINDOW = IS_BROWSER ? window : {};
var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;
var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
var NAMESPACE = 'cropper'; // Actions
var ACTION_ALL = 'all';
var ACTION_CROP = 'crop';
var ACTION_MOVE = 'move';
var ACTION_ZOOM = 'zoom';
var ACTION_EAST = 'e';
var ACTION_WEST = 'w';
var ACTION_SOUTH = 's';
var ACTION_NORTH = 'n';
var ACTION_NORTH_EAST = 'ne';
var ACTION_NORTH_WEST = 'nw';
var ACTION_SOUTH_EAST = 'se';
var ACTION_SOUTH_WEST = 'sw'; // Classes
var CLASS_CROP = "".concat(NAMESPACE, "-crop");
var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");
var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");
var CLASS_HIDE = "".concat(NAMESPACE, "-hide");
var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");
var CLASS_MODAL = "".concat(NAMESPACE, "-modal");
var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys
var DATA_ACTION = "".concat(NAMESPACE, "Action");
var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes
var DRAG_MODE_CROP = 'crop';
var DRAG_MODE_MOVE = 'move';
var DRAG_MODE_NONE = 'none'; // Events
var EVENT_CROP = 'crop';
var EVENT_CROP_END = 'cropend';
var EVENT_CROP_MOVE = 'cropmove';
var EVENT_CROP_START = 'cropstart';
var EVENT_DBLCLICK = 'dblclick';
var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
var EVENT_READY = 'ready';
var EVENT_RESIZE = 'resize';
var EVENT_WHEEL = 'wheel';
var EVENT_ZOOM = 'zoom'; // Mime types
var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps
var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
var REGEXP_DATA_URL = /^data:/;
var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc
// Inspired by the default width and height of a canvas element.
var MIN_CONTAINER_WIDTH = 200;
var MIN_CONTAINER_HEIGHT = 100;
var DEFAULTS = {
// 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: 200,
minContainerHeight: 100,
// Shortcuts of events
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null
};
var TEMPLATE = '<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>';
/**
* Check if the given value is not a number.
*/
var 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`.
*/
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`.
*/
var isPositiveNumber = function isPositiveNumber(value) {
return 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`.
*/
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`.
*/
function isObject(value) {
return _typeof(value) === 'object' && value !== null;
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
/**
* 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`.
*/
function isPlainObject(value) {
if (!isObject(value)) {
return false;
}
try {
var _constructor = value.constructor;
var prototype = _constructor.prototype;
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`.
*/
function isFunction(value) {
return typeof value === 'function';
}
var slice = Array.prototype.slice;
/**
* Convert array-like or iterable object to an array.
* @param {*} value - The value to convert.
* @returns {Array} Returns a new array.
*/
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.
*/
function forEach(data, callback) {
if (data && isFunction(callback)) {
if (Array.isArray(data) || isNumber(data.length)
/* array-like */
) {
toArray(data).forEach(function (value, key) {
callback.call(data, value, key, data);
});
} else if (isObject(data)) {
Object.keys(data).forEach(function (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.
*/
var assign = Object.assign || function assign(target) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (isObject(target) && args.length > 0) {
args.forEach(function (arg) {
if (isObject(arg)) {
Object.keys(arg).forEach(function (key) {
target[key] = arg[key];
});
}
});
}
return target;
};
var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;
/**
* Normalize decimal number.
* Check out {@link http://0.30000000000000004.com/}
* @param {number} value - The value to normalize.
* @param {number} [times=100000000000] - The times for normalizing.
* @returns {number} Returns the normalized number.
*/
function normalizeDecimalNumber(value) {
var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;
return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;
}
var 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.
*/
function setStyle(element, styles) {
var style = element.style;
forEach(styles, function (value, property) {
if (REGEXP_SUFFIX.test(property) && isNumber(value)) {
value = "".concat(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.
*/
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.
*/
function addClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (elem) {
addClass(elem, value);
});
return;
}
if (element.classList) {
element.classList.add(value);
return;
}
var className = element.className.trim();
if (!className) {
element.className = value;
} else if (className.indexOf(value) < 0) {
element.className = "".concat(className, " ").concat(value);
}
}
/**
* Remove classes from the given element.
* @param {Element} element - The target element.
* @param {string} value - The classes to be removed.
*/
function removeClass(element, value) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (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.
*/
function toggleClass(element, value, added) {
if (!value) {
return;
}
if (isNumber(element.length)) {
forEach(element, function (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);
}
}
var 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.
*/
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.
*/
function getData(element, name) {
if (isObject(element[name])) {
return element[name];
}
if (element.dataset) {
return element.dataset[name];
}
return element.getAttribute("data-".concat(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.
*/
function setData(element, name, data) {
if (isObject(data)) {
element[name] = data;
} else if (element.dataset) {
element.dataset[name] = data;
} else {
element.setAttribute("data-".concat(toParamCase(name)), data);
}
}
/**
* Remove data from the given element.
* @param {Element} element - The target element.
* @param {string} name - The data key to remove.
*/
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-".concat(toParamCase(name)));
}
}
var REGEXP_SPACES = /\s\s*/;
var onceSupported = function () {
var supported = false;
if (IS_BROWSER) {
var once = false;
var listener = function listener() {};
var options = Object.defineProperty({}, 'once', {
get: function 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: function 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.
*/
function removeListener(element, type, listener) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var handler = listener;
type.trim().split(REGEXP_SPACES).forEach(function (event) {
if (!onceSupported) {
var listeners = element.listeners;
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.
*/
function addListener(element, type, listener) {
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var _handler = listener;
type.trim().split(REGEXP_SPACES).forEach(function (event) {
if (options.once && !onceSupported) {
var _element$listeners = element.listeners,
listeners = _element$listeners === void 0 ? {} : _element$listeners;
_handler = function handler() {
delete listeners[event][listener];
element.removeEventListener(event, _handler, options);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
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.
*/
function dispatchEvent(element, type, data) {
var 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.
*/
function getOffset(element) {
var box = element.getBoundingClientRect();
return {
left: box.left + (window.pageXOffset - document.documentElement.clientLeft),
top: box.top + (window.pageYOffset - document.documentElement.clientTop)
};
}
var location = WINDOW.location;
var 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`.
*/
function isCrossOriginURL(url) {
var 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.
*/
function addTimestamp(url) {
var timestamp = "timestamp=".concat(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.
*/
function getTransforms(_ref) {
var rotate = _ref.rotate,
scaleX = _ref.scaleX,
scaleY = _ref.scaleY,
translateX = _ref.translateX,
translateY = _ref.translateY;
var values = [];
if (isNumber(translateX) && translateX !== 0) {
values.push("translateX(".concat(translateX, "px)"));
}
if (isNumber(translateY) && translateY !== 0) {
values.push("translateY(".concat(translateY, "px)"));
} // Rotate should come first before scale to match orientation transform
if (isNumber(rotate) && rotate !== 0) {
values.push("rotate(".concat(rotate, "deg)"));
}
if (isNumber(scaleX) && scaleX !== 1) {
values.push("scaleX(".concat(scaleX, ")"));
}
if (isNumber(scaleY) && scaleY !== 1) {
values.push("scaleY(".concat(scaleY, ")"));
}
var transform = values.length ? values.join(' ') : 'none';
return {
WebkitTransform: transform,
msTransform: transform,
transform: transform
};
}
/**
* Get the max ratio of a group of pointers.
* @param {string} pointers - The target pointers.
* @returns {number} The result ratio.
*/
function getMaxZoomRatio(pointers) {
var pointers2 = _objectSpread2({}, pointers);
var ratios = [];
forEach(pointers, function (pointer, pointerId) {
delete pointers2[pointerId];
forEach(pointers2, function (pointer2) {
var x1 = Math.abs(pointer.startX - pointer2.startX);
var y1 = Math.abs(pointer.startY - pointer2.startY);
var x2 = Math.abs(pointer.endX - pointer2.endX);
var y2 = Math.abs(pointer.endY - pointer2.endY);
var z1 = Math.sqrt(x1 * x1 + y1 * y1);
var z2 = Math.sqrt(x2 * x2 + y2 * y2);
var ratio = (z2 - z1) / z1;
ratios.push(ratio);
});
});
ratios.sort(function (a, b) {
return Math.abs(a) < Math.abs(b);
});
return ratios[0];
}
/**
* 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.
*/
function getPointer(_ref2, endOnly) {
var pageX = _ref2.pageX,
pageY = _ref2.pageY;
var end = {
endX: pageX,
endY: pageY
};
return endOnly ? end : _objectSpread2({
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.
*/
function getPointersCenter(pointers) {
var pageX = 0;
var pageY = 0;
var count = 0;
forEach(pointers, function (_ref3) {
var startX = _ref3.startX,
startY = _ref3.startY;
pageX += startX;
pageY += startY;
count += 1;
});
pageX /= count;
pageY /= count;
return {
pageX: pageX,
pageY: 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.
*/
function getAdjustedSizes(_ref4) // or 'cover'
{
var aspectRatio = _ref4.aspectRatio,
height = _ref4.height,
width = _ref4.width;
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
var isValidWidth = isPositiveNumber(width);
var isValidHeight = isPositiveNumber(height);
if (isValidWidth && isValidHeight) {
var 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: width,
height: height
};
}
/**
* Get the new sizes of a rectangle after rotated.
* @param {Object} data - The original sizes.
* @returns {Object} The result sizes.
*/
function getRotatedSizes(_ref5) {
var width = _ref5.width,
height = _ref5.height,
degree = _ref5.degree;
degree = Math.abs(degree) % 180;
if (degree === 90) {
return {
width: height,
height: width
};
}
var arc = degree % 90 * Math.PI / 180;
var sinArc = Math.sin(arc);
var cosArc = Math.cos(arc);
var newWidth = width * cosArc + height * sinArc;
var 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.
*/
function getSourceCanvas(image, _ref6, _ref7, _ref8) {
var imageAspectRatio = _ref6.aspectRatio,
imageNaturalWidth = _ref6.naturalWidth,
imageNaturalHeight = _ref6.naturalHeight,
_ref6$rotate = _ref6.rotate,
rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,
_ref6$scaleX = _ref6.scaleX,
scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,
_ref6$scaleY = _ref6.scaleY,
scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;
var aspectRatio = _ref7.aspectRatio,
naturalWidth = _ref7.naturalWidth,
naturalHeight = _ref7.naturalHeight;
var _ref8$fillColor = _ref8.fillColor,
fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor,
_ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,
imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,
_ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,
imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,
_ref8$maxWidth = _ref8.maxWidth,
maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,
_ref8$maxHeight = _ref8.maxHeight,
maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,
_ref8$minWidth = _ref8.minWidth,
minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,
_ref8$minHeight = _ref8.minHeight,
minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: maxWidth,
height: maxHeight
});
var minSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: minWidth,
height: minHeight
}, 'cover');
var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));
var 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
var destMaxSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: maxWidth,
height: maxHeight
});
var destMinSizes = getAdjustedSizes({
aspectRatio: imageAspectRatio,
width: minWidth,
height: minHeight
}, 'cover');
var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));
var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));
var 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.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {
return Math.floor(normalizeDecimalNumber(param));
}))));
context.restore();
return canvas;
}
var fromCharCode = String.fromCharCode;
/**
* 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.
*/
function getStringFromCharCode(dataView, start, length) {
var str = '';
length += start;
for (var i = start; i < length; i += 1) {
str += fromCharCode(dataView.getUint8(i));
}
return str;
}
var 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.
*/
function dataURLToArrayBuffer(dataURL) {
var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');
var binary = atob(base64);
var arrayBuffer = new ArrayBuffer(binary.length);
var uint8 = new Uint8Array(arrayBuffer);
forEach(uint8, function (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.
*/
function arrayBufferToDataURL(arrayBuffer, mimeType) {
var chunks = []; // Chunk Typed Array for better performance (#435)
var chunkSize = 8192;
var 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:".concat(mimeType, ";base64,").concat(btoa(chunks.join('')));
}
/**
* Get orientation value from given array buffer.
* @param {ArrayBuffer} arrayBuffer - The array buffer to read.
* @returns {number} The read orientation value.
*/
function resetAndGetOrientation(arrayBuffer) {
var dataView = new DataView(arrayBuffer);
var orientation; // Ignores range error when the image does not have correct Exif information
try {
var littleEndian;
var app1Start;
var ifdStart; // Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
var length = dataView.byteLength;
var offset = 2;
while (offset + 1 < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset += 1;
}
}
if (app1Start) {
var exifIDCode = app1Start + 4;
var tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
var endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D
/* bigEndian */
) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
var _length = dataView.getUint16(ifdStart, littleEndian);
var _offset;
var 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.
*/
function parseOrientation(orientation) {
var rotate = 0;
var scaleX = 1;
var 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: rotate,
scaleX: scaleX,
scaleY: scaleY
};
}
var render = {
render: function render() {
this.initContainer();
this.initCanvas();
this.initCropBox();
this.renderCanvas();
if (this.cropped) {
this.renderCropBox();
}
},
initContainer: function initContainer() {
var element = this.element,
options = this.options,
container = this.container,
cropper = this.cropper;
addClass(cropper, CLASS_HIDDEN);
removeClass(element, CLASS_HIDDEN);
var containerData = {
width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),
height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)
};
this.containerData = containerData;
setStyle(cropper, {
width: containerData.width,
height: containerData.height
});
addClass(element, CLASS_HIDDEN);
removeClass(cropper, CLASS_HIDDEN);
},
// Canvas (image wrapper)
initCanvas: function initCanvas() {
var containerData = this.containerData,
imageData = this.imageData;
var viewMode = this.options.viewMode;
var rotated = Math.abs(imageData.rotate) % 180 === 90;
var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;
var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;
var aspectRatio = naturalWidth / naturalHeight;
var canvasWidth = containerData.width;
var 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;
}
var canvasData = {
aspectRatio: aspectRatio,
naturalWidth: naturalWidth,
naturalHeight: naturalHeight,
width: canvasWidth,
height: canvasHeight
};
canvasData.left = (containerData.width - canvasWidth) / 2;
canvasData.top = (containerData.height - canvasHeight) / 2;
canvasData.oldLeft = canvasData.left;
canvasData.oldTop = canvasData.top;
this.canvasData = canvasData;
this.limited = viewMode === 1 || viewMode === 2;
this.limitCanvas(true, true);
this.initialImageData = assign({}, imageData);
this.initialCanvasData = assign({}, canvasData);
},
limitCanvas: function limitCanvas(sizeLimited, positionLimited) {
var options = this.options,
containerData = this.containerData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData;
var viewMode = options.viewMode;
var aspectRatio = canvasData.aspectRatio;
var cropped = this.cropped && cropBoxData;
if (sizeLimited) {
var minCanvasWidth = Number(options.minCanvasWidth) || 0;
var 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;
}
}
}
var _getAdjustedSizes = getAdjustedSizes({
aspectRatio: aspectRatio,
width: minCanvasWidth,
height: minCanvasHeight
});
minCanvasWidth = _getAdjustedSizes.width;
minCanvasHeight = _getAdjustedSizes.height;
canvasData.minWidth = minCanvasWidth;
canvasData.minHeight = minCanvasHeight;
canvasData.maxWidth = Infinity;
canvasData.maxHeight = Infinity;
}
if (positionLimited) {
if (viewMode > (cropped ? 0 : 1)) {
var newCanvasLeft = containerData.width - canvasData.width;
var 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: function renderCanvas(changed, transformed) {
var canvasData = this.canvasData,
imageData = this.imageData;
if (transformed) {
var _getRotatedSizes = getRotatedSizes({
width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),
height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),
degree: imageData.rotate || 0
}),
naturalWidth = _getRotatedSizes.width,
naturalHeight = _getRotatedSizes.height;
var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);
var 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: function renderImage(changed) {
var canvasData = this.canvasData,
imageData = this.imageData;
var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);
var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);
assign(imageData, {
width: width,
height: 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: function initCropBox() {
var options = this.options,
canvasData = this.canvasData;
var aspectRatio = options.aspectRatio || options.initialAspectRatio;
var autoCropArea = Number(options.autoCropArea) || 0.8;
var 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: function limitCropBox(sizeLimited, positionLimited) {
var options = this.options,
containerData = this.containerData,
canvasData = this.canvasData,
cropBoxData = this.cropBoxData,
limited = this.limited;
var aspectRatio = options.aspectRatio;
if (sizeLimited) {
var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;
var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;
var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;
var 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: function renderCropBox() {
var options = this.options,
containerData = this.containerData,
cropBoxData = this.cropBoxData;
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: function output() {
this.preview();
dispatchEvent(this.element, EVENT_CROP, this.getData());
}
};
var preview = {
initPreview: function initPreview() {
var element = this.element,
crossOrigin = this.crossOrigin;
var preview = this.options.preview;
var url = crossOrigin ? this.crossOriginUrl : this.url;
var alt = element.alt || 'The image to preview';
var 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;
}
var previews = preview;
if (typeof preview === 'string') {
previews = element.ownerDocument.querySelectorAll(preview);
} else if (preview.querySelector) {
previews = [preview];
}
this.previews = previews;
forEach(previews, function (el) {
var 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 `he
gitextract_v2xkuq6t/
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ └── bug_report.md
│ └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── composer.json
├── dist/
│ ├── cropper.common.js
│ ├── cropper.css
│ ├── cropper.esm.js
│ └── cropper.js
├── docs/
│ ├── css/
│ │ ├── cropper.css
│ │ └── main.css
│ ├── index.html
│ ├── js/
│ │ ├── cropper.js
│ │ └── main.js
│ ├── v2.3.4/
│ │ ├── css/
│ │ │ ├── cropper.css
│ │ │ └── main.css
│ │ ├── index.html
│ │ └── js/
│ │ ├── cropper.js
│ │ └── main.js
│ └── v3.1.6/
│ ├── css/
│ │ ├── cropper.css
│ │ └── main.css
│ ├── index.html
│ └── js/
│ ├── cropper.js
│ └── main.js
├── karma.conf.js
├── package.json
├── postcss.config.js
├── rollup.config.js
├── src/
│ ├── index.css
│ └── index.js
└── test/
└── index.js
SYMBOL INDEX (230 symbols across 7 files)
FILE: dist/cropper.common.js
function _interopDefault (line 13) | function _interopDefault (ex) { return (ex && (typeof ex === 'object') &...
function _typeof (line 17) | function _typeof(obj) {
function _classCallCheck (line 31) | function _classCallCheck(instance, Constructor) {
function _defineProperties (line 37) | function _defineProperties(target, props) {
function _createClass (line 47) | function _createClass(Constructor, protoProps, staticProps) {
function _defineProperty (line 53) | function _defineProperty(obj, key, value) {
function ownKeys (line 68) | function ownKeys(object, enumerableOnly) {
function _objectSpread2 (line 82) | function _objectSpread2(target) {
function _toConsumableArray (line 102) | function _toConsumableArray(arr) {
function _arrayWithoutHoles (line 106) | function _arrayWithoutHoles(arr) {
function _iterableToArray (line 114) | function _iterableToArray(iter) {
function _nonIterableSpread (line 118) | function _nonIterableSpread() {
function isNumber (line 269) | function isNumber(value) {
function isUndefined (line 287) | function isUndefined(value) {
function isObject (line 296) | function isObject(value) {
function isPlainObject (line 306) | function isPlainObject(value) {
function isFunction (line 325) | function isFunction(value) {
function toArray (line 335) | function toArray(value) {
function forEach (line 345) | function forEach(data, callback) {
function normalizeDecimalNumber (line 395) | function normalizeDecimalNumber(value) {
function setStyle (line 406) | function setStyle(element, styles) {
function hasClass (line 423) | function hasClass(element, value) {
function addClass (line 432) | function addClass(element, value) {
function removeClass (line 463) | function removeClass(element, value) {
function toggleClass (line 491) | function toggleClass(element, value, added) {
function toParamCase (line 517) | function toParamCase(value) {
function getData (line 527) | function getData(element, name) {
function setData (line 545) | function setData(element, name, data) {
function removeData (line 560) | function removeData(element, name) {
function removeListener (line 618) | function removeListener(element, type, listener) {
function addListener (line 650) | function addListener(element, type, listener) {
function dispatchEvent (line 692) | function dispatchEvent(element, type, data) {
function getOffset (line 714) | function getOffset(element) {
function isCrossOriginURL (line 729) | function isCrossOriginURL(url) {
function addTimestamp (line 739) | function addTimestamp(url) {
function getTransforms (line 749) | function getTransforms(_ref) {
function getMaxZoomRatio (line 791) | function getMaxZoomRatio(pointers) {
function getPointer (line 820) | function getPointer(_ref2, endOnly) {
function getPointersCenter (line 838) | function getPointersCenter(pointers) {
function getAdjustedSizes (line 863) | function getAdjustedSizes(_ref4) // or 'cover'
function getRotatedSizes (line 897) | function getRotatedSizes(_ref5) {
function getSourceCanvas (line 932) | function getSourceCanvas(image, _ref6, _ref7, _ref8) {
function getStringFromCharCode (line 1013) | function getStringFromCharCode(dataView, start, length) {
function dataURLToArrayBuffer (line 1030) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 1047) | function arrayBufferToDataURL(arrayBuffer, mimeType) {
function resetAndGetOrientation (line 1068) | function resetAndGetOrientation(arrayBuffer) {
function parseOrientation (line 1148) | function parseOrientation(orientation) {
function Cropper (line 3210) | function Cropper(element) {
FILE: dist/cropper.esm.js
function _typeof (line 13) | function _typeof(obj) {
function _classCallCheck (line 27) | function _classCallCheck(instance, Constructor) {
function _defineProperties (line 33) | function _defineProperties(target, props) {
function _createClass (line 43) | function _createClass(Constructor, protoProps, staticProps) {
function _defineProperty (line 49) | function _defineProperty(obj, key, value) {
function ownKeys (line 64) | function ownKeys(object, enumerableOnly) {
function _objectSpread2 (line 78) | function _objectSpread2(target) {
function _toConsumableArray (line 98) | function _toConsumableArray(arr) {
function _arrayWithoutHoles (line 102) | function _arrayWithoutHoles(arr) {
function _iterableToArray (line 110) | function _iterableToArray(iter) {
function _nonIterableSpread (line 114) | function _nonIterableSpread() {
function isNumber (line 265) | function isNumber(value) {
function isUndefined (line 283) | function isUndefined(value) {
function isObject (line 292) | function isObject(value) {
function isPlainObject (line 302) | function isPlainObject(value) {
function isFunction (line 321) | function isFunction(value) {
function toArray (line 331) | function toArray(value) {
function forEach (line 341) | function forEach(data, callback) {
function normalizeDecimalNumber (line 391) | function normalizeDecimalNumber(value) {
function setStyle (line 402) | function setStyle(element, styles) {
function hasClass (line 419) | function hasClass(element, value) {
function addClass (line 428) | function addClass(element, value) {
function removeClass (line 459) | function removeClass(element, value) {
function toggleClass (line 487) | function toggleClass(element, value, added) {
function toParamCase (line 513) | function toParamCase(value) {
function getData (line 523) | function getData(element, name) {
function setData (line 541) | function setData(element, name, data) {
function removeData (line 556) | function removeData(element, name) {
function removeListener (line 614) | function removeListener(element, type, listener) {
function addListener (line 646) | function addListener(element, type, listener) {
function dispatchEvent (line 688) | function dispatchEvent(element, type, data) {
function getOffset (line 710) | function getOffset(element) {
function isCrossOriginURL (line 725) | function isCrossOriginURL(url) {
function addTimestamp (line 735) | function addTimestamp(url) {
function getTransforms (line 745) | function getTransforms(_ref) {
function getMaxZoomRatio (line 787) | function getMaxZoomRatio(pointers) {
function getPointer (line 816) | function getPointer(_ref2, endOnly) {
function getPointersCenter (line 834) | function getPointersCenter(pointers) {
function getAdjustedSizes (line 859) | function getAdjustedSizes(_ref4) // or 'cover'
function getRotatedSizes (line 893) | function getRotatedSizes(_ref5) {
function getSourceCanvas (line 928) | function getSourceCanvas(image, _ref6, _ref7, _ref8) {
function getStringFromCharCode (line 1009) | function getStringFromCharCode(dataView, start, length) {
function dataURLToArrayBuffer (line 1026) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 1043) | function arrayBufferToDataURL(arrayBuffer, mimeType) {
function resetAndGetOrientation (line 1064) | function resetAndGetOrientation(arrayBuffer) {
function parseOrientation (line 1144) | function parseOrientation(orientation) {
function Cropper (line 3206) | function Cropper(element) {
FILE: dist/cropper.js
function _typeof (line 19) | function _typeof(obj) {
function _classCallCheck (line 33) | function _classCallCheck(instance, Constructor) {
function _defineProperties (line 39) | function _defineProperties(target, props) {
function _createClass (line 49) | function _createClass(Constructor, protoProps, staticProps) {
function _defineProperty (line 55) | function _defineProperty(obj, key, value) {
function ownKeys (line 70) | function ownKeys(object, enumerableOnly) {
function _objectSpread2 (line 84) | function _objectSpread2(target) {
function _toConsumableArray (line 104) | function _toConsumableArray(arr) {
function _arrayWithoutHoles (line 108) | function _arrayWithoutHoles(arr) {
function _iterableToArray (line 116) | function _iterableToArray(iter) {
function _nonIterableSpread (line 120) | function _nonIterableSpread() {
function isNumber (line 271) | function isNumber(value) {
function isUndefined (line 289) | function isUndefined(value) {
function isObject (line 298) | function isObject(value) {
function isPlainObject (line 308) | function isPlainObject(value) {
function isFunction (line 327) | function isFunction(value) {
function toArray (line 337) | function toArray(value) {
function forEach (line 347) | function forEach(data, callback) {
function normalizeDecimalNumber (line 397) | function normalizeDecimalNumber(value) {
function setStyle (line 408) | function setStyle(element, styles) {
function hasClass (line 425) | function hasClass(element, value) {
function addClass (line 434) | function addClass(element, value) {
function removeClass (line 465) | function removeClass(element, value) {
function toggleClass (line 493) | function toggleClass(element, value, added) {
function toParamCase (line 519) | function toParamCase(value) {
function getData (line 529) | function getData(element, name) {
function setData (line 547) | function setData(element, name, data) {
function removeData (line 562) | function removeData(element, name) {
function removeListener (line 620) | function removeListener(element, type, listener) {
function addListener (line 652) | function addListener(element, type, listener) {
function dispatchEvent (line 694) | function dispatchEvent(element, type, data) {
function getOffset (line 716) | function getOffset(element) {
function isCrossOriginURL (line 731) | function isCrossOriginURL(url) {
function addTimestamp (line 741) | function addTimestamp(url) {
function getTransforms (line 751) | function getTransforms(_ref) {
function getMaxZoomRatio (line 793) | function getMaxZoomRatio(pointers) {
function getPointer (line 822) | function getPointer(_ref2, endOnly) {
function getPointersCenter (line 840) | function getPointersCenter(pointers) {
function getAdjustedSizes (line 865) | function getAdjustedSizes(_ref4) // or 'cover'
function getRotatedSizes (line 899) | function getRotatedSizes(_ref5) {
function getSourceCanvas (line 934) | function getSourceCanvas(image, _ref6, _ref7, _ref8) {
function getStringFromCharCode (line 1015) | function getStringFromCharCode(dataView, start, length) {
function dataURLToArrayBuffer (line 1032) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 1049) | function arrayBufferToDataURL(arrayBuffer, mimeType) {
function resetAndGetOrientation (line 1070) | function resetAndGetOrientation(arrayBuffer) {
function parseOrientation (line 1150) | function parseOrientation(orientation) {
function Cropper (line 3212) | function Cropper(element) {
FILE: docs/js/cropper.js
function _typeof (line 19) | function _typeof(obj) {
function _classCallCheck (line 33) | function _classCallCheck(instance, Constructor) {
function _defineProperties (line 39) | function _defineProperties(target, props) {
function _createClass (line 49) | function _createClass(Constructor, protoProps, staticProps) {
function _defineProperty (line 55) | function _defineProperty(obj, key, value) {
function ownKeys (line 70) | function ownKeys(object, enumerableOnly) {
function _objectSpread2 (line 84) | function _objectSpread2(target) {
function _toConsumableArray (line 104) | function _toConsumableArray(arr) {
function _arrayWithoutHoles (line 108) | function _arrayWithoutHoles(arr) {
function _iterableToArray (line 116) | function _iterableToArray(iter) {
function _nonIterableSpread (line 120) | function _nonIterableSpread() {
function isNumber (line 271) | function isNumber(value) {
function isUndefined (line 289) | function isUndefined(value) {
function isObject (line 298) | function isObject(value) {
function isPlainObject (line 308) | function isPlainObject(value) {
function isFunction (line 327) | function isFunction(value) {
function toArray (line 337) | function toArray(value) {
function forEach (line 347) | function forEach(data, callback) {
function normalizeDecimalNumber (line 397) | function normalizeDecimalNumber(value) {
function setStyle (line 408) | function setStyle(element, styles) {
function hasClass (line 425) | function hasClass(element, value) {
function addClass (line 434) | function addClass(element, value) {
function removeClass (line 465) | function removeClass(element, value) {
function toggleClass (line 493) | function toggleClass(element, value, added) {
function toParamCase (line 519) | function toParamCase(value) {
function getData (line 529) | function getData(element, name) {
function setData (line 547) | function setData(element, name, data) {
function removeData (line 562) | function removeData(element, name) {
function removeListener (line 620) | function removeListener(element, type, listener) {
function addListener (line 652) | function addListener(element, type, listener) {
function dispatchEvent (line 694) | function dispatchEvent(element, type, data) {
function getOffset (line 716) | function getOffset(element) {
function isCrossOriginURL (line 731) | function isCrossOriginURL(url) {
function addTimestamp (line 741) | function addTimestamp(url) {
function getTransforms (line 751) | function getTransforms(_ref) {
function getMaxZoomRatio (line 793) | function getMaxZoomRatio(pointers) {
function getPointer (line 822) | function getPointer(_ref2, endOnly) {
function getPointersCenter (line 840) | function getPointersCenter(pointers) {
function getAdjustedSizes (line 865) | function getAdjustedSizes(_ref4) // or 'cover'
function getRotatedSizes (line 899) | function getRotatedSizes(_ref5) {
function getSourceCanvas (line 934) | function getSourceCanvas(image, _ref6, _ref7, _ref8) {
function getStringFromCharCode (line 1015) | function getStringFromCharCode(dataView, start, length) {
function dataURLToArrayBuffer (line 1032) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 1049) | function arrayBufferToDataURL(arrayBuffer, mimeType) {
function resetAndGetOrientation (line 1070) | function resetAndGetOrientation(arrayBuffer) {
function parseOrientation (line 1150) | function parseOrientation(orientation) {
function Cropper (line 3212) | function Cropper(element) {
FILE: docs/v2.3.4/js/cropper.js
function isNumber (line 109) | function isNumber(n) {
function isUndefined (line 113) | function isUndefined(n) {
function toArray (line 117) | function toArray(obj, offset) {
function proxy (line 129) | function proxy(fn, context) {
function isCrossOriginURL (line 137) | function isCrossOriginURL(url) {
function addTimestamp (line 147) | function addTimestamp(url) {
function getCrossOrigin (line 153) | function getCrossOrigin(crossOrigin) {
function getImageSize (line 157) | function getImageSize(image, callback) {
function getTransform (line 175) | function getTransform(options) {
function getRotatedSizes (line 197) | function getRotatedSizes(data, isReversed) {
function getSourceCanvas (line 222) | function getSourceCanvas(image, data) {
function getTouchesCenter (line 288) | function getTouchesCenter(touches) {
function getStringFromCharCode (line 309) | function getStringFromCharCode(dataView, start, length) {
function getOrientation (line 320) | function getOrientation(arrayBuffer) {
function dataURLToArrayBuffer (line 395) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 411) | function arrayBufferToDataURL(arrayBuffer) {
function Cropper (line 424) | function Cropper(element, options) {
FILE: docs/v3.1.6/js/cropper.js
function defineProperties (line 181) | function defineProperties(target, props) {
function isString (line 213) | function isString(value) {
function isNumber (line 227) | function isNumber(value) {
function isUndefined (line 236) | function isUndefined(value) {
function proxy (line 247) | function proxy(fn, context) {
function normalizeDecimalNumber (line 285) | function normalizeDecimalNumber(value) {
function isCrossOriginURL (line 300) | function isCrossOriginURL(url) {
function addTimestamp (line 311) | function addTimestamp(url) {
function getTransformValues (line 322) | function getTransformValues(_ref) {
function getImageNaturalSizes (line 364) | function getImageNaturalSizes(image, callback) {
function getMaxZoomRatio (line 385) | function getMaxZoomRatio(pointers) {
function getPointer (line 418) | function getPointer(_ref2, endOnly) {
function getPointersCenter (line 442) | function getPointersCenter(pointers) {
function getAdjustedSizes (line 476) | function getAdjustedSizes(_ref4) // or 'cover'
function getRotatedSizes (line 512) | function getRotatedSizes(_ref5) {
function getSourceCanvas (line 549) | function getSourceCanvas(image, _ref6, _ref7, _ref8) {
function getStringFromCharCode (line 617) | function getStringFromCharCode(dataView, start, length) {
function dataURLToArrayBuffer (line 637) | function dataURLToArrayBuffer(dataURL) {
function arrayBufferToDataURL (line 656) | function arrayBufferToDataURL(arrayBuffer, mimeType) {
function getOrientation (line 673) | function getOrientation(arrayBuffer) {
function parseOrientation (line 746) | function parseOrientation(orientation) {
function Cropper (line 2835) | function Cropper(element) {
FILE: test/index.js
method ready (line 43) | ready() {
method ready (line 57) | ready() {
Condensed preview — 41 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (824K chars).
[
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintrc",
"chars": 537,
"preview": "{\n \"extends\": \"airbnb-base\",\n \"env\": {\n \"browser\": true\n },\n \"root\": true,\n \"rules\": {\n \"import/no-extraneous"
},
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 1407,
"preview": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, we pledge to respect all people who cont"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 9395,
"preview": "# Contributing to Cropper\n\n> Based on [Angular's contributing guidelines](https://github.com/angular/angular/blob/master"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 834,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 1102,
"preview": "## PR Checklist\n\nPlease check if your PR fulfills the following requirements:\n\n- [ ] The commit message follows our [gui"
},
{
"path": ".gitignore",
"chars": 36,
"preview": "*.local\n*.map\ncoverage\nnode_modules\n"
},
{
"path": ".stylelintrc",
"chars": 192,
"preview": "{\n \"extends\": \"stylelint-config-standard\",\n \"plugins\": [\n \"stylelint-order\"\n ],\n \"rules\": {\n \"no-descending-sp"
},
{
"path": ".travis.yml",
"chars": 99,
"preview": "language: node_js\nnode_js: node\ncache: npm\nscript:\n - npm run lint\n - npm run build\n - npm test\n"
},
{
"path": "CHANGELOG.md",
"chars": 14612,
"preview": "# Changelog\n\n## 4.1.0 (Oct 12, 2019)\n\n- Upgrade the built-in Cropper.js to v1.5.6.\n\n## 4.0.0 (Apr 1, 2018)\n\n- Upgrade th"
},
{
"path": "LICENSE",
"chars": 1101,
"preview": "The MIT License (MIT)\n\nCopyright 2014-present Chen Fengyuan and contributors\n\nPermission is hereby granted, free of char"
},
{
"path": "README.md",
"chars": 3607,
"preview": "# Cropper\n\n[](https://travis-ci.org/fengyuanchen/"
},
{
"path": "babel.config.js",
"chars": 200,
"preview": "module.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n modules: false,\n },\n ],\n ],\n "
},
{
"path": "composer.json",
"chars": 170,
"preview": "{\n \"name\": \"fengyuanchen/cropper\",\n \"license\": \"MIT\",\n \"repositories\": [\n {\n \"type\": \"vcs\",\n \"url\": \"htt"
},
{
"path": "dist/cropper.common.js",
"chars": 107937,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "dist/cropper.css",
"chars": 4651,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "dist/cropper.esm.js",
"chars": 107786,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "dist/cropper.js",
"chars": 114339,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "docs/css/cropper.css",
"chars": 4651,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "docs/css/main.css",
"chars": 3566,
"preview": ".btn {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\nlabel.btn {\n margin-bottom: 0;\n}\n\n.d-flex > .btn {\n flex:"
},
{
"path": "docs/index.html",
"chars": 30541,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">"
},
{
"path": "docs/js/cropper.js",
"chars": 114341,
"preview": "/*!\n * Cropper v4.1.0\n * https://fengyuanchen.github.io/cropper\n *\n * Copyright 2014-present Chen Fengyuan\n * Released u"
},
{
"path": "docs/js/main.js",
"chars": 6529,
"preview": "$(function () {\n 'use strict';\n\n var console = window.console || { log: function () {} };\n var URL = window.URL || wi"
},
{
"path": "docs/v2.3.4/css/cropper.css",
"chars": 4949,
"preview": "/*!\n * Cropper v2.3.4\n * https://github.com/fengyuanchen/cropper\n *\n * Copyright (c) 2014-2016 Chen Fengyuan and contrib"
},
{
"path": "docs/v2.3.4/css/main.css",
"chars": 3423,
"preview": "/* Basic */\n\nbody {\n margin: 0;\n overflow-x: hidden;\n}\n\n.browserupgrade {\n margin: 0;\n padding: .5em 1em;\n backgrou"
},
{
"path": "docs/v2.3.4/index.html",
"chars": 25200,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">"
},
{
"path": "docs/v2.3.4/js/cropper.js",
"chars": 80143,
"preview": "/*!\n * Cropper v2.3.4\n * https://github.com/fengyuanchen/cropper\n *\n * Copyright (c) 2014-2016 Chen Fengyuan and contrib"
},
{
"path": "docs/v2.3.4/js/main.js",
"chars": 5711,
"preview": "$(function () {\n\n 'use strict';\n\n var console = window.console || { log: function () {} };\n var $image = $('#image');"
},
{
"path": "docs/v3.1.6/css/cropper.css",
"chars": 4691,
"preview": "/*!\n * Cropper v3.1.6\n * https://github.com/fengyuanchen/cropper\n *\n * Copyright (c) 2014-2018 Chen Fengyuan\n * Released"
},
{
"path": "docs/v3.1.6/css/main.css",
"chars": 3556,
"preview": ".btn {\n padding-left: .75rem;\n padding-right: .75rem;\n}\n\nlabel.btn {\n margin-bottom: 0;\n}\n\n.d-flex > .btn {\n flex: 1"
},
{
"path": "docs/v3.1.6/index.html",
"chars": 29623,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">"
},
{
"path": "docs/v3.1.6/js/cropper.js",
"chars": 87224,
"preview": "/*!\n * Cropper v3.1.6\n * https://github.com/fengyuanchen/cropper\n *\n * Copyright (c) 2014-2018 Chen Fengyuan\n * Released"
},
{
"path": "docs/v3.1.6/js/main.js",
"chars": 6551,
"preview": "$(function () {\n\n 'use strict';\n\n var console = window.console || { log: function () {} };\n var URL = window.URL || w"
},
{
"path": "karma.conf.js",
"chars": 1021,
"preview": "const babel = require('rollup-plugin-babel');\nconst commonjs = require('rollup-plugin-commonjs');\nconst nodeResolve = re"
},
{
"path": "package.json",
"chars": 3713,
"preview": "{\n \"name\": \"cropper\",\n \"description\": \"A simple jQuery image cropping plugin.\",\n \"version\": \"4.1.0\",\n \"main\": \"dist/"
},
{
"path": "postcss.config.js",
"chars": 391,
"preview": "const rollupConfig = require('./rollup.config');\n\nmodule.exports = {\n plugins: {\n 'postcss-import': {},\n 'postcss"
},
{
"path": "rollup.config.js",
"chars": 1041,
"preview": "const babel = require('rollup-plugin-babel');\nconst commonjs = require('rollup-plugin-commonjs');\nconst nodeResolve = re"
},
{
"path": "src/index.css",
"chars": 25,
"preview": "@import 'cropperjs/src';\n"
},
{
"path": "src/index.js",
"chars": 1248,
"preview": "import $ from 'jquery';\nimport Cropper from 'cropperjs/src';\n\nif ($.fn) {\n const AnotherCropper = $.fn.cropper;\n const"
},
{
"path": "test/index.js",
"chars": 2411,
"preview": "import $ from 'jquery';\nimport '../src';\n\ndescribe('cropper', () => {\n const createImage = () => {\n const container "
}
]
About this extraction
This page contains the full source code of the fengyuanchen/cropper GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 41 files (770.3 KB), approximately 199.6k tokens, and a symbol index with 230 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.