Python毕业设计-基于Django的跳蚤市场网站的设计与实现+使用说明+全部资料（优秀项目）.zip

# Cropper.js [](https://travis-ci.org/fengyuanchen/cropperjs) [](https://www.npmjs.com/package/cropperjs) [](https://www.npmjs.com/package/cropperjs) [](https://unpkg.com/cropperjs/dist/cropper.common.js) [](https://www.npmjs.com/package/cropperjs) > JavaScript image cropper. - [Website](https://fengyuanchen.github.io/cropperjs) - [Photo Editor](https://fengyuanchen.github.io/photo-editor) - An advanced example of Cropper.js. - [jquery-cropper](https://github.com/fengyuanchen/jquery-cropper) - A jQuery plugin wrapper for Cropper.js. ## Table of contents - [Features](#features) - [Main](#main) - [Getting started](#getting-started) - [Options](#options) - [Methods](#methods) - [Events](#events) - [No conflict](#no-conflict) - [Browser support](#browser-support) - [Contributing](#contributing) - [Versioning](#versioning) - [License](#license) ## Features - Supports 39 [options](#options) - Supports 27 [methods](#methods) - Supports 6 [events](#events) - Supports touch (mobile) - Supports zooming - Supports rotating - Supports scaling (flipping) - Supports multiple croppers - Supports to crop on a canvas - Supports to crop an image in the browser-side by canvas - Supports to translate Exif Orientation information - Cross-browser support ## 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 cropperjs ``` In browser: ```html <link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script> ``` [cdnjs](https://github.com/cdnjs/cdnjs) provides CDN support for Cropper.js's CSS and JavaScript. You can find the links [here](https://cdnjs.com/libraries/cropperjs). ### Usage #### Syntax ```js new Cropper(element[, options]) ``` - **element** - Type: `HTMLImageElement` or `HTMLCanvasElement` - The target image or canvas element for cropping. - **options** (optional) - Type: `Object` - The options for cropping. Check out the available [options](#options). #### Example ```html <!-- Wrap the image or canvas element with a block element (container) --> <div> <img id="image" src="picture.jpg"> </div> ``` ```css /* Ensure the size of the image fit the container perfectly */ img { display: block; /* This rule is very important, please don't ignore this */ max-width: 100%; } ``` ```js // import 'cropperjs/dist/cropper.css'; import Cropper from 'cropperjs'; const image = document.getElementById('image'); const cropper = new Cropper(image, { aspectRatio: 16 / 9, crop(event) { console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); console.log(event.detail.rotate); console.log(event.detail.scaleX); console.log(event.detail.scaleY); }, }); ``` #### FAQ How to crop a new area after zoom in or zoom out? > Just double-click your mouse to enter crop mode. How to move the image after cropping an area? > Just double click your mouse to enter move mode. How to fix aspect ratio in free ratio mode? > Just hold the `Shift` key when you resize the crop box. How to crop a square area in free ratio mode? > Just hold the `Shift` key when you crop on the image. #### Notes - The size of the cropper inherits from the size of the image's parent element (wrapper), so be sure to wrap the image with a **visible block element**. > If you are using cropper in a modal, you should initialize the cropper after the modal is shown completely. Otherwise, you will not get the correct cropper. - The outputted cropped data is based on the original image size, so you can use them to crop the image directly. - If you try to start cropper on a cross-origin image, please make sure that your browser supports HTML5 [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes), and your image server supports the `Access-Control-Allow-Origin` option (see the [HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)). #### Known issues - [Known iOS resource limits](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html): As iOS devices limit memory, the browser may crash when you are cropping a large image (iPhone camera resolution). To avoid this, you may resize the image first (preferably below 1024 pixels) before starting a cropper. - Known image size increase: When exporting the cropped image on the browser side with the `HTMLCanvasElement.toDataURL` method, the size of the exported image may be greater than the original image's. This is because the type of the exported image is not the same as the original image's. So just pass the original image's type as the first parameter to `toDataURL` to fix this. For example, if the original type is JPEG, then use `cropper.getCroppedCanvas().toDataURL('image/jpeg')` to export image. [⬆ back to top](#table-of-contents) ## Options You may set cropper options with `new Cropper(image, options)`. If you want to change the global default options, You may use `Cropper.setDefaults(options)`. ### viewMode - Type: `Number` - Default: `0` - Options: - `0`: no restrictions - `1`: restrict the crop box not to exceed the size of the canvas. - `2`: restrict the minimum canvas size to fit within the container. If the proportions of the canvas and the container differ, the minimum canvas will be surrounded by extra space in one of the dimensions. - `3`: restrict the minimum canvas size to fill fit the container. If the proportions of the canvas and the container are different, the container will not be able to fit the whole canvas in one of the dimensions. Define the view mode of the cropper. If you set `viewMode` to `0`, the crop box can extend outside the canvas, while a value of `1`, `2`, or `3` will restrict the crop box to the size of the canvas. `viewMode` of `2` or `3` will additionally restrict the canvas to the container. There is no difference between `2` and `3` when the proportions of the canvas and the container are the same. ### dragMode - Type: `String` - Default: `'crop'` - Options: - `'crop'`: create a new crop box - `'move'`: move the canvas - `'none'`: do nothing Define the dragging mode of the cropper. ### initialAspectRatio - Type: `Number` - Default: `NaN` Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper). > Only available when the `aspectRatio` option is set to `NaN`. ### aspectRatio - Type: `Number` - Default: `NaN` Define the fixed aspect ratio of the crop box. By default, the crop box has a free ratio. ### data - Type: `Object` - Default: `null` The previous cropped data you stored will be passed to the `setData` method automatically when initialized. > Only available when the `autoCrop` option had set to the`true`. ### preview - Type: `Element`, `Array` (elements), `NodeList` or `String` (selector) - Default: `''` - An element or an array of elements or a node list object or a valid selector for [Document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) Add extra elements (containers) for preview. **Notes:** - The maximum width is the initial width of the preview container. - The maximum height is the initial height of the preview container.