├── demo
    ├── image_cropper
    │   ├── icons.png
    │   ├── degree_slider.png
    │   ├── cropperjs-1.5.6
    │   │   ├── LICENSE
    │   │   ├── dist
    │   │   │   ├── cropper.min.css
    │   │   │   ├── cropper.css
    │   │   │   └── cropper.min.js
    │   │   └── README.md
    │   ├── image_cropper.css
    │   └── image_cropper.js
    ├── demo.css
    ├── index.html
    └── demo.js
├── .gitignore
├── SlashUploader
    ├── server
    │   ├── uploads
    │   │   └── readme.md
    │   ├── Web.config
    │   ├── readme.md
    │   └── UploadFiles.aspx
    ├── iframe_gateway.html
    ├── SlashUploader.min.css
    └── SlashUploader.src.css
├── LICENSE
└── README.md


/demo/image_cropper/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/slashapps/SlashUploader/HEAD/demo/image_cropper/icons.png


--------------------------------------------------------------------------------
/demo/image_cropper/degree_slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/slashapps/SlashUploader/HEAD/demo/image_cropper/degree_slider.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | SlashUploader.code-workspace
2 | compile/
3 | SlashUploader/server/uploads/*
4 | !SlashUploader/serveruploads/README.md
5 | 


--------------------------------------------------------------------------------
/SlashUploader/server/uploads/readme.md:
--------------------------------------------------------------------------------
1 | ## Uploads Folder
2 | 
3 | Folder to store user's uploaded files.
4 | Make sure to give "uploads" folder on your server read & write permissions.


--------------------------------------------------------------------------------
/SlashUploader/server/Web.config:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <configuration>
 3 |   <system.web>
 4 |     <httpRuntime maxRequestLength="209715200" executionTimeout="36000" maxQueryStringLength="2097151" />
 5 |   </system.web>
 6 | 	
 7 |   <system.webServer>
 8 | 
 9 |     <validation validateIntegratedModeConfiguration="false"/>
10 |     <security>
11 |       <requestFiltering>
12 |         <requestLimits maxUrl="99999999" maxQueryString="999999999" maxAllowedContentLength="209715200" />
13 |       </requestFiltering>
14 |     </security>
15 | 	
16 |   </system.webServer>
17 | 	
18 | </configuration>
19 | 


--------------------------------------------------------------------------------
/SlashUploader/server/readme.md:
--------------------------------------------------------------------------------
 1 | # Server Script (for Windows server)
 2 | 
 3 | ## Web.config
 4 | 
 5 | Current web.config files allows to upload big files.
 6 | In order for the web.config file to take effect - folder must be Application Pool on server, or web.config file should be located on current Application Pool root.
 7 | 
 8 | ## Uploads Folder
 9 | 
10 | Folder to store user's uploaded files.
11 | Make sure to give "uploads" folder on your server read & write permissions.
12 | 
13 | ## Security
14 | 
15 | Example code limits file types based on file extenstion.
16 | However, it is highly recomanded to use AntiVirus software on your server - allowing users to upload files and view them represent a significant security risk.
17 | Make sure to secure your Application and server with all means necessary.
18 | More information here: https://www.owasp.org/index.php/Unrestricted_File_Upload.
19 | 


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


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-present Slash Apps Development (http://slash.co.il)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SlashUploader
 2 | 
 3 | Javascript multi-features plugin to upload files - with cross-domain support, legacy browsers compatibility, fully-customizable design, and many more options.
 4 | 
 5 | **To get started, visit https://slashuploader.com**
 6 | 
 7 | Check out some of our [demos](https://slashuploader.com#demos).
 8 | 
 9 | 
10 | ## Features
11 | 
12 | The plugin contain the following features:
13 |   * **Cross-Domain** - Upload files to a cross-domain script, on all browsers.
14 |   * **Old Browsers Support** - Support very old browsers, such as IE8.
15 |   * **Preview Images** - See image preview within the plugin progress indication.
16 |   * **Drag & Drop** - Select files by dragging them.
17 |   * **Get Files Metadata** - Get files metadata upon files selection.
18 |   * **Fully Customizable** - Plenty of options to use, with the ability to change the plugin CSS easily, or to simpley use the plugin over you own custom HTML element.
19 |   * **RTL** - Display with Right-to-Left direction.
20 |   * **Validate Before Upload** - Fully-customizable validation.
21 |   * **Show Upload Progress** - See upload progress on almost all browsers.
22 |   * **Trigger Events** - Use events such as files selected, progess, finished, ect.
23 |   * **Dynamic Options** - Plugin options can be set any time, not only at initialization.
24 |   * **Cancel Upload** - Button for the user to abort.
25 |   * **Ability to Disable** - Disable user interaction.
26 |   * **Compress Images** - Resize image before upload, for a faster progress.
27 |   
28 | ## Compatibility
29 | 
30 | Full browsers compatibility list can be seen here: https://slashuploader.com#docs
31 |   
32 | ## Documentation
33 | 
34 | Full documentation can be seen here: https://slashuploader.com#docs
35 | 


--------------------------------------------------------------------------------
/SlashUploader/iframe_gateway.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 | <html>
 3 | 
 4 | <head>
 5 | 
 6 |     <script>
 7 | 
 8 |         function getQueryStringParams(queryStr) {
 9 | 
10 |             var str = "?";
11 |             var obj = {};
12 |             var queryArr = queryStr.split("&");
13 |             for (var i = 0; i < queryArr.length; i++) {
14 |                 var key = queryArr[i].split("=")[0];
15 |                 var val = queryArr[i].split("=")[1];
16 |                 if (key != null && key != "") {
17 |                     obj[key] = decodeURIComponent(val);
18 |                 }
19 |             }
20 |             return obj;
21 | 
22 |         }
23 | 
24 |         function getQuerystringParamValue(param) {
25 |             var queryStr = window.location.search.substring(1);
26 |             var queryArr = queryStr.split("&");
27 |             for (var i = 0; i < queryArr.length; i++) {
28 |                 var key = queryArr[i].split("=")[0];
29 |                 var val = queryArr[i].split("=")[1];
30 |                 if (key == param) {
31 |                     return val;
32 |                 }
33 |             }
34 |             return "";
35 |         }
36 | 
37 |         function iframeGateway() {
38 | 
39 |             var uploaderIndex = getQuerystringParamValue("request_id");
40 |             if (uploaderIndex != null && uploaderIndex != "") {
41 |                 var data = decodeURIComponent(getQuerystringParamValue("data"));
42 |                 try {
43 |                     //var obj = $.parseJSON(decodeURIComponent(decodeURIComponent(data.replace(/\+/g,  " "))));
44 |                     var obj = JSON.parse(decodeURIComponent(decodeURIComponent(data.replace(/\+/g, " "))));
45 |                     if (window.parent.parent.uploaerIframeGateway.objs[uploaderIndex] != null) {
46 |                         window.parent.parent.uploaerIframeGateway.uploaderIframeActionCompleted(uploaderIndex, obj);
47 |                     }
48 |                 } catch (e) {
49 |                     var errors = [];
50 |                     errors.push({ error: 'parse_failed' });
51 |                     if (window.parent.parent.uploaerIframeGateway.objs[uploaderIndex] != null) {
52 |                         window.parent.parent.uploaerIframeGateway.uploaderIframeActionCompleted(uploaderIndex, errors);
53 |                     }
54 |                     //instance._internalVariables.parseErrors(errors);
55 |                 }
56 |             }
57 | 
58 |         }
59 | 
60 |     </script>
61 | </head>
62 | 
63 | <body>
64 |     <script>
65 |         iframeGateway();
66 |     </script>
67 | </body>
68 | 
69 | </html>


--------------------------------------------------------------------------------
/demo/demo.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  4 | }
  5 | 
  6 | .uploader_field_container {
  7 |     background: #F7F7F7;
  8 |     border: 1px solid #CCC;
  9 |     border-radius: 2px;
 10 |     vertical-align: top;
 11 | }
 12 | 
 13 | .uploader_field {
 14 |     /*width: 450px;*/
 15 | }
 16 | 
 17 | #uploader_field3,
 18 | #uploader_field4 {
 19 |     height: 70px;
 20 | }
 21 | 
 22 | .uploader_status {
 23 |     vertical-align: top;
 24 |     font-size: 12px;
 25 | }
 26 | 
 27 | .custom_html {
 28 |     width: 120px;
 29 |     height: auto;
 30 |     border: 2px solid red;
 31 |     transition: all 0.5s;
 32 |     -webkit-transition: all 0.5s;
 33 | }
 34 | 
 35 | .custom_html.hover {
 36 |     background-color: tomato;
 37 | }
 38 | 
 39 | .custom_html.dragged_enter {
 40 |     border: 2px dashed red;
 41 |     background-color: white;
 42 | }
 43 | 
 44 | .custom_html.dragged_over {
 45 |     border: 2px dashed tomato;
 46 |     background-color: #ffcaca;
 47 | }
 48 | 
 49 | .custom_html.uploading {
 50 |     opacity: 0.5;
 51 | }
 52 | 
 53 | 
 54 | .custom_css .uploader_drop_area {
 55 |     border: 2px solid green;
 56 |     color: green;
 57 | }
 58 | 
 59 | .custom_css.hover .uploader_drop_area {
 60 |     background: #93c293;
 61 |     color: white;
 62 | }
 63 | 
 64 | .custom_css.dragged_enter .uploader_drop_area {
 65 |     background: #296d29;
 66 |     color: white;
 67 |     border: 2px dashed white;
 68 | }
 69 | 
 70 | .custom_css.dragged_over .uploader_drop_area {
 71 |     background: #0c510c;
 72 |     color: white;
 73 |     border: 2px dashed white;
 74 | }
 75 | 
 76 | .custom_css.uploading .uploader_text span {
 77 |     font-weight: bold;
 78 | }
 79 | 
 80 | .custom_css .uploader_drop_area_bottom {
 81 |     background: #97e497;
 82 | }
 83 | 
 84 | .custom_css .uploader_spinner {
 85 |     border: 2px solid green;
 86 |     border-right: 2px solid rgba(0, 255, 0, 0.25);
 87 |     border-bottom: 2px solid rgba(0, 255, 0, 0.25);
 88 |     border-left: 2px solid rgba(0, 255, 0, 0.25);
 89 | }
 90 | 
 91 | .custom_css .uploader_result_file a {
 92 |     color: green;
 93 | }
 94 | 
 95 | .custom_css .uploader_progress_container .uploader_progress_bar>div>div {
 96 |     background: green;
 97 | }
 98 | 
 99 | .demos_table {
100 |     width: 100%;
101 | }
102 | 
103 | .demos_table .uploader_title {
104 |     width: 160px;
105 | }
106 | 
107 | @media (max-width: 640px) {
108 |     .uploader_field {
109 |         /*width: 100%;*/
110 |     }
111 | 
112 |     .title_th {
113 |         width: 25px;
114 |     }
115 | 
116 |     .uploader_th,
117 |     .uploader_field_container {
118 |         max-width: 150px;
119 |     }
120 | 
121 |     .status_th {
122 |         width: 55px;
123 |     }
124 | 
125 |     .slash_uploader.uploading .uploader_drop_area .uploader_text .uploader_text_container,
126 |     .slash_uploader .uploader_drop_area .uploader_cancel span {
127 |         line-height: 14px;
128 |         font-size: 11px;
129 |     }
130 | }
131 | 
132 | @media (min-width: 1000px) {
133 | 
134 |     .uploader_field_container {
135 |         width: 500px;
136 |     }
137 | 
138 | }


--------------------------------------------------------------------------------
/demo/image_cropper/cropperjs-1.5.6/dist/cropper.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Cropper.js v1.5.6
3 |  * https://fengyuanchen.github.io/cropperjs
4 |  *
5 |  * Copyright 2015-present Chen Fengyuan
6 |  * Released under the MIT license
7 |  *
8 |  * Date: 2019-10-04T04:33:44.164Z
9 |  */.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-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}


--------------------------------------------------------------------------------
/demo/image_cropper/image_cropper.css:
--------------------------------------------------------------------------------
  1 | /* ==== Cropper ==== */
  2 | 
  3 | .cropper-modal {
  4 | 	opacity: 0.7 !important;
  5 | }
  6 | 
  7 | #cropper_popup {
  8 | 	width: 100%;
  9 | 	height: 100%;
 10 | 	position: fixed;
 11 | 	top: 0;
 12 | 	left: 0;
 13 | 	background-color: #737377;
 14 | 	z-index: 300;
 15 | 	display: none;
 16 | 	margin: auto;
 17 | 	text-align: center;
 18 | 	direction: ltr;
 19 | 	font-family: Arial, Helvetica, sans-serif;
 20 | }
 21 | 
 22 | #cropper_container {
 23 | 	width: 100%;
 24 | 	margin: auto;
 25 | }
 26 | 
 27 | #cropper_buttons {
 28 | 	position: absolute;
 29 | 	bottom: 0px;
 30 | 	left: 0;
 31 | 	right: 0;
 32 | 	margin-left: auto;
 33 | 	margin-right: auto;
 34 | 	padding-bottom: 20px;
 35 | }
 36 | 
 37 | .cropper-container.cropper-bg {
 38 | 	height: 100% !important;
 39 | }
 40 | 
 41 | #cropper_canvas {}
 42 | 
 43 | #cropper_loading {
 44 | 	/*width: 1px;*/
 45 | 	height: 1px;
 46 | 	margin: auto;
 47 | 	color: white;
 48 | }
 49 | 
 50 | #cropper_rotation_slider,
 51 | #cropper_degree_slider {
 52 | 	width: 700px;
 53 | }
 54 | 
 55 | #cropper_rotation_slider,
 56 | .cropper_slides_wrapper,
 57 | #cropper_degree_slider {
 58 | 	height: 34px;
 59 | }
 60 | 
 61 | #cropper_rotation_slider {
 62 | 	margin: 6px auto;
 63 | 	max-width: 100%;
 64 | 	z-index: 101;
 65 | 	padding-bottom: 10px;
 66 | }
 67 | 
 68 | .cropper_slides_wrapper {
 69 | 	overflow: hidden;
 70 | 	position: relative;
 71 | 	width: 100%;
 72 | 	z-index: 102;
 73 | 	-webkit-mask: linear-gradient(90deg, transparent 5%, #000 20%, #000 80%, transparent 95%);
 74 | }
 75 | 
 76 | .cropper_slides_wrapper:after {
 77 | 	content: "";
 78 | 	position: absolute;
 79 | 	z-index: -1;
 80 | 	top: 0;
 81 | 	bottom: 0;
 82 | 	left: 50%;
 83 | 	border-left: 1px solid white;
 84 | 	transform: translate(-50%);
 85 | }
 86 | 
 87 | #cropper_slides {
 88 | 	display: flex;
 89 | 	position: relative;
 90 | 	top: 0;
 91 | 	left: -900px;
 92 | 	width: 2200px;
 93 | }
 94 | 
 95 | #cropper_slides.shifting {
 96 | 	transition: left .2s ease-out;
 97 | }
 98 | 
 99 | #cropper_degree_slider {
100 | 	cursor: grab;
101 | 	display: flex;
102 | 	flex-direction: column;
103 | 	justify-content: center;
104 | 	transition: all 1s;
105 | 	position: relative;
106 | 	border-radius: 2px;
107 | 	width: 2200px;
108 | 	opacity: 0.7;
109 | 	background-image: url("degree_slider.png");
110 | 	background-repeat: no-repeat;
111 | }
112 | 
113 | .dragging #cropper_degree_slider {
114 | 	cursor: grabbing;
115 | }
116 | 
117 | #cropper_buttons .cropper_btn {
118 | 	font-size: 15px;
119 | 	color: white;
120 | 	cursor: pointer;
121 | 	padding-top: 8px;
122 | 	padding-bottom: 8px;
123 | 	padding-right: 8px;
124 | 	padding-left: 8px;
125 | 	display: inline-block;
126 | 	vertical-align: middle;
127 | 	transition: all .25s;
128 | 	-webkit-touch-callout: none;
129 | 	/* iOS Safari */
130 | 	-webkit-user-select: none;
131 | 	/* Safari */
132 | 	-khtml-user-select: none;
133 | 	/* Konqueror HTML */
134 | 	-moz-user-select: none;
135 | 	/* Firefox */
136 | 	-ms-user-select: none;
137 | 	/* Internet Explorer/Edge */
138 | 	user-select: none;
139 | 	/* Non-prefixed version, currently
140 | 								supported by Chrome and Opera */
141 | }
142 | 
143 | /* Non-Touch device */
144 | @media (hover: hover) {
145 | 	#cropper_buttons .cropper_btn:hover {
146 | 		background: rgba(255, 255, 255, 0.3);
147 | 	}
148 | }
149 | 
150 | /* Touch device */
151 | @media (hover: none) {
152 | 	#cropper_buttons .cropper_btn:active {
153 | 		background: rgba(255, 255, 255, 0.3);
154 | 	}
155 | 
156 | 	#cropper_buttons .cropper_btn_flip_horizontal,
157 | 	#cropper_buttons .cropper_btn_flip_vertical {
158 | 		display: none;
159 | 	}
160 | 
161 | }
162 | 
163 | #cropper_buttons .cropper_btn span {
164 | 	background: url(icons.png);
165 | 	height: 20px;
166 | 	width: 25px;
167 | 	display: inline-block;
168 | 	position: relative;
169 | 	top: -1px;
170 | 	margin-right: 4px;
171 | 	vertical-align: middle;
172 | }
173 | 
174 | #cropper_buttons .cropper_btn_resize_enlarge span {
175 | 	background-position: -72px 0px;
176 | }
177 | 
178 | #cropper_buttons .cropper_btn_resize_reduce span {
179 | 	background-position: -48px 0px;
180 | }
181 | 
182 | #cropper_buttons .cropper_btn_flip_horizontal span {
183 | 	background-position: -24px 0px;
184 | }
185 | 
186 | #cropper_buttons .cropper_btn_flip_vertical span {
187 | 	background-position: 0px 0px;
188 | }
189 | 
190 | #cropper_buttons .cropper_btn_crop span {
191 | 	background-position: -96px 0px;
192 | }
193 | 
194 | #cropper_buttons .cropper_btn_reset span {
195 | 	background-position: -120px 0px;
196 | }
197 | 
198 | #cropper_buttons .cropper_btn_cancel span {
199 | 	background-position: -144px 0px;
200 | }
201 | 
202 | #cropper_buttons .cropper_btn_sep_2 {
203 | 	height: 20px;
204 | 	width: 30px;
205 | 	display: inline-block;
206 | }
207 | 
208 | @media screen and (max-width: 820px) {
209 | 	#cropper_buttons .cropper_btn_sep_1 {
210 | 		display: block;
211 | 	}
212 | 
213 | 	#cropper_buttons .cropper_btn_sep_2 {
214 | 		display: block;
215 | 		height: 0px;
216 | 	}
217 | }


--------------------------------------------------------------------------------
/demo/image_cropper/cropperjs-1.5.6/dist/cropper.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Cropper.js v1.5.6
  3 |  * https://fengyuanchen.github.io/cropperjs
  4 |  *
  5 |  * Copyright 2015-present Chen Fengyuan
  6 |  * Released under the MIT license
  7 |  *
  8 |  * Date: 2019-10-04T04:33:44.164Z
  9 |  */
 10 | 
 11 | .cropper-container {
 12 |   direction: ltr;
 13 |   font-size: 0;
 14 |   line-height: 0;
 15 |   position: relative;
 16 |   -ms-touch-action: none;
 17 |   touch-action: none;
 18 |   -webkit-user-select: none;
 19 |   -moz-user-select: none;
 20 |   -ms-user-select: none;
 21 |   user-select: none;
 22 | }
 23 | 
 24 | .cropper-container img {
 25 |   display: block;
 26 |   height: 100%;
 27 |   image-orientation: 0deg;
 28 |   max-height: none !important;
 29 |   max-width: none !important;
 30 |   min-height: 0 !important;
 31 |   min-width: 0 !important;
 32 |   width: 100%;
 33 | }
 34 | 
 35 | .cropper-wrap-box,
 36 | .cropper-canvas,
 37 | .cropper-drag-box,
 38 | .cropper-crop-box,
 39 | .cropper-modal {
 40 |   bottom: 0;
 41 |   left: 0;
 42 |   position: absolute;
 43 |   right: 0;
 44 |   top: 0;
 45 | }
 46 | 
 47 | .cropper-wrap-box,
 48 | .cropper-canvas {
 49 |   overflow: hidden;
 50 | }
 51 | 
 52 | .cropper-drag-box {
 53 |   background-color: #fff;
 54 |   opacity: 0;
 55 | }
 56 | 
 57 | .cropper-modal {
 58 |   background-color: #000;
 59 |   opacity: 0.5;
 60 | }
 61 | 
 62 | .cropper-view-box {
 63 |   display: block;
 64 |   height: 100%;
 65 |   outline: 1px solid #39f;
 66 |   outline-color: rgba(51, 153, 255, 0.75);
 67 |   overflow: hidden;
 68 |   width: 100%;
 69 | }
 70 | 
 71 | .cropper-dashed {
 72 |   border: 0 dashed #eee;
 73 |   display: block;
 74 |   opacity: 0.5;
 75 |   position: absolute;
 76 | }
 77 | 
 78 | .cropper-dashed.dashed-h {
 79 |   border-bottom-width: 1px;
 80 |   border-top-width: 1px;
 81 |   height: calc(100% / 3);
 82 |   left: 0;
 83 |   top: calc(100% / 3);
 84 |   width: 100%;
 85 | }
 86 | 
 87 | .cropper-dashed.dashed-v {
 88 |   border-left-width: 1px;
 89 |   border-right-width: 1px;
 90 |   height: 100%;
 91 |   left: calc(100% / 3);
 92 |   top: 0;
 93 |   width: calc(100% / 3);
 94 | }
 95 | 
 96 | .cropper-center {
 97 |   display: block;
 98 |   height: 0;
 99 |   left: 50%;
100 |   opacity: 0.75;
101 |   position: absolute;
102 |   top: 50%;
103 |   width: 0;
104 | }
105 | 
106 | .cropper-center::before,
107 | .cropper-center::after {
108 |   background-color: #eee;
109 |   content: ' ';
110 |   display: block;
111 |   position: absolute;
112 | }
113 | 
114 | .cropper-center::before {
115 |   height: 1px;
116 |   left: -3px;
117 |   top: 0;
118 |   width: 7px;
119 | }
120 | 
121 | .cropper-center::after {
122 |   height: 7px;
123 |   left: 0;
124 |   top: -3px;
125 |   width: 1px;
126 | }
127 | 
128 | .cropper-face,
129 | .cropper-line,
130 | .cropper-point {
131 |   display: block;
132 |   height: 100%;
133 |   opacity: 0.1;
134 |   position: absolute;
135 |   width: 100%;
136 | }
137 | 
138 | .cropper-face {
139 |   background-color: #fff;
140 |   left: 0;
141 |   top: 0;
142 | }
143 | 
144 | .cropper-line {
145 |   background-color: #39f;
146 | }
147 | 
148 | .cropper-line.line-e {
149 |   cursor: ew-resize;
150 |   right: -3px;
151 |   top: 0;
152 |   width: 5px;
153 | }
154 | 
155 | .cropper-line.line-n {
156 |   cursor: ns-resize;
157 |   height: 5px;
158 |   left: 0;
159 |   top: -3px;
160 | }
161 | 
162 | .cropper-line.line-w {
163 |   cursor: ew-resize;
164 |   left: -3px;
165 |   top: 0;
166 |   width: 5px;
167 | }
168 | 
169 | .cropper-line.line-s {
170 |   bottom: -3px;
171 |   cursor: ns-resize;
172 |   height: 5px;
173 |   left: 0;
174 | }
175 | 
176 | .cropper-point {
177 |   background-color: #39f;
178 |   height: 5px;
179 |   opacity: 0.75;
180 |   width: 5px;
181 | }
182 | 
183 | .cropper-point.point-e {
184 |   cursor: ew-resize;
185 |   margin-top: -3px;
186 |   right: -3px;
187 |   top: 50%;
188 | }
189 | 
190 | .cropper-point.point-n {
191 |   cursor: ns-resize;
192 |   left: 50%;
193 |   margin-left: -3px;
194 |   top: -3px;
195 | }
196 | 
197 | .cropper-point.point-w {
198 |   cursor: ew-resize;
199 |   left: -3px;
200 |   margin-top: -3px;
201 |   top: 50%;
202 | }
203 | 
204 | .cropper-point.point-s {
205 |   bottom: -3px;
206 |   cursor: s-resize;
207 |   left: 50%;
208 |   margin-left: -3px;
209 | }
210 | 
211 | .cropper-point.point-ne {
212 |   cursor: nesw-resize;
213 |   right: -3px;
214 |   top: -3px;
215 | }
216 | 
217 | .cropper-point.point-nw {
218 |   cursor: nwse-resize;
219 |   left: -3px;
220 |   top: -3px;
221 | }
222 | 
223 | .cropper-point.point-sw {
224 |   bottom: -3px;
225 |   cursor: nesw-resize;
226 |   left: -3px;
227 | }
228 | 
229 | .cropper-point.point-se {
230 |   bottom: -3px;
231 |   cursor: nwse-resize;
232 |   height: 20px;
233 |   opacity: 1;
234 |   right: -3px;
235 |   width: 20px;
236 | }
237 | 
238 | @media (min-width: 768px) {
239 |   .cropper-point.point-se {
240 |     height: 15px;
241 |     width: 15px;
242 |   }
243 | }
244 | 
245 | @media (min-width: 992px) {
246 |   .cropper-point.point-se {
247 |     height: 10px;
248 |     width: 10px;
249 |   }
250 | }
251 | 
252 | @media (min-width: 1200px) {
253 |   .cropper-point.point-se {
254 |     height: 5px;
255 |     opacity: 0.75;
256 |     width: 5px;
257 |   }
258 | }
259 | 
260 | .cropper-point.point-se::before {
261 |   background-color: #39f;
262 |   bottom: -50%;
263 |   content: ' ';
264 |   display: block;
265 |   height: 200%;
266 |   opacity: 0;
267 |   position: absolute;
268 |   right: -50%;
269 |   width: 200%;
270 | }
271 | 
272 | .cropper-invisible {
273 |   opacity: 0;
274 | }
275 | 
276 | .cropper-bg {
277 |   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
278 | }
279 | 
280 | .cropper-hide {
281 |   display: block;
282 |   height: 0;
283 |   position: absolute;
284 |   width: 0;
285 | }
286 | 
287 | .cropper-hidden {
288 |   display: none !important;
289 | }
290 | 
291 | .cropper-move {
292 |   cursor: move;
293 | }
294 | 
295 | .cropper-crop {
296 |   cursor: crosshair;
297 | }
298 | 
299 | .cropper-disabled .cropper-drag-box,
300 | .cropper-disabled .cropper-face,
301 | .cropper-disabled .cropper-line,
302 | .cropper-disabled .cropper-point {
303 |   cursor: not-allowed;
304 | }
305 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html
  2 | 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 | <html xmlns="http://www.w3.org/1999/xhtml">
  4 | 
  5 | <head>
  6 | 
  7 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8 | 	<meta name="viewport"
  9 | 		content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1,user-scalable=0">
 10 | 
 11 | 	<title>SlashUploader Demos</title>
 12 | 
 13 | 
 14 | 	<script src="../SlashUploader/SlashUploader.min.js"></script>
 15 | 	<link rel="stylesheet" href="../SlashUploader/SlashUploader.min.css" type="text/css" />
 16 | 
 17 | 
 18 | 	<script src="demo.js"></script>
 19 | 	<link rel="stylesheet" href="demo.css">
 20 | 
 21 | 	<!--[if gte IE 9]><!-->
 22 | 	<!-- start manual cropper includes -->
 23 | 	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 24 | 	<link rel='stylesheet' type='text/css' media='screen' href='image_cropper/cropperjs-1.5.6/dist/cropper.min.css'>
 25 | 	<script src='image_cropper/cropperjs-1.5.6/dist/cropper.min.js'></script>
 26 | 	<script src="image_cropper/image_cropper.js"></script>
 27 | 	<link rel="stylesheet" href="image_cropper/image_cropper.css">
 28 | 	<!-- end manual cropper includes -->
 29 | 	<!--<![endif]-->
 30 | 
 31 | </head>
 32 | 
 33 | <body onload="init();">
 34 | 
 35 | 	<form>
 36 | 		<table class="demos_table" cellpadding='6'>
 37 | 			<tr>
 38 | 				<th class="title_th">
 39 | 				</th>
 40 | 				<th class="uploader_th">
 41 | 				</th>
 42 | 				<th class="status_th">
 43 | 				</th>
 44 | 			</tr>
 45 | 			<tr>
 46 | 				<td class="uploader_title">
 47 | 					Default
 48 | 				</td>
 49 | 				<td class="uploader_field_container">
 50 | 					<div id="uploader_default" class="uploader_field">
 51 | 					</div>
 52 | 				</td>
 53 | 				<td class="uploader_status">
 54 | 				</td>
 55 | 			</tr>
 56 | 			<tr>
 57 | 				<td class="uploader_title">
 58 | 					Single File
 59 | 				</td>
 60 | 				<td class="uploader_field_container">
 61 | 					<div id="uploader_single_file" class="uploader_field">
 62 | 					</div>
 63 | 				</td>
 64 | 				<td class="uploader_status">
 65 | 				</td>
 66 | 			</tr>
 67 | 			<tr>
 68 | 				<td class="uploader_title">
 69 | 					Without metadata
 70 | 				</td>
 71 | 				<td class="uploader_field_container">
 72 | 					<div id="uploader_no_metadata" class="uploader_field">
 73 | 					</div>
 74 | 				</td>
 75 | 				<td class="uploader_status">
 76 | 				</td>
 77 | 			</tr>
 78 | 			<tr>
 79 | 				<td class="uploader_title">
 80 | 					Disabled
 81 | 				</td>
 82 | 				<td class="uploader_field_container">
 83 | 					<div id="uploader_disabled" class="uploader_field">
 84 | 					</div>
 85 | 				</td>
 86 | 				<td class="uploader_status">
 87 | 				</td>
 88 | 			</tr>
 89 | 			<tr>
 90 | 				<td class="uploader_title">
 91 | 					Pre-defined files
 92 | 				</td>
 93 | 				<td class="uploader_field_container">
 94 | 					<div id="uploader_pre_defined_files" class="uploader_field">
 95 | 					</div>
 96 | 				</td>
 97 | 				<td class="uploader_status">
 98 | 				</td>
 99 | 			</tr>
100 | 			<tr>
101 | 				<td class="uploader_title">
102 | 					Progress bar animation
103 | 				</td>
104 | 				<td class="uploader_field_container">
105 | 					<div id="uploader_progress_bar" class="uploader_field">
106 | 					</div>
107 | 				</td>
108 | 				<td class="uploader_status">
109 | 				</td>
110 | 			</tr>
111 | 			<tr>
112 | 				<td class="uploader_title">
113 | 					RTL
114 | 				</td>
115 | 				<td class="uploader_field_container">
116 | 					<div id="uploader_rtl" class="uploader_field">
117 | 					</div>
118 | 				</td>
119 | 				<td class="uploader_status">
120 | 				</td>
121 | 			</tr>
122 | 			<tr>
123 | 				<td class="uploader_title">
124 | 					Drag & Drop disabled
125 | 				</td>
126 | 				<td class="uploader_field_container">
127 | 					<div id="uploader_no_drag_drop" class="uploader_field">
128 | 					</div>
129 | 				</td>
130 | 				<td class="uploader_status">
131 | 				</td>
132 | 			</tr>
133 | 			<tr>
134 | 				<td class="uploader_title">
135 | 					Cancel & Delete disabled
136 | 				</td>
137 | 				<td class="uploader_field_container">
138 | 					<div id="uploader_no_cancel_delete" class="uploader_field">
139 | 					</div>
140 | 				</td>
141 | 				<td class="uploader_status">
142 | 				</td>
143 | 			</tr>
144 | 			<tr>
145 | 				<td class="uploader_title">
146 | 					Don't show uploaded files
147 | 				</td>
148 | 				<td class="uploader_field_container">
149 | 					<div id="uploader_no_results" class="uploader_field">
150 | 					</div>
151 | 				</td>
152 | 				<td class="uploader_status">
153 | 				</td>
154 | 			</tr>
155 | 			<tr>
156 | 				<td class="uploader_title">
157 | 					Cross-Domain Script
158 | 				</td>
159 | 				<td class="uploader_field_container">
160 | 					<div id="uploader_field_cross_domain" class="uploader_field">
161 | 					</div>
162 | 				</td>
163 | 				<td class="uploader_status">
164 | 					<div></div>
165 | 				</td>
166 | 			</tr>
167 | 			<tr>
168 | 				<td class="uploader_title">
169 | 					Validations
170 | 				</td>
171 | 				<td class="uploader_field_container">
172 | 					<div id="uploader_field_validations" class="uploader_field">
173 | 					</div>
174 | 				</td>
175 | 				<td class="uploader_status">
176 | 					<div></div>
177 | 				</td>
178 | 			</tr>
179 | 			<tr>
180 | 				<td class="uploader_title">
181 | 					No overwrite
182 | 				</td>
183 | 				<td class="uploader_field_container">
184 | 					<div id="uploader_no_overwrite" class="uploader_field">
185 | 					</div>
186 | 				</td>
187 | 				<td class="uploader_status">
188 | 					<div></div>
189 | 				</td>
190 | 			</tr>
191 | 			<tr>
192 | 				<td class="uploader_title">
193 | 					Auto crop
194 | 				</td>
195 | 				<td class="uploader_field_container">
196 | 					<div id="uploader_with_auto_crop" class="uploader_field">
197 | 					</div>
198 | 				</td>
199 | 				<td class="uploader_status">
200 | 					<div></div>
201 | 				</td>
202 | 			</tr>
203 | 			<tr>
204 | 				<td class="uploader_title">
205 | 					Manual crop
206 | 				</td>
207 | 				<td class="uploader_field_container">
208 | 					<div id="uploader_with_manual_crop" class="uploader_field">
209 | 					</div>
210 | 				</td>
211 | 				<td class="uploader_status">
212 | 					<div></div>
213 | 				</td>
214 | 			</tr>
215 | 			<tr>
216 | 				<td class="uploader_title">
217 | 					Group upload result
218 | 				</td>
219 | 				<td class="uploader_field_container">
220 | 					<div id="uploader_group" class="uploader_field">
221 | 					</div>
222 | 				</td>
223 | 				<td class="uploader_status">
224 | 					<div></div>
225 | 				</td>
226 | 			</tr>
227 | 			<tr>
228 | 				<td class="uploader_title">
229 | 					Custom CSS
230 | 				</td>
231 | 				<td class="uploader_field_container">
232 | 					<div id="uploader_custom_css" class="uploader_field custom_css">
233 | 					</div>
234 | 				</td>
235 | 				<td class="uploader_status">
236 | 					<div></div>
237 | 				</td>
238 | 			</tr>
239 | 			<tr>
240 | 				<td class="uploader_title">
241 | 					Custom button
242 | 				</td>
243 | 				<td class="uploader_field_container">
244 | 					<div id="uploader_field_custom_button" class="custom_html">
245 | 						<div class="btn" style="padding: 20px;">
246 | 							Upload it!
247 | 						</div>
248 | 					</div>
249 | 					<a href='javascript: uploaderCustomHTML.cancelUpload(); void (0);'>Cancel</a>
250 | 				</td>
251 | 				<td class="uploader_status">
252 | 				</td>
253 | 			</tr>
254 | 
255 | 
256 | 
257 | 		</table>
258 | 	</form>
259 | 
260 | </body>
261 | 
262 | </html>


--------------------------------------------------------------------------------
/SlashUploader/SlashUploader.min.css:
--------------------------------------------------------------------------------
1 | /*
2 |  * SlashUploader - JS plugin - Version 1.5.9
3 |  * http://slashuploader.com/
4 |  * Copyright (c) 2018-present Slash Apps Development, http://slash.co.il/
5 |  * Licensed under the MIT License [https://en.wikipedia.org/wiki/MIT_License]
6 |  */
7 | 
8 |  .slash_uploader_form{width:0;height:0;margin:0;padding:0;display:none}.slash_uploader .uploader_container{margin:0;padding:0;display:inline;font-family:Arial,Helvetica,sans-serif;font-size:13px}.slash_uploader:not(.rtl){direction:ltr}.slash_uploader .uploader_container .uploader_div{min-height:30px;width:100%;border-collapse:separate}.slash_uploader.loading_bar .uploader_container .uploader_div{height:calc(100% - 25px)}.slash_uploader .uploader_div .uploader_drop_area_wrapper{width:50%;position:relative;float:left;overflow:hidden}.slash_uploader.rtl .uploader_drop_area_wrapper{float:right}.slash_uploader .uploader_drop_area{border:1px solid #09F;color:#0080D6;position:absolute;overflow:hidden;display:block;text-align:center;border-radius:4px;z-index:4;display:table;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.slash_uploader .uploader_drop_area .uploader_text{display:table-cell;vertical-align:middle}.slash_uploader .uploader_drop_area .uploader_text .uploader_text_container{overflow:hidden}.slash_uploader.rtl .uploader_drop_area .uploader_text{direction:rtl}.slash_uploader.uploading .uploader_drop_area .uploader_text .uploader_text_container,.slash_uploader .uploader_drop_area .uploader_cancel span{background:#fff;display:inline;padding:3px;line-height:21px;box-shadow:3px 0 0 white,-3px 0 0 #fff}.slash_uploader .uploader_drop_area .uploader_cancel{position:absolute;bottom:5px;right:5px;z-index:2;display:none}.slash_uploader.rtl .uploader_drop_area .uploader_cancel{right:auto;left:5px;direction:rtl}.slash_uploader .uploader_drop_area .uploader_cancel span{color:red;font-size:12px;line-height:14px;cursor:pointer}.slash_uploader .uploader_drop_area_bottom,.slash_uploader .uploader_drop_area_bottom_bg,.slash_uploader .uploader_drop_area_middle{position:absolute;border-radius:4px;overflow:hidden;vertical-align:middle}.slash_uploader .uploader_drop_area_bottom{border-bottom-right-radius:0;border-top-right-radius:0}.slash_uploader.rtl .uploader_drop_area_bottom{border-bottom-right-radius:4px;border-top-right-radius:4px;border-bottom-left-radius:0;border-top-left-radius:0}.slash_uploader[data-file-progress='99'] .uploader_drop_area_bottom,.slash_uploader[data-file-progress='100'] .uploader_drop_area_bottom{border-bottom-right-radius:4px;border-top-right-radius:4px;border-bottom-left-radius:4px;border-top-left-radius:4px}.slash_uploader .uploader_drop_area_bottom,.slash_uploader .uploader_drop_area_bottom_bg,.slash_uploader .uploader_drop_area_middle,.slash_uploader .uploader_drop_area{height:100%;width:100%;top:0;bottom:0;left:0;right:0}.slash_uploader .uploader_drop_area_bottom_bg{background:#FFF;z-index:1}.slash_uploader .uploader_drop_area_bottom{background:#E5F5FF;z-index:2}.slash_uploader.rtl .uploader_drop_area_bottom{left:auto;direction:rtl}.slash_uploader .uploader_drop_area_middle{z-index:3}.slash_uploader .uploader_drop_area_bottom img,.slash_uploader .uploader_drop_area_middle img{filter:blur(1px);-webkit-filter:blur(.8px);-moz-filter:blur(.8px);-o-filter:blur(.8px);-ms-filter:blur(.8px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');position:relative;left:-1px;top:50%;transform:translateY(-50%)}.slash_uploader .uploader_drop_area_bottom img{opacity:.65}.slash_uploader .uploader_drop_area_middle img{opacity:.15}.slash_uploader:not(.hover):not(.dragged_over) .uploader_drop_area{-webkit-transition:background-color 0.3s ease;transition:background-color 0.3s ease}.slash_uploader.hover .uploader_drop_area{background:#E5F5FF;padding:0 0 0 0}.slash_uploader.dragged_over .uploader_drop_area{background:#E5F5FF;border:2px dashed #09F;padding:0 0 0 0}.slash_uploader.dragged_enter .uploader_drop_area{background:#FFF;border:2px dashed #09F;padding:0 0 0 0}.slash_uploader.show_focus_rect.focused .uploader_drop_area_wrapper{outline-width:1px;outline-style:solid;outline-color:Highlight}.slash_uploader .uploader_drop_area .uploader_spinner{top:4px;left:-3px}.slash_uploader.rtl .uploader_drop_area .uploader_spinner{left:3px}.slash_uploader .uploader_drop_area .input_wrapper{width:100%;height:100%;overflow:hidden;position:absolute;left:0;direction:ltr!important}.slash_uploader .uploader_drop_area input,.slash_uploader .uploader_drop_area_custom input{position:absolute;left:0;top:0;font-family:Arial;margin:0;padding:0;cursor:pointer;height:40px;width:200px;font-size:0;opacity:0;filter:alpha(opacity=0);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.slash_uploader .uploader_drop_area_custom{overflow:hidden;width:100%;height:100%;position:absolute;top:0;left:0}.slash_uploader.disabled{cursor:default;opacity:.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)}.slash_uploader .uploader_progress_container{padding-top:5px;height:20px;float:left;width:100%;overflow:hidden}.slash_uploader .uploader_progress_container>table{width:100%;border-spacing:0;border-collapse:collapse;border:none}.slash_uploader.rtl .uploader_progress_container table{direction:rtl}.slash_uploader .uploader_progress_container .uploader_progress_bar{width:auto}.slash_uploader .uploader_progress_container .uploader_progress_bar>div{width:100%;height:12px;border:1px solid #000;padding:1px 1px 1px 1px}.slash_uploader .uploader_progress_container .uploader_progress_bar>div>div{background:#09F;height:100%;width:100%}.slash_uploader .uploader_progress_bar_padding{width:10px}.slash_uploader .uploader_progress_bar_loading_padding{width:3px}.slash_uploader .uploader_progress_bar_loading{width:20px}.slash_uploader .uploader_progress_bar_text{width:1%;white-space:nowrap;max-width:60%;overflow:hidden}.slash_uploader.rtl .uploader_progress_bar_text{text-align:right}.slash_uploader .uploader_progress_container .uploader_progress_bar div div{width:0%}@-ms-keyframes spin{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.slash_uploader .uploader_spinner{position:relative;left:0;top:0;width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid #09F;border-right:2px solid rgba(0,153,255,.25);border-bottom:2px solid rgba(0,153,255,.25);border-left:2px solid rgba(0,153,255,.25);-webkit-animation:spin 1s ease infinite;-moz-animation:spin 1s ease infinite;animation:spin 1s ease infinite}.slash_uploader .uploader_progress_bar_loading .uploader_spinner{display:block}.slash_uploader .uploader_result_wrapper{padding-right:6px;padding-left:6px;overflow:hidden;vertical-align:bottom;word-break:break-word;width:calc(50% - 12px);float:left;min-height:100%;display:table;text-align:left}.slash_uploader.rtl .uploader_result_wrapper{float:right;text-align:right}.slash_uploader .uploader_result{height:100%;display:table-cell;vertical-align:bottom}.slash_uploader .uploader_result.error{color:red;word-break:break-word}.slash_uploader.rtl .uploader_result.error{text-align:right;direction:rtl}.slash_uploader .uploader_delete_btn div{position:relative;top:2px;border:none;width:16px;height:16px;display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeUlEQVQ4jdWSUQoDIQxEX4oX2IP1Skrmwj1C+qPgrutSl360D8RJMGEStIjgiKQhmXO2Y87MICJ2x93jjJrfvQUwdx8tfEgpxVK1t1wsCYDUB7e4mntG2wfAY2btSvcMDVb54wZtJz84Qv8rZ/qrDlK9N0mvhbpnE2+HaoSqJnzSpgAAAABJRU5ErkJggg==)}.slash_uploader .uploader_result_file{min-width:40px;word-break:break-all}.slash_uploader .uploader_result_file a{color:#09F}.slash_uploader.rtl .uploader_result_file{direction:rtl}.slash_uploader.disabled .uploader_delete_btn,.slash_uploader.disabled .uploader_delete_btn div,.slash_uploader.disabled .uploader_delete_btn a{cursor:default!important}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.slash_uploader.disabled .uploader_drop_area_bottom_bg{display:none}}@media \0screen{.slash_uploader .uploader_drop_area input{width:200px!important}.slash_uploader .uploader_drop_area input,.slash_uploader .uploader_drop_area_custom input{border:none;outline:none;outline-style:none}.slash_uploader .uploader_drop_area input,.slash_uploader .uploader_drop_area_custom input{font-size:240px}.slash_uploader .uploader_result_wrapper{height:96%}.slash_uploader.disabled .uploader_drop_area_wrapper,.slash_uploader.disabled .uploader_drop_area,.slash_uploader.disabled .uploader_text{filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)}.slash_uploader.loading_bar .uploader_container .uploader_div{height:80%}.slash_uploader .uploader_progress_container{padding-top:0}.slash_uploader .uploader_progress_bar_loading,.slash_uploader .uploader_progress_bar_loading_padding{display:none}.slash_uploader .uploader_spinner{display:none}.slash_uploader .uploader_result_wrapper{word-break:normal;width:45%}.slash_uploader .uploader_result.error{word-break:normal}}@media screen and (min-width:0) and (min-resolution:.001dpcm){.slash_uploader .uploader_drop_area input,.slash_uploader .uploader_drop_area_custom input{font-size:240px\9}.slash_uploader .uploader_progress_bar_loading,.slash_uploader .uploader_progress_bar_loading_padding{display:none\9}.slash_uploader .uploader_spinner{display:none\9}.slash_uploader .uploader_result_wrapper{width:45%\9}.slash_uploader .uploader_drop_area,.slash_uploader .uploader_drop_area_bottom_bg{width:99%\9}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.slash_uploader .uploader_drop_area input,.slash_uploader .uploader_drop_area_custom input{font-size:240px}.slash_uploader .uploader_drop_area,.slash_uploader .uploader_drop_area_bottom_bg{width:99%}*::-ms-backdrop,.slash_uploader .uploader_drop_area{width:100%}*::-ms-backdrop,.slash_uploader .uploader_drop_area_bottom_bg{width:100%}}@media (max-width:640px){.slash_uploader[data-show-uploaded-files='default'] .uploader_drop_area_wrapper{width:100%!important}.slash_uploader[data-show-uploaded-files='default'] .uploader_result_wrapper{height:auto!important;width:calc(100% - 25px);display:block}.slash_uploader[data-show-uploaded-files='default'] .uploader_result{display:inline}.slash_uploader[data-show-uploaded-files='default'] .uploader_result_file:first-child{padding-top:5px}.slash_uploader[data-show-uploaded-files='default'] .uploader_progress_bar_padding{width:4px}.slash_uploader .uploader_drop_area .uploader_spinner{width:12px;height:12px;top:4px}.uploader_progress_bar_text{font-size:14px}}.slash_uploader[data-show-uploaded-files='below'] .uploader_drop_area_wrapper{width:100%!important}.slash_uploader[data-show-uploaded-files='below'] .uploader_result_wrapper{height:auto!important;width:calc(100% - 25px);display:block}.slash_uploader[data-show-uploaded-files='below'] .uploader_result{display:inline}.slash_uploader[data-show-uploaded-files='below'] .uploader_result_file:first-child{padding-top:5px}.slash_uploader[data-show-uploaded-files='below'] .uploader_progress_bar_padding{width:4px}


--------------------------------------------------------------------------------
/demo/image_cropper/image_cropper.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var ImageCropper = {
  3 | 
  4 |     rotateSliderTotalWidth: 2200,
  5 | 
  6 |     rotateSliderBlankPixelsWidth: 200,
  7 | 
  8 |     pagesFadeSpeed: 300,
  9 | 
 10 |     isMobile: (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))),
 11 | 
 12 |     addCropperPopupHtmlToDom: function () {
 13 | 
 14 |         if (document.getElementById('cropper_popup') == null) {
 15 | 
 16 |             var cropPopupHtml = '\
 17 | 			<div id="cropper_popup">\
 18 | 				<div id="cropper_container">\
 19 | 					<canvas id="cropper_canvas" style="opacity: 0;">\
 20 | 						Your browser does not support the HTML5 canvas element.\
 21 | 					</canvas>\
 22 | 					<div id="cropper_loading">\
 23 | 						<div id="cropper_loading">Loading...</div>\
 24 | 					</div>\
 25 | 				</div>\
 26 | 				<div id="cropper_buttons">\
 27 | 					<div id="cropper_rotation_slider">\
 28 | 						<div class="cropper_slides_wrapper">\
 29 | 							<div id="cropper_slides">\
 30 | 								<span id="cropper_degree_slider"></span>\
 31 | 							</div>\
 32 | 						</div>\
 33 | 					</div>\
 34 | 					<span class="cropper_btn cropper_btn_resize_enlarge"><span></span>Enlarge</span>\
 35 | 					<span class="cropper_btn cropper_btn_resize_reduce"><span></span>Reduce</span>\
 36 | 					<span class="cropper_btn_sep_1"></span>\
 37 | 					<span class="cropper_btn cropper_btn_flip_horizontal"><span></span>Flip Horizontal</span>\
 38 | 					<span class="cropper_btn cropper_btn_flip_vertical"><span></span>Flip Vertical</span>\
 39 | 					<span class="cropper_btn_sep_2"></span>\
 40 | 					<span class="cropper_btn cropper_btn_crop"><span></span>Save</span>\
 41 | 					<span class="cropper_btn cropper_btn_reset"><span></span>Reset</span>\
 42 | 					<span class="cropper_btn cropper_btn_cancel"><span></span>Cancel</span>\
 43 | 				</div>\
 44 | 			</div>';
 45 |             $("body").append(cropPopupHtml);
 46 | 
 47 |             setTimeout(function () {
 48 |                 var slideWidth = (ImageCropper.rotateSliderTotalWidth - ImageCropper.rotateSliderBlankPixelsWidth * 2) / 2;
 49 |                 document.getElementById('cropper_slides').style.left = Math.floor((document.getElementById('cropper_rotation_slider').offsetWidth / 2 - ImageCropper.rotateSliderBlankPixelsWidth) - slideWidth) + "px";
 50 |             }, 1);
 51 | 
 52 |         }
 53 | 
 54 |     },
 55 | 
 56 |     startCropImages: function (files, openerUploader, cropSizeRatio, onCompleted) {
 57 | 
 58 |         ImageCropper.addCropperPopupHtmlToDom();
 59 |         $("#cropper_popup").fadeIn(ImageCropper.pagesFadeSpeed, function () {
 60 |             ImageCropper.cropCurrentImage(files, 0, openerUploader, cropSizeRatio, function () {
 61 |                 $("#cropper_popup").fadeOut(ImageCropper.pagesFadeSpeed, function () {
 62 |                     onCompleted();
 63 |                     $("#cropper_popup").remove();
 64 |                 });
 65 |             });
 66 |         });
 67 | 
 68 |     },
 69 | 
 70 |     cropCurrentImage: function (selectedFiles, fileIndex, openerUploader, cropSizeRatio, onCompleted) {
 71 | 
 72 |         var curFileData = selectedFiles[fileIndex];
 73 |         var curFile = selectedFiles[fileIndex].file;
 74 |         if (curFile.type.match(/^image\//)) {
 75 | 
 76 |             document.getElementById('cropper_loading').style.display = "block";
 77 |             document.getElementById('cropper_canvas').style.opacity = "0";
 78 |             document.getElementById('cropper_canvas').style.height = "150px";
 79 |             document.getElementById("cropper_container").style.height = (window.innerHeight - 135) + "px";
 80 | 
 81 |             var initAngle = 0;
 82 |             if (!isNaN(curFileData.rotation) && curFileData.rotation > 0) {
 83 |                 initAngle = curFileData.rotation;
 84 |                 if (initAngle > 180) {
 85 |                     initAngle -= 360;
 86 |                 } else if (initAngle < -180) {
 87 |                     initAngle += 360;
 88 |                 }
 89 |             }
 90 | 
 91 |             var reader = new FileReader();
 92 |             reader.onload = function (evt) {
 93 |                 var img = new Image();
 94 |                 img.onload = function () {
 95 |                     document.getElementById('cropper_loading').style.display = "none";
 96 |                     var canvas = document.getElementById('cropper_canvas');
 97 |                     context = canvas.getContext("2d");
 98 |                     context.canvas.height = img.height;
 99 |                     context.canvas.width = img.width;
100 |                     context.clearRect(0, 0, canvas.width, canvas.height);
101 |                     context.drawImage(img, 0, 0);
102 |                     cropper = new Cropper(canvas, {
103 |                         aspectRatio: cropSizeRatio,
104 |                         //viewMode: ImageCropper.isMobile ? 0 : 2,
105 |                         viewMode: 0,
106 |                         dragMode: "move",
107 |                         ready: function () {
108 |                             this.cropper.setData({ "rotate": Math.floor(initAngle) });
109 |                         },
110 |                         crop: function (event) {
111 |                             var fileObj = selectedFiles[fileIndex];
112 |                             fileObj.crop_x = Math.round(event.detail.x);
113 |                             fileObj.crop_y = Math.round(event.detail.y);
114 |                             fileObj.crop_width = Math.round(event.detail.width);
115 |                             fileObj.crop_height = Math.round(event.detail.height);
116 |                             fileObj.crop_rotate = Math.round(event.detail.rotate);
117 |                             fileObj.crop_scaleX = event.detail.scaleX;
118 |                             fileObj.crop_scaleY = event.detail.scaleY;
119 |                         }
120 |                     });
121 |                     ImageCropper.rotateSlider(cropper, initAngle);
122 |                     setTimeout(function () {
123 |                         document.getElementById("cropper_container").style.height = "100%";
124 |                     }, 1);
125 |                 };
126 |                 img.src = evt.target.result;
127 | 
128 |                 var cropButton = document.querySelector("#cropper_popup .cropper_btn_crop");
129 |                 cropButton.onclick = function () {
130 |                     cropper.destroy();
131 |                     var canvas = document.getElementById('cropper_canvas');
132 |                     context = canvas.getContext("2d");
133 |                     context.clearRect(0, 0, canvas.width, canvas.height);
134 |                     if (fileIndex < selectedFiles.length - 1) {
135 |                         ImageCropper.cropCurrentImage(selectedFiles, fileIndex + 1, openerUploader, cropSizeRatio, onCompleted);
136 |                     } else {
137 |                         onCompleted();
138 |                     }
139 |                 };
140 | 
141 |                 var resizeEnlargeBtn = document.querySelector("#cropper_popup .cropper_btn_resize_enlarge");
142 |                 resizeEnlargeBtn.onclick = function () {
143 |                     cropper.zoom(0.1);
144 |                 };
145 |                 var resizeReduceBtn = document.querySelector("#cropper_popup .cropper_btn_resize_reduce");
146 |                 resizeReduceBtn.onclick = function () {
147 |                     cropper.zoom(-0.1);
148 |                 };
149 |                 var flipHorizontalBtn = document.querySelector("#cropper_popup .cropper_btn_flip_horizontal");
150 |                 flipHorizontalBtn.onclick = function () {
151 |                     cropper.scaleX((cropper.getData().scaleX == -1) ? 1 : -1);
152 |                 };
153 |                 var flipVerticalBtn = document.querySelector("#cropper_popup .cropper_btn_flip_vertical");
154 |                 flipVerticalBtn.onclick = function () {
155 |                     cropper.scaleY((cropper.getData().scaleY == -1) ? 1 : -1);
156 |                 };
157 | 
158 |                 var cancelBtn = document.querySelector("#cropper_popup .cropper_btn_cancel");
159 |                 cancelBtn.onclick = function () {
160 |                     $("#cropper_popup").fadeOut(ImageCropper.pagesFadeSpeed, function () {
161 |                         cropper.destroy();
162 |                         openerUploader.cancelUpload();
163 |                         $("#cropper_popup").remove();
164 |                     });
165 |                 };
166 | 
167 |                 var resetBtn = document.querySelector("#cropper_popup .cropper_btn_reset");
168 |                 resetBtn.onclick = function () {
169 |                     cropper.reset();
170 |                     ImageCropper.setRotateSliderAngle(cropper, initAngle);
171 |                 };
172 | 
173 |             };
174 |             reader.readAsDataURL(curFile);
175 | 
176 | 
177 |         } else {
178 | 
179 |             if (fileIndex < selectedFiles.length - 1) {
180 |                 ImageCropper.cropCurrentImage(selectedFiles, fileIndex + 1, openerUploader, cropSizeRatio, onCompleted);
181 |             } else {
182 |                 onCompleted();
183 |             }
184 | 
185 |         }
186 | 
187 |     },
188 | 
189 |     setRotateSliderAngle: function (cropper, angle) {
190 |         var slider = document.getElementById('cropper_rotation_slider');
191 |         var items = document.getElementById('cropper_slides');
192 |         var slideWidth = (ImageCropper.rotateSliderTotalWidth - ImageCropper.rotateSliderBlankPixelsWidth * 2) / 2;
193 |         items.style.left = Math.floor((angle / -180) * slideWidth + (slider.offsetWidth / 2 - ImageCropper.rotateSliderBlankPixelsWidth) - slideWidth) + "px";
194 |         cropper.setData({ "rotate": Math.floor(angle) });
195 |     },
196 | 
197 |     rotateSlider: function (cropper, initAngle) {
198 | 
199 |         var slider = document.getElementById('cropper_rotation_slider'),
200 |             sliderItems = document.getElementById('cropper_slides');
201 | 
202 | 
203 |         function slide(items) {
204 | 
205 |             var posX1 = 0,
206 |                 posX2 = 0;
207 | 
208 |             ImageCropper.setRotateSliderAngle(cropper, initAngle);
209 | 
210 |             // Mouse events
211 |             items.onmousedown = dragStart;
212 | 
213 |             // Touch events
214 |             /*
215 |             items.addEventListener('touchstart', dragStart);
216 |             items.addEventListener('touchend', dragEnd);
217 |             items.addEventListener('touchmove', dragAction);
218 |             */
219 |             items.ontouchstart = dragStart;
220 |             items.ontouchend = dragEnd;
221 |             items.ontouchmove = dragAction;
222 | 
223 |             function dragStart(e) {
224 |                 e = e || window.event;
225 |                 e.preventDefault();
226 |                 posInitial = items.offsetLeft;
227 |                 items.className = "dragging";
228 | 
229 |                 if (e.type == 'touchstart') {
230 |                     posX1 = e.touches[0].clientX;
231 |                 } else {
232 |                     posX1 = e.clientX;
233 |                     document.onmouseup = dragEnd;
234 |                     document.onmousemove = dragAction;
235 |                 }
236 |             }
237 | 
238 |             function dragAction(e) {
239 |                 e = e || window.event;
240 | 
241 |                 if (e.type == 'touchmove') {
242 |                     posX2 = posX1 - e.touches[0].clientX;
243 |                     posX1 = e.touches[0].clientX;
244 |                 } else {
245 |                     posX2 = posX1 - e.clientX;
246 |                     posX1 = e.clientX;
247 |                 }
248 | 
249 |                 var sliderLeftPosition = (items.offsetLeft - posX2);
250 |                 var slideWidth = (ImageCropper.rotateSliderTotalWidth - ImageCropper.rotateSliderBlankPixelsWidth * 2) / 2;
251 |                 var degree = (sliderLeftPosition - (slider.offsetWidth / 2 - ImageCropper.rotateSliderBlankPixelsWidth) + slideWidth) / slideWidth * -180;
252 |                 if (degree >= -180 && degree <= 180) {
253 |                     items.style.left = (sliderLeftPosition) + "px";
254 |                     cropper.setData({ "rotate": Math.round(degree) });
255 |                 }
256 |             }
257 | 
258 |             function dragEnd(e) {
259 |                 items.className = "";
260 |                 posFinal = items.offsetLeft;
261 |                 document.onmouseup = null;
262 |                 document.onmousemove = null;
263 |             }
264 | 
265 |         }
266 | 
267 |         slide(sliderItems);
268 |     }
269 | 
270 | };


--------------------------------------------------------------------------------
/SlashUploader/SlashUploader.src.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * SlashUploader - JS plugin - Version 1.5.9
  3 |  * http://slashuploader.com/
  4 |  * Copyright (c) 2018-present Slash Apps Development, http://slash.co.il/
  5 |  * Licensed under the MIT License [https://en.wikipedia.org/wiki/MIT_License]
  6 |  */
  7 | 
  8 | .slash_uploader_form {
  9 | 	width: 0; height: 0;
 10 | 	margin: 0; padding: 0; display: none;
 11 | }
 12 | .slash_uploader .uploader_container {
 13 | 	margin: 0; padding: 0; display: inline;
 14 | 	font-family: Arial, Helvetica, sans-serif; font-size: 13px;
 15 | }
 16 | .slash_uploader:not(.rtl) {
 17 | 	direction: ltr;
 18 | }
 19 | .slash_uploader .uploader_container .uploader_div {
 20 | 	min-height: 30px;
 21 | 	width: 100%;
 22 | 	/*height: 100%;*/
 23 | 	border-collapse: separate;
 24 | }
 25 | .slash_uploader.loading_bar .uploader_container .uploader_div {
 26 | 	height: calc(100% - 25px);
 27 | }
 28 | .slash_uploader .uploader_div .uploader_drop_area_wrapper {
 29 | 	width: 50%;
 30 | 	/*height: 100%;*/
 31 | 	position: relative;
 32 | 	float: left;
 33 | 	overflow: hidden;
 34 | }
 35 | .slash_uploader.rtl .uploader_drop_area_wrapper {
 36 | 	float: right;
 37 | }
 38 | .slash_uploader .uploader_drop_area {
 39 | 	border: 1px solid #09F;
 40 | 	color: #0080D6;
 41 | 	position: absolute;
 42 | 	overflow: hidden;
 43 | 	display: block;
 44 | 	text-align: center;
 45 | 	border-radius: 4px;
 46 | 	z-index: 4;
 47 | 	display: table;
 48 | 	box-sizing: border-box;
 49 |     -moz-box-sizing: border-box;
 50 |     -webkit-box-sizing: border-box;
 51 | }
 52 | .slash_uploader .uploader_drop_area .uploader_text {
 53 | 	display: table-cell;
 54 | 	vertical-align: middle;
 55 | }
 56 | .slash_uploader .uploader_drop_area .uploader_text .uploader_text_container {
 57 | 	overflow: hidden;
 58 | }
 59 | .slash_uploader.rtl .uploader_drop_area .uploader_text {
 60 | 	direction: rtl;
 61 | }
 62 | .slash_uploader.uploading .uploader_drop_area .uploader_text .uploader_text_container,
 63 | .slash_uploader .uploader_drop_area .uploader_cancel span {
 64 | 	background: white;
 65 | 	display: inline;
 66 | 	padding: 3px;
 67 | 	line-height: 21px;
 68 | 	box-shadow: 3px 0 0 white, -3px 0 0 white;
 69 | 	/*box-decoration-break: clone;*/
 70 | }
 71 | .slash_uploader .uploader_drop_area .uploader_cancel {
 72 | 	position: absolute;
 73 | 	bottom: 5px; right: 5px;
 74 | 	z-index: 2;
 75 | 	display: none;
 76 | }
 77 | .slash_uploader.rtl .uploader_drop_area .uploader_cancel {
 78 | 	right: auto; left: 5px;
 79 | 	direction: rtl;
 80 | }
 81 | .slash_uploader .uploader_drop_area .uploader_cancel span {
 82 | 	color: red;
 83 | 	font-size: 12px;
 84 | 	line-height: 14px;
 85 | 	cursor: pointer;
 86 | }
 87 | .slash_uploader .uploader_drop_area_bottom,
 88 | .slash_uploader .uploader_drop_area_bottom_bg, 
 89 | .slash_uploader .uploader_drop_area_middle {
 90 | 	position: absolute;
 91 | 	border-radius: 4px;
 92 | 	overflow: hidden;
 93 | 	vertical-align: middle;
 94 | }
 95 | .slash_uploader .uploader_drop_area_bottom {
 96 | 	border-bottom-right-radius: 0px;
 97 | 	border-top-right-radius: 0px;
 98 | }
 99 | .slash_uploader.rtl .uploader_drop_area_bottom {
100 | 	border-bottom-right-radius: 4px;
101 | 	border-top-right-radius: 4px;
102 | 	border-bottom-left-radius: 0px;
103 | 	border-top-left-radius: 0px;
104 | }
105 | .slash_uploader[data-file-progress='99'] .uploader_drop_area_bottom,
106 | .slash_uploader[data-file-progress='100'] .uploader_drop_area_bottom
107 | {
108 | 	border-bottom-right-radius: 4px;
109 | 	border-top-right-radius: 4px;
110 | 	border-bottom-left-radius: 4px;
111 | 	border-top-left-radius: 4px;
112 | }
113 | 
114 | .slash_uploader .uploader_drop_area_bottom,
115 | .slash_uploader .uploader_drop_area_bottom_bg,
116 | .slash_uploader .uploader_drop_area_middle,
117 | .slash_uploader .uploader_drop_area {
118 | 	height: 100%;
119 | 	width: 100%;
120 |     top: 0;
121 |     bottom: 0;
122 |     left: 0;
123 |     right: 0;
124 | }
125 | .slash_uploader .uploader_drop_area_bottom_bg {
126 | 	background: #FFF;
127 | 	z-index: 1;
128 | }
129 | .slash_uploader .uploader_drop_area_bottom {
130 | 	background: #E5F5FF;
131 | 	z-index: 2;
132 | }
133 | .slash_uploader.rtl .uploader_drop_area_bottom {
134 | 	left: auto;
135 | 	direction: rtl;
136 | }
137 | .slash_uploader .uploader_drop_area_middle {
138 | 	z-index: 3;
139 | }
140 | .slash_uploader .uploader_drop_area_bottom img,
141 | .slash_uploader .uploader_drop_area_middle img {
142 | 	filter: blur(1px);
143 | 	-webkit-filter: blur(0.8px);
144 | 	-moz-filter: blur(0.8px); 
145 | 	-o-filter: blur(0.8px); 
146 | 	-ms-filter: blur(0.8px); 
147 | 	/*filter: url(#blur);*/ /* Removed - causes problems on Firefox, Chrome, ect. */
148 | 	filter:progid: DXImageTransform.Microsoft.Blur(PixelRadius='1');
149 | 	position: relative;
150 | 	left: -1px;
151 | 	top: 50%;
152 | 	transform: translateY(-50%);
153 | }
154 | .slash_uploader .uploader_drop_area_bottom img {
155 | 	opacity: 0.65;
156 | }
157 | .slash_uploader .uploader_drop_area_middle img {
158 | 	opacity: 0.15;
159 | }
160 | .slash_uploader:not(.hover):not(.dragged_over) .uploader_drop_area {
161 | 	-webkit-transition: background-color 0.3s ease;
162 | 	transition: background-color 0.3s ease;
163 | }
164 | .slash_uploader.hover .uploader_drop_area {
165 | 	background: #E5F5FF;
166 |     padding: 0px 0px 0px 0px;
167 | }
168 | .slash_uploader.dragged_over .uploader_drop_area {
169 | 	background: #E5F5FF;
170 | 	border: 2px dashed #09F;
171 |     padding: 0px 0px 0px 0px;
172 | }
173 | .slash_uploader.dragged_enter .uploader_drop_area {
174 | 	background: #FFFFFF;
175 | 	border: 2px dashed #09F;
176 |     padding: 0px 0px 0px 0px;
177 | }
178 | .slash_uploader.show_focus_rect.focused .uploader_drop_area_wrapper {
179 | 	outline-width: 1px;
180 | 	outline-style: solid;
181 | 	outline-color: Highlight;
182 | }
183 | .slash_uploader .uploader_drop_area .uploader_spinner {
184 | 	top: 4px; left: -3px;
185 | }
186 | .slash_uploader.rtl .uploader_drop_area .uploader_spinner {
187 | 	left: 3px;
188 | }
189 | .slash_uploader .uploader_drop_area .input_wrapper {
190 | 	width: 100%; height: 100%;
191 | 	overflow: hidden;
192 | 	position: absolute;
193 | 	left: 0;
194 | 	direction: ltr !important;
195 | }
196 | /*
197 | .slash_uploader .uploader_drop_area input {
198 | 	position: absolute; right: 0px; top: 0px;
199 | 	font-family: Arial;
200 | 	margin: 0; padding: 0;
201 | 	font-size: 240px;
202 | 	height: 6000px;
203 | 	cursor: pointer;
204 | 	opacity: 0;
205 | 	filter: alpha(opacity = 0);
206 | 	direction: ltr !important;
207 | 	width: auto !important;
208 | }
209 | */
210 | .slash_uploader .uploader_drop_area input,
211 | .slash_uploader .uploader_drop_area_custom input {
212 | 	position: absolute; left: 0px; top: 0px;
213 | 	font-family: Arial;
214 | 	margin: 0; padding: 0;
215 | 	cursor: pointer;
216 | 	/*height: 100px;*/
217 | 	height: 40px;
218 | 	width: 200px;
219 | 	font-size: 0;
220 | 	opacity: 0;
221 | 	filter: alpha(opacity=0);
222 | 	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
223 | 	-webkit-touch-callout: none;
224 | 	-webkit-user-select: none;
225 | 	-khtml-user-select: none;
226 | 	-moz-user-select: none;
227 | 	-ms-user-select: none;
228 | 	user-select: none;
229 | 	-webkit-tap-highlight-color: transparent;
230 | 	-webkit-touch-callout: none;
231 | }
232 | 
233 | .slash_uploader .uploader_drop_area_custom {
234 | 	overflow: hidden;
235 | 	width: 100%;
236 | 	height: 100%;
237 | 	position: absolute;
238 | 	top: 0;
239 | 	left: 0;
240 | }
241 | 
242 | .slash_uploader.disabled {
243 | 	cursor: default;
244 | 	opacity: 0.5;
245 | 	filter: alpha(opacity = 50);
246 | 	filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50);
247 | }
248 | 
249 | /*
250 | 
251 | 	Progress Bar
252 | 
253 | */
254 | .slash_uploader .uploader_progress_container {
255 | 	padding-top: 5px;
256 | 	height: 20px;
257 | 	float: left;
258 | 	width: 100%;
259 | 	overflow: hidden;
260 | }
261 | .slash_uploader .uploader_progress_container>table {
262 | 	width: 100%;
263 | 	border-spacing: 0; border-collapse: collapse; border: none;
264 | }
265 | .slash_uploader.rtl .uploader_progress_container table {
266 | 	direction: rtl;
267 | }
268 | .slash_uploader .uploader_progress_container .uploader_progress_bar {
269 | 	width: auto;
270 | }
271 | .slash_uploader .uploader_progress_container .uploader_progress_bar>div {
272 | 	width: 100%; height: 12px; border: 1px solid black;
273 | 	padding: 1px 1px 1px 1px;
274 | }
275 | .slash_uploader .uploader_progress_container .uploader_progress_bar>div>div {
276 | 	background: #09F; height: 100%;
277 | 	width: 100%; 
278 | }
279 | .slash_uploader .uploader_progress_bar_padding {
280 | 	width: 10px;
281 | }
282 | .slash_uploader .uploader_progress_bar_loading_padding {
283 | 	width: 3px;
284 | }
285 | .slash_uploader .uploader_progress_bar_loading {
286 | 	width: 20px;
287 | }
288 | .slash_uploader .uploader_progress_bar_text {
289 | 	width: 1%;
290 |     white-space: nowrap;
291 |     /*max-width: 250px;*/
292 |     max-width: 60%;
293 |     overflow: hidden;
294 | }
295 | .slash_uploader.rtl .uploader_progress_bar_text {
296 | 	text-align: right;
297 | }
298 | .slash_uploader .uploader_progress_container .uploader_progress_bar div div {
299 | 	width: 0%;
300 | }
301 | /*
302 | 
303 | 	Spiner animation
304 | 
305 | */
306 | @-ms-keyframes spin {
307 |     from { -ms-transform: rotate(0deg); }
308 |     to { -ms-transform: rotate(360deg); }
309 | }
310 | @-moz-keyframes spin {
311 |     from { -moz-transform: rotate(0deg); }
312 |     to { -moz-transform: rotate(360deg); }
313 | }
314 | @-webkit-keyframes spin {
315 |     from { -webkit-transform: rotate(0deg); }
316 |     to { -webkit-transform: rotate(360deg); }
317 | }
318 | @keyframes spin {
319 |     from {
320 |         transform:rotate(0deg);
321 |     }
322 |     to {
323 |         transform:rotate(360deg);
324 |     }
325 | }
326 | .slash_uploader .uploader_spinner {
327 |     position: relative;
328 |     left: 0px;
329 |     top: 0px;
330 |     width: 14px;
331 |     height: 14px;
332 |     border-radius:50%;
333 |     display:inline-block;
334 |     border: 2px solid #09F;
335 |     border-right: 2px solid rgba(0, 153, 255, 0.25);
336 |     border-bottom: 2px solid rgba(0, 153, 255, 0.25);
337 |     border-left: 2px solid rgba(0, 153, 255, 0.25);
338 |     -webkit-animation: spin 1s ease infinite;
339 |     -moz-animation: spin 1s ease infinite;
340 |     animation: spin 1s ease infinite;
341 | }
342 | .slash_uploader .uploader_progress_bar_loading .uploader_spinner {
343 | 	display: block;
344 | }
345 | /*
346 | 
347 | 	Upload results
348 | 
349 | */
350 | .slash_uploader .uploader_result_wrapper {
351 | 	padding-right: 6px;
352 | 	padding-left: 6px;
353 | 	overflow: hidden; vertical-align: bottom;
354 | 	word-break: break-word;
355 | 	/*width: calc(50% - 25px);*/
356 | 	width: calc(50% - 12px);
357 | 	float: left;
358 | 	min-height: 100%;
359 | 	display: table;
360 | 	text-align: left;
361 | }
362 | .slash_uploader.rtl .uploader_result_wrapper {
363 | 	float: right;
364 | 	text-align: right;
365 | }
366 | .slash_uploader .uploader_result {
367 | 	height: 100%;
368 | 	display: table-cell;
369 | 	vertical-align: bottom;
370 | }
371 | .slash_uploader .uploader_result.error {
372 | 	color: red;
373 | 	/*word-break: normal;*/
374 | 	word-break: break-word;
375 | }
376 | .slash_uploader.rtl .uploader_result.error {
377 | 	text-align: right;
378 | 	direction: rtl;
379 | }
380 | .slash_uploader .uploader_delete_btn div {
381 | 	position: relative;
382 | 	top: 2px;
383 | 	border: none;
384 | 	width: 16px; height: 16px;
385 | 	display: inline-block;
386 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeUlEQVQ4jdWSUQoDIQxEX4oX2IP1Skrmwj1C+qPgrutSl360D8RJMGEStIjgiKQhmXO2Y87MICJ2x93jjJrfvQUwdx8tfEgpxVK1t1wsCYDUB7e4mntG2wfAY2btSvcMDVb54wZtJz84Qv8rZ/qrDlK9N0mvhbpnE2+HaoSqJnzSpgAAAABJRU5ErkJggg==);
387 | }
388 | .slash_uploader .uploader_result_file {
389 | 	min-width: 40px;
390 | 	word-break: break-all;
391 | }
392 | .slash_uploader .uploader_result_file a {
393 | 	color: #09F;
394 | }
395 | .slash_uploader.rtl .uploader_result_file {
396 | 	direction: rtl;
397 | }
398 | .slash_uploader.disabled .uploader_delete_btn,
399 | .slash_uploader.disabled .uploader_delete_btn div,
400 | .slash_uploader.disabled .uploader_delete_btn a {
401 | 	cursor: default !important;
402 | }
403 | /*
404 | 
405 | 	IE @media
406 | 
407 | */
408 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE only */
409 | 	.slash_uploader.disabled .uploader_drop_area_bottom_bg {
410 | 		display: none;
411 | 	}
412 | }
413 | @media \0screen { /* IE8 only */
414 |     .slash_uploader .uploader_drop_area input {
415 | 		width: 200px !important;
416 |     }
417 |     .slash_uploader .uploader_drop_area input,
418 |     .slash_uploader .uploader_drop_area_custom input {
419 | 	    border: none;
420 | 	    outline: none;
421 | 	    outline-style: none;
422 | 	}
423 | 	.slash_uploader .uploader_drop_area input,
424 | 	.slash_uploader .uploader_drop_area_custom input {
425 | 		font-size: 240px;
426 | 	}
427 |     .slash_uploader .uploader_result_wrapper {
428 |     	height: 96%;
429 |     }
430 | 	.slash_uploader.disabled .uploader_drop_area_wrapper,
431 | 	.slash_uploader.disabled .uploader_drop_area,
432 | 	.slash_uploader.disabled .uploader_text
433 | 	{
434 | 		filter: alpha(opacity = 50);
435 | 		filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50);
436 | 	}
437 | 	.slash_uploader.loading_bar .uploader_container .uploader_div {
438 | 		height: 80%;
439 | 	}
440 | 	.slash_uploader .uploader_progress_container {
441 | 		padding-top: 0;
442 | 	}
443 | 	.slash_uploader .uploader_progress_bar_loading,
444 | 	.slash_uploader .uploader_progress_bar_loading_padding {
445 | 		display: none;
446 | 	}
447 | 	.slash_uploader .uploader_spinner {
448 | 		display: none;
449 | 	}
450 | 	.slash_uploader .uploader_result_wrapper {
451 | 		word-break: normal;
452 | 		width: 45%;
453 | 	}
454 | 	.slash_uploader .uploader_result.error {
455 | 		word-break: normal;
456 | 	}
457 | 
458 | }
459 | @media screen and (min-width:0) and (min-resolution: .001dpcm) { /* IE9 Only */
460 | 	.slash_uploader .uploader_drop_area input,
461 | 	.slash_uploader .uploader_drop_area_custom input {
462 | 		font-size: 240px\9;
463 | 	}
464 | 	.slash_uploader .uploader_progress_bar_loading,
465 | 	.slash_uploader .uploader_progress_bar_loading_padding {
466 | 		display: none\9;
467 | 	}
468 | 	.slash_uploader .uploader_spinner {
469 | 		display: none\9;
470 | 	}
471 | 	.slash_uploader .uploader_result_wrapper {
472 | 		width: 45%\9;
473 | 	}
474 | 	.slash_uploader .uploader_drop_area,
475 | 	.slash_uploader .uploader_drop_area_bottom_bg
476 | 	{
477 | 		width: 99%\9;
478 | 	}
479 | }
480 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10 + IE11 only */
481 | 	.slash_uploader .uploader_drop_area input,
482 | 	.slash_uploader .uploader_drop_area_custom input {
483 | 		font-size: 240px;
484 | 	}
485 | 	.slash_uploader .uploader_drop_area,
486 | 	.slash_uploader .uploader_drop_area_bottom_bg
487 | 	{
488 | 		width: 99%;
489 | 	}
490 | 	*::-ms-backdrop, .slash_uploader .uploader_drop_area { /* IE11 */
491 | 		width: 100%;
492 | 	}
493 | 	*::-ms-backdrop, .slash_uploader .uploader_drop_area_bottom_bg { /* IE11 */
494 | 		width: 100%;
495 | 	}
496 | }
497 | 
498 | @media (max-width: 640px) {
499 | 	.slash_uploader[data-show-uploaded-files='default'] .uploader_drop_area_wrapper {
500 | 		width: 100% !important;
501 | 	}
502 | 	.slash_uploader[data-show-uploaded-files='default'] .uploader_result_wrapper {
503 | 		height: auto !important;
504 | 		width: calc(100% - 25px);
505 | 		display: block;
506 | 	}
507 | 	.slash_uploader[data-show-uploaded-files='default'] .uploader_result {
508 | 		display: inline;
509 | 	}
510 | 	.slash_uploader[data-show-uploaded-files='default'] .uploader_result_file:first-child {
511 | 		padding-top: 5px;
512 | 	}
513 | 	.slash_uploader[data-show-uploaded-files='default'] .uploader_progress_bar_padding {
514 | 		width: 4px;
515 | 	}
516 | 	.slash_uploader .uploader_drop_area .uploader_spinner {
517 | 		width: 12px;
518 | 		height: 12px;
519 | 		top: 4px;
520 | 	}
521 | 	.uploader_progress_bar_text {
522 | 		font-size: 14px;
523 | 	}
524 | }
525 | /* default / below / beside */
526 | 
527 | .slash_uploader[data-show-uploaded-files='below'] .uploader_drop_area_wrapper {
528 | 	width: 100% !important;
529 | }
530 | .slash_uploader[data-show-uploaded-files='below'] .uploader_result_wrapper {
531 | 	height: auto !important;
532 | 	width: calc(100% - 25px);
533 | 	display: block;
534 | }
535 | .slash_uploader[data-show-uploaded-files='below'] .uploader_result {
536 | 	display: inline;
537 | }
538 | .slash_uploader[data-show-uploaded-files='below'] .uploader_result_file:first-child {
539 | 	padding-top: 5px;
540 | }
541 | .slash_uploader[data-show-uploaded-files='below'] .uploader_progress_bar_padding {
542 | 	width: 4px;
543 | }
544 | 


--------------------------------------------------------------------------------
/demo/demo.js:
--------------------------------------------------------------------------------
  1 | var uploaderDefault;
  2 | var uploaderSingleFile;
  3 | var uploaderNoMetadata;
  4 | var uploaderDisabled;
  5 | var uploaderPreDefinedFiles;
  6 | var uploaderProgressBar;
  7 | var uploaderRtl;
  8 | var uploaderNoDragDrop;
  9 | var uploaderNoCancelDelete;
 10 | var uploaderNoResults;
 11 | var uploaderCrossDomain;
 12 | var uploaderWithValidations;
 13 | var uploaderNoOverwrite;
 14 | var uploaderWithAutoCrop;
 15 | var uploaderWithManualCrop;
 16 | var uploaderGroupResults;
 17 | var uploaderCustomCss;
 18 | var uploaderCustomHTML;
 19 | 
 20 | var iframeGateway = "../SlashUploader/iframe_gateway.html";
 21 | 
 22 | var crossDomainScripts = {
 23 |     uploadChunk: "//slashuploader.com/src/js/SlashUploader/server/UploadFiles.aspx?upload_method=upload_chunk&file_name={{file_name}}&chunk_index={{chunk_index}}&total_chunks={{total_chunks}}&request_id={{request_id}}&rotation={{rotation}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}",
 24 |     uploadStream: "//slashuploader.com/src/js/SlashUploader/server/UploadFiles.aspx?upload_method=upload_stream&rotation={{rotation}}&file_name={{file_name}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}",
 25 |     uploadThroughIframe: "//slashuploader.com/src/js/SlashUploader/server/UploadFiles.aspx?upload_method=upload_through_iframe&rotation={{rotation}}&request_id={{request_id}}&iframe_gateway={{iframe_gateway}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}"
 26 | };
 27 | 
 28 | var sameDomainScripts = {
 29 |     uploadChunk: "../SlashUploader/server/UploadFiles.aspx?upload_method=upload_chunk&file_name={{file_name}}&chunk_index={{chunk_index}}&total_chunks={{total_chunks}}&request_id={{request_id}}&rotation={{rotation}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}",
 30 |     uploadStream: "../SlashUploader/server/UploadFiles.aspx?upload_method=upload_stream&rotation={{rotation}}&file_name={{file_name}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}",
 31 |     uploadThroughIframe: "../SlashUploader/server/UploadFiles.aspx?upload_method=upload_through_iframe&rotation={{rotation}}&request_id={{request_id}}&iframe_gateway={{iframe_gateway}}&file_size={{size}}&file_rotation={{rotation}}&file_duration={{duration}}&file_w={{width}}&file_h={{height}}&file_ext={{extension}}"
 32 | };
 33 | 
 34 | 
 35 | 
 36 | 
 37 | function init() {
 38 |     setTimeout(function () {
 39 |         buildUploaders();
 40 |     }, 10);
 41 | }
 42 | 
 43 | if (typeof console == "undefined") console = { // Prevent old browsers error
 44 |     log: function () { },
 45 |     debug: function () { },
 46 |     error: function () { },
 47 |     warn: function () { }
 48 | };
 49 | 
 50 | function buildUploaders() {
 51 | 
 52 |     var onFilesSelected = function (files) {
 53 |         console.log("onFilesSelected", files);
 54 |         var str = "<u>Files selected:</u><br>";
 55 |         for (var i = 0; i < files.length; i++) {
 56 |             str += files[i].name + "; " + files[i].width + "x" + files[i].height + "<br>";
 57 |         }
 58 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
 59 |         responseElement.innerHTML = str;
 60 |     };
 61 | 
 62 |     var onFilesUploaded = function (files) {
 63 |         console.log("onFilesUploaded", files);
 64 |         var str = "<u>Files uploaded:</u><br>";
 65 |         for (var i = 0; i < files.length; i++) {
 66 |             str += files[i].file_name + "<br>";
 67 |         }
 68 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
 69 |         responseElement.innerHTML = str;
 70 |     };
 71 | 
 72 |     var onFileDeleted = function (deletedFile, files) {
 73 |         console.log("onFileDeleted", deletedFile, files);
 74 |         var str = "<u>deleted:</u> ";
 75 |         str += deletedFile.file_name + "<br>";
 76 |         str += "<u>Files remaining:</u><br>";
 77 |         for (var i = 0; i < files.length; i++) {
 78 |             str += files[i].file_name + "<br>";
 79 |         }
 80 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
 81 |         responseElement.innerHTML = str;
 82 |     }
 83 | 
 84 |     var onFilesProgress = function (curUploadingFileProgress, curUploadingFileIndex, totalFilesToUpload) {
 85 |         var str = Math.floor(curUploadingFileProgress * 100) + "% (" + curUploadingFileIndex + "/" + totalFilesToUpload + ")";
 86 |         console.log("onFilesProgress", str);
 87 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
 88 |         responseElement.innerHTML = str;
 89 |     };
 90 | 
 91 |     var onCanceled = function () {
 92 |         var str = "Canceled";
 93 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
 94 |         responseElement.innerHTML = str;
 95 |     };
 96 | 
 97 |     var onError = function (errors) {
 98 |         console.log("onError", errors);
 99 |         var str = "<u>Error with files:</u><br>";
100 |         for (var i = 0; i < errors.length; i++) {
101 |             if (errors[i].file != null) {
102 |                 str += errors[i].file.name + "<br>";
103 |             }
104 |         }
105 |         var responseElement = this.elements.containerElement.parentNode.parentNode.querySelector(".uploader_status");
106 |         responseElement.innerHTML = str;
107 |     };
108 | 
109 | 
110 |     uploaderDefault = new SlashUploader(document.getElementById("uploader_default"), {
111 |         iframeGateway: iframeGateway,
112 |         serverScripts: sameDomainScripts
113 |     });
114 | 
115 |     uploaderSingleFile = new SlashUploader(document.getElementById("uploader_single_file"), {
116 |         onFilesSelected: onFilesSelected,
117 |         onFilesUploaded: onFilesUploaded,
118 |         onFilesProgress: onFilesProgress,
119 |         onFileDeleted: onFileDeleted,
120 |         onCanceled: onCanceled,
121 |         onError: onError,
122 |         showFocusRect: true,
123 |         iframeGateway: iframeGateway,
124 |         serverScripts: sameDomainScripts
125 |     });
126 |     uploaderSingleFile.dropFilesText = "Drop file here";
127 |     uploaderSingleFile.browseText = "Drop file here or click to upload";
128 |     uploaderSingleFile.maxFiles = 1;
129 | 
130 | 
131 |     uploaderNoMetadata = new SlashUploader(document.getElementById("uploader_no_metadata"), {
132 |         onFilesSelected: onFilesSelected,
133 |         onFilesUploaded: onFilesUploaded,
134 |         onFilesProgress: onFilesProgress,
135 |         onFileDeleted: onFileDeleted,
136 |         onCanceled: onCanceled,
137 |         onError: onError,
138 |         iframeGateway: iframeGateway,
139 |         serverScripts: sameDomainScripts
140 |     });
141 |     uploaderNoMetadata.doGetFileMetadata = false;
142 | 
143 |     uploaderDisabled = new SlashUploader(document.getElementById("uploader_disabled"), {
144 |         iframeGateway: iframeGateway,
145 |         serverScripts: sameDomainScripts
146 |     });
147 |     uploaderDisabled.uploadedFiles = [
148 |         { file_name: "2015-08-13(2).jpg", file_path: "//mydomain.com/uploads/2015-08-13(2).jpg" },
149 |         { file_name: "test.png", file_path: "//mydomain.com/uploads/test.png" }
150 |     ];
151 |     uploaderDisabled.disabled = true;
152 |     uploaderDisabled.onFilesUploaded = function (files) {
153 |         this.disabled = true;
154 |     };
155 | 
156 |     uploaderPreDefinedFiles = new SlashUploader(document.getElementById("uploader_pre_defined_files"), {
157 |         onFilesSelected: onFilesSelected,
158 |         onFilesUploaded: onFilesUploaded,
159 |         onFilesProgress: onFilesProgress,
160 |         onFileDeleted: onFileDeleted,
161 |         onCanceled: onCanceled,
162 |         onError: onError,
163 |         iframeGateway: iframeGateway,
164 |         serverScripts: sameDomainScripts
165 |     });
166 |     uploaderPreDefinedFiles.uploadedFiles = [
167 |         { file_name: "2015-08-13(2).jpg", file_path: "//mydomain.com/uploads/2015-08-13(2).jpg" },
168 |         { file_name: "test.png", file_path: "//mydomain.com/uploads/test.png" }
169 |     ];
170 | 
171 | 
172 |     uploaderProgressBar = new SlashUploader(document.getElementById("uploader_progress_bar"), {
173 |         onFilesSelected: onFilesSelected,
174 |         onFilesUploaded: onFilesUploaded,
175 |         onFilesProgress: onFilesProgress,
176 |         onFileDeleted: onFileDeleted,
177 |         onCanceled: onCanceled,
178 |         onError: onError,
179 |         iframeGateway: iframeGateway,
180 |         serverScripts: sameDomainScripts
181 |     });
182 |     uploaderProgressBar.progressAnimationType = "inline|bar";
183 | 
184 | 
185 |     uploaderRtl = new SlashUploader(document.getElementById("uploader_rtl"), {
186 |         onFilesSelected: onFilesSelected,
187 |         onFilesUploaded: onFilesUploaded,
188 |         onFilesProgress: onFilesProgress,
189 |         onFileDeleted: onFileDeleted,
190 |         onCanceled: onCanceled,
191 |         onError: onError,
192 |         iframeGateway: iframeGateway,
193 |         serverScripts: sameDomainScripts
194 |     });
195 |     uploaderRtl.progressAnimationType = "inline|bar";
196 |     uploaderRtl.rtl = true;
197 |     uploaderRtl.maxFileChars = 10;
198 |     uploaderRtl.browseText = "הנח קבצים כאן או לחץ לבחירת קבצים";
199 |     uploaderRtl.browseTextDropDisabled = "לחץ לבחירת קובץ";
200 |     uploaderRtl.dropFilesText = "הנח קבצים כאן";
201 |     uploaderRtl.uploadingFileText = "מעלה את \"{{current_file_name}}\"...";
202 |     uploaderRtl.uploadingFileTextProgressBar = "מעלה את \"{{current_file_name}}\"...";
203 |     uploaderRtl.uploadingFilesText = "מעלה {{total_files}} קבצים...";
204 |     uploaderRtl.uploadingFilesTextProgressBar = "מעלה {{total_files}} קבצים...";
205 |     uploaderRtl.uploadingFileByFileText = "מעלה את הקובץ \"{{current_file_name}}\" (קובץ {{current_file_index}} מתוך {{total_files}})";
206 |     uploaderRtl.cancelText = "ביטול";
207 |     uploaderRtl.uploadedFileTemplate = function (fileData) {
208 |         if (fileData.file_name.toLowerCase().indexOf(".jpg") != -1 || fileData.file_name.toLowerCase().indexOf(".png") != -1) {
209 |             return "<img src='" + fileData.file_path + "' height='40' />"
210 |         } else {
211 |             return "<a style='direction: rtl; font-weight: bold;' href='" + fileData.file_path + "' target='_blank'>" + fileData.file_name + "</a>";
212 |         }
213 |     }
214 |     uploaderRtl.errors = {
215 |         invalidFileExtension: "סוג הקובץ לא נתמך",
216 |         invalidFileSize: "הקובץ כבד מדי",
217 |         parseFailed: "פירסוס מידע נכשל",
218 |         unspecifiedError: "תקלה לא מזוהת",
219 |         uploadFailed: "העלאה נכשלה"
220 |     };
221 | 
222 |     uploaderNoDragDrop = new SlashUploader(document.getElementById("uploader_no_drag_drop"), {
223 |         onFilesSelected: onFilesSelected,
224 |         onFilesUploaded: onFilesUploaded,
225 |         onFilesProgress: onFilesProgress,
226 |         onFileDeleted: onFileDeleted,
227 |         onCanceled: onCanceled,
228 |         onError: onError,
229 |         iframeGateway: iframeGateway,
230 |         serverScripts: sameDomainScripts
231 |     });
232 |     uploaderNoDragDrop.enableDropFiles = false;
233 | 
234 | 
235 | 
236 |     uploaderNoCancelDelete = new SlashUploader(document.getElementById("uploader_no_cancel_delete"), {
237 |         onFilesSelected: onFilesSelected,
238 |         onFilesUploaded: onFilesUploaded,
239 |         onFilesProgress: onFilesProgress,
240 |         onFileDeleted: onFileDeleted,
241 |         onCanceled: onCanceled,
242 |         onError: onError,
243 |         iframeGateway: iframeGateway,
244 |         serverScripts: sameDomainScripts
245 |     });
246 |     uploaderNoCancelDelete.enableCancelButton = false;
247 |     uploaderNoCancelDelete.enableDeleteButton = false;
248 | 
249 | 
250 |     uploaderNoResults = new SlashUploader(document.getElementById("uploader_no_results"), {
251 |         onFilesSelected: onFilesSelected,
252 |         onFilesUploaded: onFilesUploaded,
253 |         onFilesProgress: onFilesProgress,
254 |         onFileDeleted: onFileDeleted,
255 |         onCanceled: onCanceled,
256 |         onError: onError,
257 |         iframeGateway: iframeGateway,
258 |         serverScripts: sameDomainScripts
259 |     });
260 |     uploaderNoResults.uploadedFilesPosition = "none";
261 | 
262 | 
263 |     uploaderCrossDomain = new SlashUploader(document.getElementById("uploader_field_cross_domain"), {
264 |         onFilesSelected: onFilesSelected,
265 |         onFilesUploaded: onFilesUploaded,
266 |         onFilesProgress: onFilesProgress,
267 |         onFileDeleted: onFileDeleted,
268 |         onCanceled: onCanceled,
269 |         onError: onError,
270 |         iframeGateway: iframeGateway,
271 |         serverScripts: sameDomainScripts
272 |     });
273 |     uploaderCrossDomain.serverScripts = crossDomainScripts;
274 |     uploaderCrossDomain.progressAnimationType = "inline|bar";
275 | 
276 | 
277 | 
278 | 
279 |     uploaderWithValidations = new SlashUploader(document.getElementById("uploader_field_validations"), {
280 |         onFilesSelected: onFilesSelected,
281 |         onFilesUploaded: onFilesUploaded,
282 |         onFilesProgress: onFilesProgress,
283 |         onFileDeleted: onFileDeleted,
284 |         onCanceled: onCanceled,
285 |         onError: onError,
286 |         showFocusRect: true,
287 |         iframeGateway: iframeGateway,
288 |         serverScripts: sameDomainScripts
289 |     });
290 |     uploaderWithValidations.allowedFilesExtensions = ["mp4", "mov", "avi", "ogv", "wmv", "flv", "mkv", "mpg", "webm"];
291 |     uploaderWithValidations.allowedMaxFileSize = 5000;
292 |     uploaderWithValidations.customValidation = function (file) {
293 |         if (file.duration == null) {
294 |             console.log("Couldn't read metadata for '" + file.name + "', so duration validation isn't possible");
295 |         } else if (file.duration < 10) {
296 |             return { error: 'invalid_duration', error_text: "\"{{file_name}}\" duration is less then 10 seconds." };
297 |         }
298 |     };
299 |     uploaderWithValidations.errors = {
300 |         invalidFileExtension: "File \"{{file_name}}\" is not a supportted video format.",
301 |         invalidFileSize: "File \"{{file_name}}\" exceeds 5MB."
302 |     };
303 |     uploaderWithValidations.acceptOnlyFilesTypes = "video/*";
304 |     uploaderWithValidations.maxFileChars = 18;
305 |     uploaderWithValidations.resetFilesOnEachUpload = false;
306 | 
307 | 
308 |     uploaderNoOverwrite = new SlashUploader(document.getElementById("uploader_no_overwrite"), {
309 |         onFilesSelected: onFilesSelected,
310 |         onFilesUploaded: onFilesUploaded,
311 |         onFilesProgress: onFilesProgress,
312 |         onFileDeleted: onFileDeleted,
313 |         onCanceled: onCanceled,
314 |         onError: onError,
315 |         iframeGateway: iframeGateway,
316 |         serverScripts: sameDomainScripts
317 |     });
318 |     uploaderNoOverwrite.resetFilesOnEachUpload = false;
319 |     uploaderNoOverwrite.progressAnimationType = "inline|bar";
320 |     uploaderNoOverwrite.maxFiles = 6;
321 | 
322 | 
323 |     var cropWidth = 400;
324 |     var cropHeight = 300;
325 |     uploaderWithAutoCrop = new SlashUploader(document.getElementById("uploader_with_auto_crop"), {
326 |         onFilesSelected: onFilesSelected,
327 |         onFilesUploaded: onFilesUploaded,
328 |         onFilesProgress: onFilesProgress,
329 |         onFileDeleted: onFileDeleted,
330 |         onCanceled: onCanceled,
331 |         onError: onError,
332 |         compressImageWidth: cropWidth,
333 |         compressImageHeight: cropHeight,
334 |         iframeGateway: iframeGateway,
335 |         serverScripts: sameDomainScripts
336 |     });
337 |     var autoCropFields = "&resize_type=ProportionalCropOutsideBottomRight&resize_output_width=" + cropWidth + "&resize_output_height=" + cropHeight;
338 |     uploaderWithAutoCrop.serverScripts.uploadChunk = uploaderWithAutoCrop.serverScripts.uploadChunk + autoCropFields;
339 |     uploaderWithAutoCrop.serverScripts.uploadStream = uploaderWithAutoCrop.serverScripts.uploadStream + autoCropFields;
340 |     uploaderWithAutoCrop.serverScripts.uploadThroughIframe = uploaderWithAutoCrop.serverScripts.uploadThroughIframe + autoCropFields;
341 | 
342 | 
343 |     if (navigator.appVersion.indexOf("MSIE 8") == -1
344 |         && navigator.appVersion.indexOf("MSIE 9") == -1) {
345 | 
346 |         uploaderWithManualCrop = new SlashUploader(document.getElementById("uploader_with_manual_crop"), {
347 |             onFilesUploaded: onFilesUploaded,
348 |             onFilesProgress: onFilesProgress,
349 |             onFileDeleted: onFileDeleted,
350 |             onCanceled: onCanceled,
351 |             onError: onError,
352 |             compressImageWidth: cropWidth * 3,
353 |             compressImageHeight: cropHeight * 3,
354 |             onFilesSelected: function (files, continueUpload) {
355 |                 ImageCropper.startCropImages(files, uploaderWithManualCrop, cropWidth / cropHeight, continueUpload);
356 |             },
357 |             iframeGateway: iframeGateway,
358 |             serverScripts: sameDomainScripts
359 |         });
360 |         var manualCropFields = "&resize_type=Manual&resize_output_width=" + cropWidth + "&resize_output_height=" + cropHeight + "&crop_x={{crop_x}}&crop_y={{crop_y}}&crop_width={{crop_width}}&crop_height={{crop_height}}&crop_rotate={{crop_rotate}}&crop_scaleX={{crop_scaleX}}&crop_scaleY={{crop_scaleY}}";
361 |         uploaderWithManualCrop.serverScripts.uploadChunk = uploaderWithManualCrop.serverScripts.uploadChunk + manualCropFields;
362 |         uploaderWithManualCrop.serverScripts.uploadStream = uploaderWithManualCrop.serverScripts.uploadStream + manualCropFields;
363 |         uploaderWithManualCrop.serverScripts.uploadThroughIframe = uploaderWithManualCrop.serverScripts.uploadThroughIframe + manualCropFields;
364 | 
365 |     }
366 | 
367 |     uploaderGroupResults = new SlashUploader(document.getElementById("uploader_group"), {
368 |         onFilesSelected: onFilesSelected,
369 |         onFilesUploaded: onFilesUploaded,
370 |         onFilesProgress: onFilesProgress,
371 |         onFileDeleted: onFileDeleted,
372 |         onCanceled: onCanceled,
373 |         onError: onError,
374 |         iframeGateway: iframeGateway,
375 |         serverScripts: sameDomainScripts
376 |     });
377 |     uploaderGroupResults.groupUploadedFilesResult = true;
378 |     uploaderGroupResults.uploadedFileTemplate = function (files) {
379 |         if (files.length == 1) {
380 |             return "Uploaded one file";
381 |         } else {
382 |             return "Uploaded " + files.length + " files";
383 |         }
384 |     };
385 | 
386 |     uploaderCustomCss = new SlashUploader(document.getElementById("uploader_custom_css"), {
387 |         onFilesSelected: onFilesSelected,
388 |         onFilesUploaded: onFilesUploaded,
389 |         onFilesProgress: onFilesProgress,
390 |         onFileDeleted: onFileDeleted,
391 |         onCanceled: onCanceled,
392 |         onError: onError,
393 |         height: 150,
394 |         iframeGateway: iframeGateway,
395 |         serverScripts: sameDomainScripts
396 |     });
397 |     uploaderCustomCss.progressAnimationType = "inline|bar";
398 | 
399 | 
400 | 
401 |     uploaderCustomHTML = new SlashUploader(document.getElementById("uploader_field_custom_button"), {
402 |         customHTML: true,
403 |         onFilesSelected: onFilesSelected,
404 |         onFilesUploaded: onFilesUploaded,
405 |         onFilesProgress: onFilesProgress,
406 |         onFileDeleted: onFileDeleted,
407 |         onCanceled: onCanceled,
408 |         onError: onError,
409 |         iframeGateway: iframeGateway,
410 |         serverScripts: sameDomainScripts
411 |     });
412 | 
413 | 
414 | }


--------------------------------------------------------------------------------
/demo/image_cropper/cropperjs-1.5.6/dist/cropper.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Cropper.js v1.5.6
 3 |  * https://fengyuanchen.github.io/cropperjs
 4 |  *
 5 |  * Copyright 2015-present Chen Fengyuan
 6 |  * Released under the MIT license
 7 |  *
 8 |  * Date: 2019-10-04T04:33:48.372Z
 9 |  */
10 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Cropper=e()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function i(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,a)}return i}function C(n){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?i(o,!0).forEach(function(t){var e,i,a;e=n,a=o[i=t],i in e?Object.defineProperty(e,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[i]=a}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):i(o).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(o,t))})}return n}function P(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var n="undefined"!=typeof window&&void 0!==window.document,r=n?window:{},t=n&&"ontouchstart"in r.document.documentElement,o=n&&"PointerEvent"in r,l="cropper",D="all",B="crop",k="move",O="zoom",T="e",E="w",W="s",N="n",H="ne",L="nw",z="se",Y="sw",h="".concat(l,"-crop"),s="".concat(l,"-disabled"),X="".concat(l,"-hidden"),d="".concat(l,"-hide"),p="".concat(l,"-invisible"),c="".concat(l,"-modal"),u="".concat(l,"-move"),m="".concat(l,"Action"),g="".concat(l,"Preview"),f="crop",v="move",w="none",b="crop",x="cropend",y="cropmove",M="cropstart",R="dblclick",S=o?"pointerdown":t?"touchstart":"mousedown",A=o?"pointermove":t?"touchmove":"mousemove",j=o?"pointerup pointercancel":t?"touchend touchcancel":"mouseup",I="ready",U="zoom",q="image/jpeg",$=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,Q=/^data:/,K=/^data:image\/jpeg;base64,/,Z=/^img|canvas$/i,G={viewMode:0,dragMode:f,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},V=Number.isNaN||r.isNaN;function F(t){return"number"==typeof t&&!V(t)}var J=function(t){return 0<t&&t<1/0};function _(t){return void 0===t}function tt(t){return"object"===e(t)&&null!==t}var et=Object.prototype.hasOwnProperty;function it(t){if(!tt(t))return!1;try{var e=t.constructor,i=e.prototype;return e&&i&&et.call(i,"isPrototypeOf")}catch(t){return!1}}function at(t){return"function"==typeof t}var nt=Array.prototype.slice;function ot(t){return Array.from?Array.from(t):nt.call(t)}function rt(i,a){return i&&at(a)&&(Array.isArray(i)||F(i.length)?ot(i).forEach(function(t,e){a.call(i,t,e,i)}):tt(i)&&Object.keys(i).forEach(function(t){a.call(i,i[t],t,i)})),i}var ht=Object.assign||function(i){for(var t=arguments.length,e=new Array(1<t?t-1:0),a=1;a<t;a++)e[a-1]=arguments[a];return tt(i)&&0<e.length&&e.forEach(function(e){tt(e)&&Object.keys(e).forEach(function(t){i[t]=e[t]})}),i},st=/\.\d*(?:0|9){12}\d*$/;function ct(t,e){var i=1<arguments.length&&void 0!==e?e:1e11;return st.test(t)?Math.round(t*i)/i:t}var lt=/^width|height|left|top|marginLeft|marginTop$/;function dt(t,e){var i=t.style;rt(e,function(t,e){lt.test(e)&&F(t)&&(t="".concat(t,"px")),i[e]=t})}function pt(t,e){if(e)if(F(t.length))rt(t,function(t){pt(t,e)});else if(t.classList)t.classList.add(e);else{var i=t.className.trim();i?i.indexOf(e)<0&&(t.className="".concat(i," ").concat(e)):t.className=e}}function ut(t,e){e&&(F(t.length)?rt(t,function(t){ut(t,e)}):t.classList?t.classList.remove(e):0<=t.className.indexOf(e)&&(t.className=t.className.replace(e,"")))}function mt(t,e,i){e&&(F(t.length)?rt(t,function(t){mt(t,e,i)}):i?pt(t,e):ut(t,e))}var gt=/([a-z\d])([A-Z])/g;function ft(t){return t.replace(gt,"$1-$2").toLowerCase()}function vt(t,e){return tt(t[e])?t[e]:t.dataset?t.dataset[e]:t.getAttribute("data-".concat(ft(e)))}function wt(t,e,i){tt(i)?t[e]=i:t.dataset?t.dataset[e]=i:t.setAttribute("data-".concat(ft(e)),i)}var bt=/\s\s*/,xt=function(){var t=!1;if(n){var e=!1,i=function(){},a=Object.defineProperty({},"once",{get:function(){return t=!0,e},set:function(t){e=t}});r.addEventListener("test",i,a),r.removeEventListener("test",i,a)}return t}();function yt(i,t,a,e){var n=3<arguments.length&&void 0!==e?e:{},o=a;t.trim().split(bt).forEach(function(t){if(!xt){var e=i.listeners;e&&e[t]&&e[t][a]&&(o=e[t][a],delete e[t][a],0===Object.keys(e[t]).length&&delete e[t],0===Object.keys(e).length&&delete i.listeners)}i.removeEventListener(t,o,n)})}function Mt(o,t,r,e){var h=3<arguments.length&&void 0!==e?e:{},s=r;t.trim().split(bt).forEach(function(a){if(h.once&&!xt){var t=o.listeners,n=void 0===t?{}:t;s=function(){delete n[a][r],o.removeEventListener(a,s,h);for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];r.apply(o,e)},n[a]||(n[a]={}),n[a][r]&&o.removeEventListener(a,n[a][r],h),n[a][r]=s,o.listeners=n}o.addEventListener(a,s,h)})}function Ct(t,e,i){var a;return at(Event)&&at(CustomEvent)?a=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0}):(a=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i),t.dispatchEvent(a)}function Dt(t){var e=t.getBoundingClientRect();return{left:e.left+(window.pageXOffset-document.documentElement.clientLeft),top:e.top+(window.pageYOffset-document.documentElement.clientTop)}}var Bt=r.location,kt=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function Ot(t){var e=t.match(kt);return null!==e&&(e[1]!==Bt.protocol||e[2]!==Bt.hostname||e[3]!==Bt.port)}function Tt(t){var e="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+e}function Et(t){var e=t.rotate,i=t.scaleX,a=t.scaleY,n=t.translateX,o=t.translateY,r=[];F(n)&&0!==n&&r.push("translateX(".concat(n,"px)")),F(o)&&0!==o&&r.push("translateY(".concat(o,"px)")),F(e)&&0!==e&&r.push("rotate(".concat(e,"deg)")),F(i)&&1!==i&&r.push("scaleX(".concat(i,")")),F(a)&&1!==a&&r.push("scaleY(".concat(a,")"));var h=r.length?r.join(" "):"none";return{WebkitTransform:h,msTransform:h,transform:h}}function Wt(t,e){var i=t.pageX,a=t.pageY,n={endX:i,endY:a};return e?n:C({startX:i,startY:a},n)}function Nt(t,e){var i=t.aspectRatio,a=t.height,n=t.width,o=1<arguments.length&&void 0!==e?e:"contain",r=J(n),h=J(a);if(r&&h){var s=a*i;"contain"===o&&n<s||"cover"===o&&s<n?a=n/i:n=a*i}else r?a=n/i:h&&(n=a*i);return{width:n,height:a}}var Ht=String.fromCharCode;var Lt=/^data:.*,/;function zt(t){var e,i=new DataView(t);try{var a,n,o;if(255===i.getUint8(0)&&216===i.getUint8(1))for(var r=i.byteLength,h=2;h+1<r;){if(255===i.getUint8(h)&&225===i.getUint8(h+1)){n=h;break}h+=1}if(n){var s=n+10;if("Exif"===function(t,e,i){var a="";i+=e;for(var n=e;n<i;n+=1)a+=Ht(t.getUint8(n));return a}(i,n+4,4)){var c=i.getUint16(s);if(((a=18761===c)||19789===c)&&42===i.getUint16(s+2,a)){var l=i.getUint32(s+4,a);8<=l&&(o=s+l)}}}if(o){var d,p,u=i.getUint16(o,a);for(p=0;p<u;p+=1)if(d=o+12*p+2,274===i.getUint16(d,a)){d+=8,e=i.getUint16(d,a),i.setUint16(d,1,a);break}}}catch(t){e=1}return e}var Yt={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,e=this.options,i=this.container,a=this.cropper;pt(a,X),ut(t,X);var n={width:Math.max(i.offsetWidth,Number(e.minContainerWidth)||200),height:Math.max(i.offsetHeight,Number(e.minContainerHeight)||100)};dt(a,{width:(this.containerData=n).width,height:n.height}),pt(t,X),ut(a,X)},initCanvas:function(){var t=this.containerData,e=this.imageData,i=this.options.viewMode,a=Math.abs(e.rotate)%180==90,n=a?e.naturalHeight:e.naturalWidth,o=a?e.naturalWidth:e.naturalHeight,r=n/o,h=t.width,s=t.height;t.height*r>t.width?3===i?h=t.height*r:s=t.width/r:3===i?s=t.width/r:h=t.height*r;var c={aspectRatio:r,naturalWidth:n,naturalHeight:o,width:h,height:s};c.left=(t.width-h)/2,c.top=(t.height-s)/2,c.oldLeft=c.left,c.oldTop=c.top,this.canvasData=c,this.limited=1===i||2===i,this.limitCanvas(!0,!0),this.initialImageData=ht({},e),this.initialCanvasData=ht({},c)},limitCanvas:function(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=i.viewMode,h=n.aspectRatio,s=this.cropped&&o;if(t){var c=Number(i.minCanvasWidth)||0,l=Number(i.minCanvasHeight)||0;1<r?(c=Math.max(c,a.width),l=Math.max(l,a.height),3===r&&(c<l*h?c=l*h:l=c/h)):0<r&&(c?c=Math.max(c,s?o.width:0):l?l=Math.max(l,s?o.height:0):s&&((c=o.width)<(l=o.height)*h?c=l*h:l=c/h));var d=Nt({aspectRatio:h,width:c,height:l});c=d.width,l=d.height,n.minWidth=c,n.minHeight=l,n.maxWidth=1/0,n.maxHeight=1/0}if(e)if((s?0:1)<r){var p=a.width-n.width,u=a.height-n.height;n.minLeft=Math.min(0,p),n.minTop=Math.min(0,u),n.maxLeft=Math.max(0,p),n.maxTop=Math.max(0,u),s&&this.limited&&(n.minLeft=Math.min(o.left,o.left+(o.width-n.width)),n.minTop=Math.min(o.top,o.top+(o.height-n.height)),n.maxLeft=o.left,n.maxTop=o.top,2===r&&(n.width>=a.width&&(n.minLeft=Math.min(0,p),n.maxLeft=Math.max(0,p)),n.height>=a.height&&(n.minTop=Math.min(0,u),n.maxTop=Math.max(0,u))))}else n.minLeft=-n.width,n.minTop=-n.height,n.maxLeft=a.width,n.maxTop=a.height},renderCanvas:function(t,e){var i=this.canvasData,a=this.imageData;if(e){var n=function(t){var e=t.width,i=t.height,a=t.degree;if(90===(a=Math.abs(a)%180))return{width:i,height:e};var n=a%90*Math.PI/180,o=Math.sin(n),r=Math.cos(n),h=e*r+i*o,s=e*o+i*r;return 90<a?{width:s,height:h}:{width:h,height:s}}({width:a.naturalWidth*Math.abs(a.scaleX||1),height:a.naturalHeight*Math.abs(a.scaleY||1),degree:a.rotate||0}),o=n.width,r=n.height,h=i.width*(o/i.naturalWidth),s=i.height*(r/i.naturalHeight);i.left-=(h-i.width)/2,i.top-=(s-i.height)/2,i.width=h,i.height=s,i.aspectRatio=o/r,i.naturalWidth=o,i.naturalHeight=r,this.limitCanvas(!0,!1)}(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCanvas(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,dt(this.canvas,ht({width:i.width,height:i.height},Et({translateX:i.left,translateY:i.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var e=this.canvasData,i=this.imageData,a=i.naturalWidth*(e.width/e.naturalWidth),n=i.naturalHeight*(e.height/e.naturalHeight);ht(i,{width:a,height:n,left:(e.width-a)/2,top:(e.height-n)/2}),dt(this.image,ht({width:i.width,height:i.height},Et(ht({translateX:i.left,translateY:i.top},i)))),t&&this.output()},initCropBox:function(){var t=this.options,e=this.canvasData,i=t.aspectRatio||t.initialAspectRatio,a=Number(t.autoCropArea)||.8,n={width:e.width,height:e.height};i&&(e.height*i>e.width?n.height=n.width/i:n.width=n.height*i),this.cropBoxData=n,this.limitCropBox(!0,!0),n.width=Math.min(Math.max(n.width,n.minWidth),n.maxWidth),n.height=Math.min(Math.max(n.height,n.minHeight),n.maxHeight),n.width=Math.max(n.minWidth,n.width*a),n.height=Math.max(n.minHeight,n.height*a),n.left=e.left+(e.width-n.width)/2,n.top=e.top+(e.height-n.height)/2,n.oldLeft=n.left,n.oldTop=n.top,this.initialCropBoxData=ht({},n)},limitCropBox:function(t,e){var i=this.options,a=this.containerData,n=this.canvasData,o=this.cropBoxData,r=this.limited,h=i.aspectRatio;if(t){var s=Number(i.minCropBoxWidth)||0,c=Number(i.minCropBoxHeight)||0,l=r?Math.min(a.width,n.width,n.width+n.left,a.width-n.left):a.width,d=r?Math.min(a.height,n.height,n.height+n.top,a.height-n.top):a.height;s=Math.min(s,a.width),c=Math.min(c,a.height),h&&(s&&c?s<c*h?c=s/h:s=c*h:s?c=s/h:c&&(s=c*h),l<d*h?d=l/h:l=d*h),o.minWidth=Math.min(s,l),o.minHeight=Math.min(c,d),o.maxWidth=l,o.maxHeight=d}e&&(r?(o.minLeft=Math.max(0,n.left),o.minTop=Math.max(0,n.top),o.maxLeft=Math.min(a.width,n.left+n.width)-o.width,o.maxTop=Math.min(a.height,n.top+n.height)-o.height):(o.minLeft=0,o.minTop=0,o.maxLeft=a.width-o.width,o.maxTop=a.height-o.height))},renderCropBox:function(){var t=this.options,e=this.containerData,i=this.cropBoxData;(i.width>i.maxWidth||i.width<i.minWidth)&&(i.left=i.oldLeft),(i.height>i.maxHeight||i.height<i.minHeight)&&(i.top=i.oldTop),i.width=Math.min(Math.max(i.width,i.minWidth),i.maxWidth),i.height=Math.min(Math.max(i.height,i.minHeight),i.maxHeight),this.limitCropBox(!1,!0),i.left=Math.min(Math.max(i.left,i.minLeft),i.maxLeft),i.top=Math.min(Math.max(i.top,i.minTop),i.maxTop),i.oldLeft=i.left,i.oldTop=i.top,t.movable&&t.cropBoxMovable&&wt(this.face,m,i.width>=e.width&&i.height>=e.height?k:D),dt(this.cropBox,ht({width:i.width,height:i.height},Et({translateX:i.left,translateY:i.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),Ct(this.element,b,this.getData())}},Xt={initPreview:function(){var t=this.element,i=this.crossOrigin,e=this.options.preview,a=i?this.crossOriginUrl:this.url,n=t.alt||"The image to preview",o=document.createElement("img");if(i&&(o.crossOrigin=i),o.src=a,o.alt=n,this.viewBox.appendChild(o),this.viewBoxImage=o,e){var r=e;"string"==typeof e?r=t.ownerDocument.querySelectorAll(e):e.querySelector&&(r=[e]),rt(this.previews=r,function(t){var e=document.createElement("img");wt(t,g,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),i&&(e.crossOrigin=i),e.src=a,e.alt=n,e.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;"',t.innerHTML="",t.appendChild(e)})}},resetPreview:function(){rt(this.previews,function(t){var e=vt(t,g);dt(t,{width:e.width,height:e.height}),t.innerHTML=e.html,function(e,i){if(tt(e[i]))try{delete e[i]}catch(t){e[i]=void 0}else if(e.dataset)try{delete e.dataset[i]}catch(t){e.dataset[i]=void 0}else e.removeAttribute("data-".concat(ft(i)))}(t,g)})},preview:function(){var h=this.imageData,t=this.canvasData,e=this.cropBoxData,s=e.width,c=e.height,l=h.width,d=h.height,p=e.left-t.left-h.left,u=e.top-t.top-h.top;this.cropped&&!this.disabled&&(dt(this.viewBoxImage,ht({width:l,height:d},Et(ht({translateX:-p,translateY:-u},h)))),rt(this.previews,function(t){var e=vt(t,g),i=e.width,a=e.height,n=i,o=a,r=1;s&&(o=c*(r=i/s)),c&&a<o&&(n=s*(r=a/c),o=a),dt(t,{width:n,height:o}),dt(t.getElementsByTagName("img")[0],ht({width:l*r,height:d*r},Et(ht({translateX:-p*r,translateY:-u*r},h))))}))}},Rt={bind:function(){var t=this.element,e=this.options,i=this.cropper;at(e.cropstart)&&Mt(t,M,e.cropstart),at(e.cropmove)&&Mt(t,y,e.cropmove),at(e.cropend)&&Mt(t,x,e.cropend),at(e.crop)&&Mt(t,b,e.crop),at(e.zoom)&&Mt(t,U,e.zoom),Mt(i,S,this.onCropStart=this.cropStart.bind(this)),e.zoomable&&e.zoomOnWheel&&Mt(i,"wheel",this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&Mt(i,R,this.onDblclick=this.dblclick.bind(this)),Mt(t.ownerDocument,A,this.onCropMove=this.cropMove.bind(this)),Mt(t.ownerDocument,j,this.onCropEnd=this.cropEnd.bind(this)),e.responsive&&Mt(window,"resize",this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,e=this.options,i=this.cropper;at(e.cropstart)&&yt(t,M,e.cropstart),at(e.cropmove)&&yt(t,y,e.cropmove),at(e.cropend)&&yt(t,x,e.cropend),at(e.crop)&&yt(t,b,e.crop),at(e.zoom)&&yt(t,U,e.zoom),yt(i,S,this.onCropStart),e.zoomable&&e.zoomOnWheel&&yt(i,"wheel",this.onWheel,{passive:!1,capture:!0}),e.toggleDragModeOnDblclick&&yt(i,R,this.onDblclick),yt(t.ownerDocument,A,this.onCropMove),yt(t.ownerDocument,j,this.onCropEnd),e.responsive&&yt(window,"resize",this.onResize)}},St={resize:function(){var t=this.options,e=this.container,i=this.containerData,a=Number(t.minContainerWidth)||200,n=Number(t.minContainerHeight)||100;if(!(this.disabled||i.width<=a||i.height<=n)){var o,r,h=e.offsetWidth/i.width;if(1!=h||e.offsetHeight!==i.height)t.restore&&(o=this.getCanvasData(),r=this.getCropBoxData()),this.render(),t.restore&&(this.setCanvasData(rt(o,function(t,e){o[e]=t*h})),this.setCropBoxData(rt(r,function(t,e){r[e]=t*h})))}},dblclick:function(){this.disabled||this.options.dragMode===w||this.setDragMode(function(t,e){return t.classList?t.classList.contains(e):-1<t.className.indexOf(e)}(this.dragBox,h)?v:f)},wheel:function(t){var e=this,i=Number(this.options.wheelZoomRatio)||.1,a=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(function(){e.wheeling=!1},50),t.deltaY?a=0<t.deltaY?1:-1:t.wheelDelta?a=-t.wheelDelta/120:t.detail&&(a=0<t.detail?1:-1),this.zoom(-a*i,t)))},cropStart:function(t){var e=t.buttons,i=t.button;if(!(this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(F(e)&&1!==e||F(i)&&0!==i||t.ctrlKey))){var a,n=this.options,o=this.pointers;t.changedTouches?rt(t.changedTouches,function(t){o[t.identifier]=Wt(t)}):o[t.pointerId||0]=Wt(t),a=1<Object.keys(o).length&&n.zoomable&&n.zoomOnTouch?O:vt(t.target,m),$.test(a)&&!1!==Ct(this.element,M,{originalEvent:t,action:a})&&(t.preventDefault(),this.action=a,this.cropping=!1,a===B&&(this.cropping=!0,pt(this.dragBox,c)))}},cropMove:function(t){var e=this.action;if(!this.disabled&&e){var i=this.pointers;t.preventDefault(),!1!==Ct(this.element,y,{originalEvent:t,action:e})&&(t.changedTouches?rt(t.changedTouches,function(t){ht(i[t.identifier]||{},Wt(t,!0))}):ht(i[t.pointerId||0]||{},Wt(t,!0)),this.change(t))}},cropEnd:function(t){if(!this.disabled){var e=this.action,i=this.pointers;t.changedTouches?rt(t.changedTouches,function(t){delete i[t.identifier]}):delete i[t.pointerId||0],e&&(t.preventDefault(),Object.keys(i).length||(this.action=""),this.cropping&&(this.cropping=!1,mt(this.dragBox,c,this.cropped&&this.options.modal)),Ct(this.element,x,{originalEvent:t,action:e}))}}},At={change:function(t){var e,i=this.options,a=this.canvasData,n=this.containerData,o=this.cropBoxData,r=this.pointers,h=this.action,s=i.aspectRatio,c=o.left,l=o.top,d=o.width,p=o.height,u=c+d,m=l+p,g=0,f=0,v=n.width,w=n.height,b=!0;!s&&t.shiftKey&&(s=d&&p?d/p:1),this.limited&&(g=o.minLeft,f=o.minTop,v=g+Math.min(n.width,a.width,a.left+a.width),w=f+Math.min(n.height,a.height,a.top+a.height));function x(t){switch(t){case T:u+M.x>v&&(M.x=v-u);break;case E:c+M.x<g&&(M.x=g-c);break;case N:l+M.y<f&&(M.y=f-l);break;case W:m+M.y>w&&(M.y=w-m)}}var y=r[Object.keys(r)[0]],M={x:y.endX-y.startX,y:y.endY-y.startY};switch(h){case D:c+=M.x,l+=M.y;break;case T:if(0<=M.x&&(v<=u||s&&(l<=f||w<=m))){b=!1;break}x(T),(d+=M.x)<0&&(h=E,c-=d=-d),s&&(p=d/s,l+=(o.height-p)/2);break;case N:if(M.y<=0&&(l<=f||s&&(c<=g||v<=u))){b=!1;break}x(N),p-=M.y,l+=M.y,p<0&&(h=W,l-=p=-p),s&&(d=p*s,c+=(o.width-d)/2);break;case E:if(M.x<=0&&(c<=g||s&&(l<=f||w<=m))){b=!1;break}x(E),d-=M.x,c+=M.x,d<0&&(h=T,c-=d=-d),s&&(p=d/s,l+=(o.height-p)/2);break;case W:if(0<=M.y&&(w<=m||s&&(c<=g||v<=u))){b=!1;break}x(W),(p+=M.y)<0&&(h=N,l-=p=-p),s&&(d=p*s,c+=(o.width-d)/2);break;case H:if(s){if(M.y<=0&&(l<=f||v<=u)){b=!1;break}x(N),p-=M.y,l+=M.y,d=p*s}else x(N),x(T),0<=M.x?u<v?d+=M.x:M.y<=0&&l<=f&&(b=!1):d+=M.x,M.y<=0?f<l&&(p-=M.y,l+=M.y):(p-=M.y,l+=M.y);d<0&&p<0?(h=Y,l-=p=-p,c-=d=-d):d<0?(h=L,c-=d=-d):p<0&&(h=z,l-=p=-p);break;case L:if(s){if(M.y<=0&&(l<=f||c<=g)){b=!1;break}x(N),p-=M.y,l+=M.y,d=p*s,c+=o.width-d}else x(N),x(E),M.x<=0?g<c?(d-=M.x,c+=M.x):M.y<=0&&l<=f&&(b=!1):(d-=M.x,c+=M.x),M.y<=0?f<l&&(p-=M.y,l+=M.y):(p-=M.y,l+=M.y);d<0&&p<0?(h=z,l-=p=-p,c-=d=-d):d<0?(h=H,c-=d=-d):p<0&&(h=Y,l-=p=-p);break;case Y:if(s){if(M.x<=0&&(c<=g||w<=m)){b=!1;break}x(E),d-=M.x,c+=M.x,p=d/s}else x(W),x(E),M.x<=0?g<c?(d-=M.x,c+=M.x):0<=M.y&&w<=m&&(b=!1):(d-=M.x,c+=M.x),0<=M.y?m<w&&(p+=M.y):p+=M.y;d<0&&p<0?(h=H,l-=p=-p,c-=d=-d):d<0?(h=z,c-=d=-d):p<0&&(h=L,l-=p=-p);break;case z:if(s){if(0<=M.x&&(v<=u||w<=m)){b=!1;break}x(T),p=(d+=M.x)/s}else x(W),x(T),0<=M.x?u<v?d+=M.x:0<=M.y&&w<=m&&(b=!1):d+=M.x,0<=M.y?m<w&&(p+=M.y):p+=M.y;d<0&&p<0?(h=L,l-=p=-p,c-=d=-d):d<0?(h=Y,c-=d=-d):p<0&&(h=H,l-=p=-p);break;case k:this.move(M.x,M.y),b=!1;break;case O:this.zoom(function(t){var e=C({},t),s=[];return rt(t,function(h,t){delete e[t],rt(e,function(t){var e=Math.abs(h.startX-t.startX),i=Math.abs(h.startY-t.startY),a=Math.abs(h.endX-t.endX),n=Math.abs(h.endY-t.endY),o=Math.sqrt(e*e+i*i),r=(Math.sqrt(a*a+n*n)-o)/o;s.push(r)})}),s.sort(function(t,e){return Math.abs(t)<Math.abs(e)}),s[0]}(r),t),b=!1;break;case B:if(!M.x||!M.y){b=!1;break}e=Dt(this.cropper),c=y.startX-e.left,l=y.startY-e.top,d=o.minWidth,p=o.minHeight,0<M.x?h=0<M.y?z:H:M.x<0&&(c-=d,h=0<M.y?Y:L),M.y<0&&(l-=p),this.cropped||(ut(this.cropBox,X),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}b&&(o.width=d,o.height=p,o.left=c,o.top=l,this.action=h,this.renderCropBox()),rt(r,function(t){t.startX=t.endX,t.startY=t.endY})}},jt={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&pt(this.dragBox,c),ut(this.cropBox,X),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=ht({},this.initialImageData),this.canvasData=ht({},this.initialCanvasData),this.cropBoxData=ht({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function(){return this.cropped&&!this.disabled&&(ht(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),ut(this.dragBox,c),pt(this.cropBox,X)),this},replace:function(e,t){var i=1<arguments.length&&void 0!==t&&t;return!this.disabled&&e&&(this.isImg&&(this.element.src=e),i?(this.url=e,this.image.src=e,this.ready&&(this.viewBoxImage.src=e,rt(this.previews,function(t){t.getElementsByTagName("img")[0].src=e}))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(e))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,ut(this.cropper,s)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,pt(this.cropper,s)),this},destroy:function(){var t=this.element;return t[l]&&(t[l]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate()),this},move:function(t,e){var i=1<arguments.length&&void 0!==e?e:t,a=this.canvasData,n=a.left,o=a.top;return this.moveTo(_(t)?t:n+Number(t),_(i)?i:o+Number(i))},moveTo:function(t,e){var i=1<arguments.length&&void 0!==e?e:t,a=this.canvasData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.movable&&(F(t)&&(a.left=t,n=!0),F(i)&&(a.top=i,n=!0),n&&this.renderCanvas(!0)),this},zoom:function(t,e){var i=this.canvasData;return t=(t=Number(t))<0?1/(1-t):1+t,this.zoomTo(i.width*t/i.naturalWidth,null,e)},zoomTo:function(t,e,i){var a=this.options,n=this.canvasData,o=n.width,r=n.height,h=n.naturalWidth,s=n.naturalHeight;if(0<=(t=Number(t))&&this.ready&&!this.disabled&&a.zoomable){var c=h*t,l=s*t;if(!1===Ct(this.element,U,{ratio:t,oldRatio:o/h,originalEvent:i}))return this;if(i){var d=this.pointers,p=Dt(this.cropper),u=d&&Object.keys(d).length?function(t){var a=0,n=0,o=0;return rt(t,function(t){var e=t.startX,i=t.startY;a+=e,n+=i,o+=1}),{pageX:a/=o,pageY:n/=o}}(d):{pageX:i.pageX,pageY:i.pageY};n.left-=(c-o)*((u.pageX-p.left-n.left)/o),n.top-=(l-r)*((u.pageY-p.top-n.top)/r)}else it(e)&&F(e.x)&&F(e.y)?(n.left-=(c-o)*((e.x-n.left)/o),n.top-=(l-r)*((e.y-n.top)/r)):(n.left-=(c-o)/2,n.top-=(l-r)/2);n.width=c,n.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return F(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var e=this.imageData.scaleY;return this.scale(t,F(e)?e:1)},scaleY:function(t){var e=this.imageData.scaleX;return this.scale(F(e)?e:1,t)},scale:function(t,e){var i=1<arguments.length&&void 0!==e?e:t,a=this.imageData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.scalable&&(F(t)&&(a.scaleX=t,n=!0),F(i)&&(a.scaleY=i,n=!0),n&&this.renderCanvas(!0,!0)),this},getData:function(t){var i,e=0<arguments.length&&void 0!==t&&t,a=this.options,n=this.imageData,o=this.canvasData,r=this.cropBoxData;if(this.ready&&this.cropped){i={x:r.left-o.left,y:r.top-o.top,width:r.width,height:r.height};var h=n.width/n.naturalWidth;if(rt(i,function(t,e){i[e]=t/h}),e){var s=Math.round(i.y+i.height),c=Math.round(i.x+i.width);i.x=Math.round(i.x),i.y=Math.round(i.y),i.width=c-i.x,i.height=s-i.y}}else i={x:0,y:0,width:0,height:0};return a.rotatable&&(i.rotate=n.rotate||0),a.scalable&&(i.scaleX=n.scaleX||1,i.scaleY=n.scaleY||1),i},setData:function(t){var e=this.options,i=this.imageData,a=this.canvasData,n={};if(this.ready&&!this.disabled&&it(t)){var o=!1;e.rotatable&&F(t.rotate)&&t.rotate!==i.rotate&&(i.rotate=t.rotate,o=!0),e.scalable&&(F(t.scaleX)&&t.scaleX!==i.scaleX&&(i.scaleX=t.scaleX,o=!0),F(t.scaleY)&&t.scaleY!==i.scaleY&&(i.scaleY=t.scaleY,o=!0)),o&&this.renderCanvas(!0,!0);var r=i.width/i.naturalWidth;F(t.x)&&(n.left=t.x*r+a.left),F(t.y)&&(n.top=t.y*r+a.top),F(t.width)&&(n.width=t.width*r),F(t.height)&&(n.height=t.height*r),this.setCropBoxData(n)}return this},getContainerData:function(){return this.ready?ht({},this.containerData):{}},getImageData:function(){return this.sized?ht({},this.imageData):{}},getCanvasData:function(){var e=this.canvasData,i={};return this.ready&&rt(["left","top","width","height","naturalWidth","naturalHeight"],function(t){i[t]=e[t]}),i},setCanvasData:function(t){var e=this.canvasData,i=e.aspectRatio;return this.ready&&!this.disabled&&it(t)&&(F(t.left)&&(e.left=t.left),F(t.top)&&(e.top=t.top),F(t.width)?(e.width=t.width,e.height=t.width/i):F(t.height)&&(e.height=t.height,e.width=t.height*i),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,e=this.cropBoxData;return this.ready&&this.cropped&&(t={left:e.left,top:e.top,width:e.width,height:e.height}),t||{}},setCropBoxData:function(t){var e,i,a=this.cropBoxData,n=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&it(t)&&(F(t.left)&&(a.left=t.left),F(t.top)&&(a.top=t.top),F(t.width)&&t.width!==a.width&&(e=!0,a.width=t.width),F(t.height)&&t.height!==a.height&&(i=!0,a.height=t.height),n&&(e?a.height=a.width/n:i&&(a.width=a.height*n)),this.renderCropBox()),this},getCroppedCanvas:function(t){var e=0<arguments.length&&void 0!==t?t:{};if(!this.ready||!window.HTMLCanvasElement)return null;var i=this.canvasData,a=function(t,e,i,a){var n=e.aspectRatio,o=e.naturalWidth,r=e.naturalHeight,h=e.rotate,s=void 0===h?0:h,c=e.scaleX,l=void 0===c?1:c,d=e.scaleY,p=void 0===d?1:d,u=i.aspectRatio,m=i.naturalWidth,g=i.naturalHeight,f=a.fillColor,v=void 0===f?"transparent":f,w=a.imageSmoothingEnabled,b=void 0===w||w,x=a.imageSmoothingQuality,y=void 0===x?"low":x,M=a.maxWidth,C=void 0===M?1/0:M,D=a.maxHeight,B=void 0===D?1/0:D,k=a.minWidth,O=void 0===k?0:k,T=a.minHeight,E=void 0===T?0:T,W=document.createElement("canvas"),N=W.getContext("2d"),H=Nt({aspectRatio:u,width:C,height:B}),L=Nt({aspectRatio:u,width:O,height:E},"cover"),z=Math.min(H.width,Math.max(L.width,m)),Y=Math.min(H.height,Math.max(L.height,g)),X=Nt({aspectRatio:n,width:C,height:B}),R=Nt({aspectRatio:n,width:O,height:E},"cover"),S=Math.min(X.width,Math.max(R.width,o)),A=Math.min(X.height,Math.max(R.height,r)),j=[-S/2,-A/2,S,A];return W.width=ct(z),W.height=ct(Y),N.fillStyle=v,N.fillRect(0,0,z,Y),N.save(),N.translate(z/2,Y/2),N.rotate(s*Math.PI/180),N.scale(l,p),N.imageSmoothingEnabled=b,N.imageSmoothingQuality=y,N.drawImage.apply(N,[t].concat(P(j.map(function(t){return Math.floor(ct(t))})))),N.restore(),W}(this.image,this.imageData,i,e);if(!this.cropped)return a;var n=this.getData(),o=n.x,r=n.y,h=n.width,s=n.height,c=a.width/Math.floor(i.naturalWidth);1!=c&&(o*=c,r*=c,h*=c,s*=c);var l=h/s,d=Nt({aspectRatio:l,width:e.maxWidth||1/0,height:e.maxHeight||1/0}),p=Nt({aspectRatio:l,width:e.minWidth||0,height:e.minHeight||0},"cover"),u=Nt({aspectRatio:l,width:e.width||(1!=c?a.width:h),height:e.height||(1!=c?a.height:s)}),m=u.width,g=u.height;m=Math.min(d.width,Math.max(p.width,m)),g=Math.min(d.height,Math.max(p.height,g));var f=document.createElement("canvas"),v=f.getContext("2d");f.width=ct(m),f.height=ct(g),v.fillStyle=e.fillColor||"transparent",v.fillRect(0,0,m,g);var w=e.imageSmoothingEnabled,b=void 0===w||w,x=e.imageSmoothingQuality;v.imageSmoothingEnabled=b,x&&(v.imageSmoothingQuality=x);var y,M,C,D,B,k,O=a.width,T=a.height,E=o,W=r;E<=-h||O<E?B=C=y=E=0:E<=0?(C=-E,E=0,B=y=Math.min(O,h+E)):E<=O&&(C=0,B=y=Math.min(h,O-E)),y<=0||W<=-s||T<W?k=D=M=W=0:W<=0?(D=-W,W=0,k=M=Math.min(T,s+W)):W<=T&&(D=0,k=M=Math.min(s,T-W));var N=[E,W,y,M];if(0<B&&0<k){var H=m/h;N.push(C*H,D*H,B*H,k*H)}return v.drawImage.apply(v,[a].concat(P(N.map(function(t){return Math.floor(ct(t))})))),f},setAspectRatio:function(t){var e=this.options;return this.disabled||_(t)||(e.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function(t){var e=this.options,i=this.dragBox,a=this.face;if(this.ready&&!this.disabled){var n=t===f,o=e.movable&&t===v;t=n||o?t:w,e.dragMode=t,wt(i,m,t),mt(i,h,n),mt(i,u,o),e.cropBoxMovable||(wt(a,m,t),mt(a,h,n),mt(a,u,o))}return this}},Pt=r.Cropper,It=function(){function i(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),!t||!Z.test(t.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=t,this.options=ht({},G,it(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return function(t,e,i){e&&a(t.prototype,e),i&&a(t,i)}(i,[{key:"init",value:function(){var t,e=this.element,i=e.tagName.toLowerCase();if(!e[l]){if(e[l]=this,"img"===i){if(this.isImg=!0,t=e.getAttribute("src")||"",!(this.originalUrl=t))return;t=e.src}else"canvas"===i&&window.HTMLCanvasElement&&(t=e.toDataURL());this.load(t)}}},{key:"load",value:function(t){var e=this;if(t){this.url=t,this.imageData={};var i=this.element,a=this.options;if(a.rotatable||a.scalable||(a.checkOrientation=!1),a.checkOrientation&&window.ArrayBuffer)if(Q.test(t))K.test(t)?this.read(function(t){var e=t.replace(Lt,""),i=atob(e),a=new ArrayBuffer(i.length),n=new Uint8Array(a);return rt(n,function(t,e){n[e]=i.charCodeAt(e)}),a}(t)):this.clone();else{var n=new XMLHttpRequest,o=this.clone.bind(this);this.reloading=!0,(this.xhr=n).onabort=o,n.onerror=o,n.ontimeout=o,n.onprogress=function(){n.getResponseHeader("content-type")!==q&&n.abort()},n.onload=function(){e.read(n.response)},n.onloadend=function(){e.reloading=!1,e.xhr=null},a.checkCrossOrigin&&Ot(t)&&i.crossOrigin&&(t=Tt(t)),n.open("GET",t),n.responseType="arraybuffer",n.withCredentials="use-credentials"===i.crossOrigin,n.send()}else this.clone()}}},{key:"read",value:function(t){var e=this.options,i=this.imageData,a=zt(t),n=0,o=1,r=1;if(1<a){this.url=function(t,e){for(var i=[],a=new Uint8Array(t);0<a.length;)i.push(Ht.apply(null,ot(a.subarray(0,8192)))),a=a.subarray(8192);return"data:".concat(e,";base64,").concat(btoa(i.join("")))}(t,q);var h=function(t){var e=0,i=1,a=1;switch(t){case 2:i=-1;break;case 3:e=-180;break;case 4:a=-1;break;case 5:e=90,a=-1;break;case 6:e=90;break;case 7:e=90,i=-1;break;case 8:e=-90}return{rotate:e,scaleX:i,scaleY:a}}(a);n=h.rotate,o=h.scaleX,r=h.scaleY}e.rotatable&&(i.rotate=n),e.scalable&&(i.scaleX=o,i.scaleY=r),this.clone()}},{key:"clone",value:function(){var t=this.element,e=this.url,i=t.crossOrigin,a=e;this.options.checkCrossOrigin&&Ot(e)&&(i=i||"anonymous",a=Tt(e)),this.crossOrigin=i,this.crossOriginUrl=a;var n=document.createElement("img");i&&(n.crossOrigin=i),n.src=a||e,n.alt=t.alt||"The image to crop",(this.image=n).onload=this.start.bind(this),n.onerror=this.stop.bind(this),pt(n,d),t.parentNode.insertBefore(n,t.nextSibling)}},{key:"start",value:function(){var i=this,t=this.image;t.onload=null,t.onerror=null,this.sizing=!0;function e(t,e){ht(i.imageData,{naturalWidth:t,naturalHeight:e,aspectRatio:t/e}),i.sizing=!1,i.sized=!0,i.build()}var a=r.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(r.navigator.userAgent);if(!t.naturalWidth||a){var n=document.createElement("img"),o=document.body||document.documentElement;(this.sizingImage=n).onload=function(){e(n.width,n.height),a||o.removeChild(n)},n.src=t.src,a||(n.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;",o.appendChild(n))}else e(t.naturalWidth,t.naturalHeight)}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){if(this.sized&&!this.ready){var t=this.element,e=this.options,i=this.image,a=t.parentNode,n=document.createElement("div");n.innerHTML='<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>';var o=n.querySelector(".".concat(l,"-container")),r=o.querySelector(".".concat(l,"-canvas")),h=o.querySelector(".".concat(l,"-drag-box")),s=o.querySelector(".".concat(l,"-crop-box")),c=s.querySelector(".".concat(l,"-face"));this.container=a,this.cropper=o,this.canvas=r,this.dragBox=h,this.cropBox=s,this.viewBox=o.querySelector(".".concat(l,"-view-box")),this.face=c,r.appendChild(i),pt(t,X),a.insertBefore(o,t.nextSibling),this.isImg||ut(i,d),this.initPreview(),this.bind(),e.initialAspectRatio=Math.max(0,e.initialAspectRatio)||NaN,e.aspectRatio=Math.max(0,e.aspectRatio)||NaN,e.viewMode=Math.max(0,Math.min(3,Math.round(e.viewMode)))||0,pt(s,X),e.guides||pt(s.getElementsByClassName("".concat(l,"-dashed")),X),e.center||pt(s.getElementsByClassName("".concat(l,"-center")),X),e.background&&pt(o,"".concat(l,"-bg")),e.highlight||pt(c,p),e.cropBoxMovable&&(pt(c,u),wt(c,m,D)),e.cropBoxResizable||(pt(s.getElementsByClassName("".concat(l,"-line")),X),pt(s.getElementsByClassName("".concat(l,"-point")),X)),this.render(),this.ready=!0,this.setDragMode(e.dragMode),e.autoCrop&&this.crop(),this.setData(e.data),at(e.ready)&&Mt(t,I,e.ready,{once:!0}),Ct(t,I)}}},{key:"unbuild",value:function(){this.ready&&(this.ready=!1,this.unbind(),this.resetPreview(),this.cropper.parentNode.removeChild(this.cropper),ut(this.element,X))}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}],[{key:"noConflict",value:function(){return window.Cropper=Pt,i}},{key:"setDefaults",value:function(t){ht(G,it(t)&&t)}}]),i}();return ht(It.prototype,Yt,Xt,Rt,St,At,jt),It});


--------------------------------------------------------------------------------
/demo/image_cropper/cropperjs-1.5.6/README.md:
--------------------------------------------------------------------------------
   1 | # Cropper.js
   2 | 
   3 | [![Build Status](https://img.shields.io/travis/fengyuanchen/cropperjs.svg)](https://travis-ci.org/fengyuanchen/cropperjs) [![Downloads](https://img.shields.io/npm/dm/cropperjs.svg)](https://www.npmjs.com/package/cropperjs) [![Version](https://img.shields.io/npm/v/cropperjs.svg)](https://www.npmjs.com/package/cropperjs)
   4 | 
   5 | > JavaScript image cropper.
   6 | 
   7 | - [Website](https://fengyuanchen.github.io/cropperjs)
   8 | - [Photo Editor](https://fengyuanchen.github.io/photo-editor) - An advanced example of Cropper.js.
   9 | - [jquery-cropper](https://github.com/fengyuanchen/jquery-cropper) - A jQuery plugin wrapper for Cropper.js.
  10 | 
  11 | ## Table of contents
  12 | 
  13 | - [Features](#features)
  14 | - [Main](#main)
  15 | - [Getting started](#getting-started)
  16 | - [Options](#options)
  17 | - [Methods](#methods)
  18 | - [Events](#events)
  19 | - [No conflict](#no-conflict)
  20 | - [Browser support](#browser-support)
  21 | - [Contributing](#contributing)
  22 | - [Versioning](#versioning)
  23 | - [License](#license)
  24 | 
  25 | ## Features
  26 | 
  27 | - Supports 39 [options](#options)
  28 | - Supports 27 [methods](#methods)
  29 | - Supports 6 [events](#events)
  30 | - Supports touch (mobile)
  31 | - Supports zooming
  32 | - Supports rotating
  33 | - Supports scaling (flipping)
  34 | - Supports multiple croppers
  35 | - Supports to crop on a canvas
  36 | - Supports to crop an image in the browser-side by canvas
  37 | - Supports to translate Exif Orientation information
  38 | - Cross-browser support
  39 | 
  40 | ## Main
  41 | 
  42 | ```text
  43 | dist/
  44 | ├── cropper.css
  45 | ├── cropper.min.css   (compressed)
  46 | ├── cropper.js        (UMD)
  47 | ├── cropper.min.js    (UMD, compressed)
  48 | ├── cropper.common.js (CommonJS, default)
  49 | └── cropper.esm.js    (ES Module)
  50 | ```
  51 | 
  52 | ## Getting started
  53 | 
  54 | ### Installation
  55 | 
  56 | ```shell
  57 | npm install cropperjs
  58 | ```
  59 | 
  60 | In browser:
  61 | 
  62 | ```html
  63 | <link  href="/path/to/cropper.css" rel="stylesheet">
  64 | <script src="/path/to/cropper.js"></script>
  65 | ```
  66 | 
  67 | The [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).
  68 | 
  69 | ### Usage
  70 | 
  71 | #### Syntax
  72 | 
  73 | ```js
  74 | new Cropper(element[, options])
  75 | ```
  76 | 
  77 | - **element**
  78 |   - Type: `HTMLImageElement` or `HTMLCanvasElement`
  79 |   - The target image or canvas element for cropping.
  80 | 
  81 | - **options** (optional)
  82 |   - Type: `Object`
  83 |   - The options for cropping. Check out the available [options](#options).
  84 | 
  85 | #### Example
  86 | 
  87 | ```html
  88 | <!-- Wrap the image or canvas element with a block element (container) -->
  89 | <div>
  90 |   <img id="image" src="picture.jpg">
  91 | </div>
  92 | ```
  93 | 
  94 | ```css
  95 | /* Limit image width to avoid overflow the container */
  96 | img {
  97 |   max-width: 100%; /* This rule is very important, please do not ignore this! */
  98 | }
  99 | ```
 100 | 
 101 | ```js
 102 | // import 'cropperjs/dist/cropper.css';
 103 | import Cropper from 'cropperjs';
 104 | 
 105 | const image = document.getElementById('image');
 106 | const cropper = new Cropper(image, {
 107 |   aspectRatio: 16 / 9,
 108 |   crop(event) {
 109 |     console.log(event.detail.x);
 110 |     console.log(event.detail.y);
 111 |     console.log(event.detail.width);
 112 |     console.log(event.detail.height);
 113 |     console.log(event.detail.rotate);
 114 |     console.log(event.detail.scaleX);
 115 |     console.log(event.detail.scaleY);
 116 |   },
 117 | });
 118 | ```
 119 | 
 120 | #### FAQ
 121 | 
 122 | How to crop a new area after zoom in or zoom out?
 123 | 
 124 | > Just double click your mouse to enter crop mode.
 125 | 
 126 | How to move the image after cropping an area?
 127 | 
 128 | > Just double click your mouse to enter move mode.
 129 | 
 130 | How to fix aspect ratio in free ratio mode?
 131 | 
 132 | > Just hold the `shift` key when you resize the crop box.
 133 | 
 134 | How to crop a square area in free ratio mode?
 135 | 
 136 | > Just hold the `shift` key when you crop on the image.
 137 | 
 138 | #### Notes
 139 | 
 140 | - 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**.
 141 |   > 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.
 142 | 
 143 | - The outputted cropped data is based on the original image size, so you can use them to crop the image directly.
 144 | 
 145 | - 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)).
 146 | 
 147 | #### Known issues
 148 | 
 149 | - [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.
 150 | 
 151 | - Known image size increase: When exporting the cropped image on 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 type the original image's 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.
 152 | 
 153 | [⬆ back to top](#table-of-contents)
 154 | 
 155 | ## Options
 156 | 
 157 | You may set cropper options with `new Cropper(image, options)`.
 158 | If you want to change the global default options, You may use `Cropper.setDefaults(options)`.
 159 | 
 160 | ### viewMode
 161 | 
 162 | - Type: `Number`
 163 | - Default: `0`
 164 | - Options:
 165 |   - `0`: no restrictions
 166 |   - `1`: restrict the crop box to not exceed the size of the canvas.
 167 |   - `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.
 168 |   - `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.
 169 | 
 170 | 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. A `viewMode` of `2` or `3` will additionally restrict the canvas to the container. Note that if the proportions of the canvas and the container are the same, there is no difference between `2` and `3`.
 171 | 
 172 | ### dragMode
 173 | 
 174 | - Type: `String`
 175 | - Default: `'crop'`
 176 | - Options:
 177 |   - `'crop'`: create a new crop box
 178 |   - `'move'`: move the canvas
 179 |   - `'none'`: do nothing
 180 | 
 181 | Define the dragging mode of the cropper.
 182 | 
 183 | ### initialAspectRatio
 184 | 
 185 | - Type: `Number`
 186 | - Default: `NaN`
 187 | 
 188 | Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper).
 189 | 
 190 | > Only available when the `aspectRatio` option is set to `NaN`.
 191 | 
 192 | ### aspectRatio
 193 | 
 194 | - Type: `Number`
 195 | - Default: `NaN`
 196 | 
 197 | Define the fixed aspect ratio of the crop box. By default, the crop box is free ratio.
 198 | 
 199 | ### data
 200 | 
 201 | - Type: `Object`
 202 | - Default: `null`
 203 | 
 204 | The previous cropped data if you had stored, will be passed to `setData` method automatically when initialized. Only available when the `autoCrop` option is set to `true`.
 205 | 
 206 | ### preview
 207 | 
 208 | - Type: `Element`, `Array` (elements), `NodeList` or `String` (selector)
 209 | - Default: `''`
 210 | - 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)
 211 | 
 212 | Add extra elements (containers) for preview.
 213 | 
 214 | **Notes:**
 215 | 
 216 | - The maximum width is the initial width of the preview container.
 217 | - The maximum height is the initial height of the preview container.
 218 | - If you set an `aspectRatio` option, be sure to set the same aspect ratio to the preview container.
 219 | - If the preview is not getting properly displayed, set `overflow: hidden` style to the preview container.
 220 | 
 221 | ### responsive
 222 | 
 223 | - Type: `Boolean`
 224 | - Default: `true`
 225 | 
 226 | Re-render the cropper when resizing the window.
 227 | 
 228 | ### restore
 229 | 
 230 | - Type: `Boolean`
 231 | - Default: `true`
 232 | 
 233 | Restore the cropped area after resizing the window.
 234 | 
 235 | ### checkCrossOrigin
 236 | 
 237 | - Type: `Boolean`
 238 | - Default: `true`
 239 | 
 240 | Check if the current image is a cross-origin image.
 241 | 
 242 | If it is, when clone the image, a `crossOrigin` attribute will be added to the cloned image element and a timestamp will be added to the `src` attribute to reload the source image to avoid browser cache error.
 243 | 
 244 | By adding `crossOrigin` attribute to image element will stop adding timestamp to image URL and stop reload of image, but the request (XMLHttpRequest) to read the image data for orientation checking will require a timestamp to bust cache to avoid browser cache error now, you can set the `checkOrientation` option to `false` to cancel this request.
 245 | 
 246 | If the value of the image's `crossOrigin` attribute is `"use-credentials"`, then the `withCredentials` attribute will set to `true` when read the image data by XMLHttpRequest.
 247 | 
 248 | ### checkOrientation
 249 | 
 250 | - Type: `Boolean`
 251 | - Default: `true`
 252 | 
 253 | Check the current image's Exif Orientation information. Note that only a JPEG image may contains Exif Orientation information.
 254 | 
 255 | More exactly, read the Orientation value for rotating or flipping the image, and then override the Orientation value with `1` (the default value) to avoid some issues ([1](https://github.com/fengyuanchen/cropper/issues/120), [2](https://github.com/fengyuanchen/cropper/issues/509)) on iOS devices.
 256 | 
 257 | Requires to set both the `rotatable` and `scalable` options to `true` at the same time.
 258 | 
 259 | **Note:** Don't trust this all the time as some JPG images have incorrect (not standard) Orientation values.
 260 | 
 261 | > Requires [Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) support ([IE 10+](http://caniuse.com/typedarrays)).
 262 | 
 263 | ### modal
 264 | 
 265 | - Type: `Boolean`
 266 | - Default: `true`
 267 | 
 268 | Show the black modal above the image and under the crop box.
 269 | 
 270 | ### guides
 271 | 
 272 | - Type: `Boolean`
 273 | - Default: `true`
 274 | 
 275 | Show the dashed lines above the crop box.
 276 | 
 277 | ### center
 278 | 
 279 | - Type: `Boolean`
 280 | - Default: `true`
 281 | 
 282 | Show the center indicator above the crop box.
 283 | 
 284 | ### highlight
 285 | 
 286 | - Type: `Boolean`
 287 | - Default: `true`
 288 | 
 289 | Show the white modal above the crop box (highlight the crop box).
 290 | 
 291 | ### background
 292 | 
 293 | - Type: `Boolean`
 294 | - Default: `true`
 295 | 
 296 | Show the grid background of the container.
 297 | 
 298 | ### autoCrop
 299 | 
 300 | - Type: `Boolean`
 301 | - Default: `true`
 302 | 
 303 | Enable to crop the image automatically when initialized.
 304 | 
 305 | ### autoCropArea
 306 | 
 307 | - Type: `Number`
 308 | - Default: `0.8` (80% of the image)
 309 | 
 310 | A number between 0 and 1. Define the automatic cropping area size (percentage).
 311 | 
 312 | ### movable
 313 | 
 314 | - Type: `Boolean`
 315 | - Default: `true`
 316 | 
 317 | Enable to move the image.
 318 | 
 319 | ### rotatable
 320 | 
 321 | - Type: `Boolean`
 322 | - Default: `true`
 323 | 
 324 | Enable to rotate the image.
 325 | 
 326 | ### scalable
 327 | 
 328 | - Type: `Boolean`
 329 | - Default: `true`
 330 | 
 331 | Enable to scale the image.
 332 | 
 333 | ### zoomable
 334 | 
 335 | - Type: `Boolean`
 336 | - Default: `true`
 337 | 
 338 | Enable to zoom the image.
 339 | 
 340 | ### zoomOnTouch
 341 | 
 342 | - Type: `Boolean`
 343 | - Default: `true`
 344 | 
 345 | Enable to zoom the image by dragging touch.
 346 | 
 347 | ### zoomOnWheel
 348 | 
 349 | - Type: `Boolean`
 350 | - Default: `true`
 351 | 
 352 | Enable to zoom the image by wheeling mouse.
 353 | 
 354 | ### wheelZoomRatio
 355 | 
 356 | - Type: `Number`
 357 | - Default: `0.1`
 358 | 
 359 | Define zoom ratio when zooming the image by wheeling mouse.
 360 | 
 361 | ### cropBoxMovable
 362 | 
 363 | - Type: `Boolean`
 364 | - Default: `true`
 365 | 
 366 | Enable to move the crop box by dragging.
 367 | 
 368 | ### cropBoxResizable
 369 | 
 370 | - Type: `Boolean`
 371 | - Default: `true`
 372 | 
 373 | Enable to resize the crop box by dragging.
 374 | 
 375 | ### toggleDragModeOnDblclick
 376 | 
 377 | - Type: `Boolean`
 378 | - Default: `true`
 379 | 
 380 | Enable to toggle drag mode between "crop" and "move" when clicking twice on the cropper.
 381 | 
 382 | > Requires [`dblclick`](https://developer.mozilla.org/en-US/docs/Web/Events/dblclick) event support.
 383 | 
 384 | ### minContainerWidth
 385 | 
 386 | - Type: `Number`
 387 | - Default: `200`
 388 | 
 389 | The minimum width of the container.
 390 | 
 391 | ### minContainerHeight
 392 | 
 393 | - Type: `Number`
 394 | - Default: `100`
 395 | 
 396 | The minimum height of the container.
 397 | 
 398 | ### minCanvasWidth
 399 | 
 400 | - Type: `Number`
 401 | - Default: `0`
 402 | 
 403 | The minimum width of the canvas (image wrapper).
 404 | 
 405 | ### minCanvasHeight
 406 | 
 407 | - Type: `Number`
 408 | - Default: `0`
 409 | 
 410 | The minimum height of the canvas (image wrapper).
 411 | 
 412 | ### minCropBoxWidth
 413 | 
 414 | - Type: `Number`
 415 | - Default: `0`
 416 | 
 417 | The minimum width of the crop box.
 418 | 
 419 | **Note:** This size is relative to the page, not the image.
 420 | 
 421 | ### minCropBoxHeight
 422 | 
 423 | - Type: `Number`
 424 | - Default: `0`
 425 | 
 426 | The minimum height of the crop box.
 427 | 
 428 | **Note:** This size is relative to the page, not the image.
 429 | 
 430 | ### ready
 431 | 
 432 | - Type: `Function`
 433 | - Default: `null`
 434 | 
 435 | A shortcut of the `ready` event.
 436 | 
 437 | ### cropstart
 438 | 
 439 | - Type: `Function`
 440 | - Default: `null`
 441 | 
 442 | A shortcut of the `cropstart` event.
 443 | 
 444 | ### cropmove
 445 | 
 446 | - Type: `Function`
 447 | - Default: `null`
 448 | 
 449 | A shortcut of the `cropmove` event.
 450 | 
 451 | ### cropend
 452 | 
 453 | - Type: `Function`
 454 | - Default: `null`
 455 | 
 456 | A shortcut of the `cropend` event.
 457 | 
 458 | ### crop
 459 | 
 460 | - Type: `Function`
 461 | - Default: `null`
 462 | 
 463 | A shortcut of the `crop` event.
 464 | 
 465 | ### zoom
 466 | 
 467 | - Type: `Function`
 468 | - Default: `null`
 469 | 
 470 | A shortcut of the `zoom` event.
 471 | 
 472 | [⬆ back to top](#table-of-contents)
 473 | 
 474 | ## Methods
 475 | 
 476 | As there is an **asynchronous** process when loading the image, you **should call most of the methods after ready**, except "setAspectRatio", "replace" and "destroy".
 477 | 
 478 | > If a method doesn't need to return any value, it will return the cropper instance (`this`) for chain composition.
 479 | 
 480 | ```js
 481 | new Cropper(image, {
 482 |   ready() {
 483 |     // this.cropper[method](argument1, , argument2, ..., argumentN);
 484 |     this.cropper.move(1, -1);
 485 | 
 486 |     // Allows chain composition
 487 |     this.cropper.move(1, -1).rotate(45).scale(1, -1);
 488 |   },
 489 | });
 490 | ```
 491 | 
 492 | ### crop()
 493 | 
 494 | Show the crop box manually.
 495 | 
 496 | ```js
 497 | new Cropper(image, {
 498 |   autoCrop: false,
 499 |   ready() {
 500 |     // Do something here
 501 |     // ...
 502 | 
 503 |     // And then
 504 |     this.cropper.crop();
 505 |   },
 506 | });
 507 | ```
 508 | 
 509 | ### reset()
 510 | 
 511 | Reset the image and crop box to their initial states.
 512 | 
 513 | ### clear()
 514 | 
 515 | Clear the crop box.
 516 | 
 517 | ### replace(url[, hasSameSize])
 518 | 
 519 | - **url**:
 520 |   - Type: `String`
 521 |   - A new image url.
 522 | 
 523 | - **hasSameSize** (optional):
 524 |   - Type: `Boolean`
 525 |   - Default: `false`
 526 |   - If the new image has the same size as the old one, then it will not rebuild the cropper and only update the URLs of all related images. This can be used for applying filters.
 527 | 
 528 | Replace the image's src and rebuild the cropper.
 529 | 
 530 | ### enable()
 531 | 
 532 | Enable (unfreeze) the cropper.
 533 | 
 534 | ### disable()
 535 | 
 536 | Disable (freeze) the cropper.
 537 | 
 538 | ### destroy()
 539 | 
 540 | Destroy the cropper and remove the instance from the image.
 541 | 
 542 | ### move(offsetX[, offsetY])
 543 | 
 544 | - **offsetX**:
 545 |   - Type: `Number`
 546 |   - Moving size (px) in the horizontal direction.
 547 | 
 548 | - **offsetY** (optional):
 549 |   - Type: `Number`
 550 |   - Moving size (px) in the vertical direction.
 551 |   - If not present, its default value is `offsetX`.
 552 | 
 553 | Move the canvas (image wrapper) with relative offsets.
 554 | 
 555 | ```js
 556 | cropper.move(1);
 557 | cropper.move(1, 0);
 558 | cropper.move(0, -1);
 559 | ```
 560 | 
 561 | ### moveTo(x[, y])
 562 | 
 563 | - **x**:
 564 |   - Type: `Number`
 565 |   - The `left` value of the canvas
 566 | 
 567 | - **y** (optional):
 568 |   - Type: `Number`
 569 |   - The `top` value of the canvas
 570 |   - If not present, its default value is `x`.
 571 | 
 572 | Move the canvas (image wrapper) to an absolute point.
 573 | 
 574 | ### zoom(ratio)
 575 | 
 576 | - **ratio**:
 577 |   - Type: `Number`
 578 |   - Zoom in: requires a positive number (ratio > 0)
 579 |   - Zoom out: requires a negative number (ratio < 0)
 580 | 
 581 | Zoom the canvas (image wrapper) with a relative ratio.
 582 | 
 583 | ```js
 584 | cropper.zoom(0.1);
 585 | cropper.zoom(-0.1);
 586 | ```
 587 | 
 588 | ### zoomTo(ratio[, pivot])
 589 | 
 590 | - **ratio**:
 591 |   - Type: `Number`
 592 |   - Requires a positive number (ratio > 0)
 593 | 
 594 | - **pivot** (optional):
 595 |   - Type: `Object`
 596 |   - Schema: `{ x: Number, y: Number }`
 597 |   - The coordinate of the center point for zooming, base on the top left corner of the cropper container.
 598 | 
 599 | Zoom the canvas (image wrapper) to an absolute ratio.
 600 | 
 601 | ```js
 602 | cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)
 603 | 
 604 | const containerData = cropper.getContainerData();
 605 | 
 606 | // Zoom to 50% from the center of the container.
 607 | cropper.zoomTo(.5, {
 608 |   x: containerData.width / 2,
 609 |   y: containerData.height / 2,
 610 | });
 611 | ```
 612 | 
 613 | ### rotate(degree)
 614 | 
 615 | - **degree**:
 616 |   - Type: `Number`
 617 |   - Rotate right: requires a positive number (degree > 0)
 618 |   - Rotate left: requires a negative number (degree < 0)
 619 | 
 620 | Rotate the image with a relative degree.
 621 | 
 622 | > Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 623 | 
 624 | ```js
 625 | cropper.rotate(90);
 626 | cropper.rotate(-90);
 627 | ```
 628 | 
 629 | ### rotateTo(degree)
 630 | 
 631 | - **degree**:
 632 |   - Type: `Number`
 633 | 
 634 | Rotate the image to an absolute degree.
 635 | 
 636 | ### scale(scaleX[, scaleY])
 637 | 
 638 | - **scaleX**:
 639 |   - Type: `Number`
 640 |   - Default: `1`
 641 |   - The scaling factor to apply to the abscissa of the image.
 642 |   - When equal to `1` it does nothing.
 643 | 
 644 | - **scaleY** (optional):
 645 |   - Type: `Number`
 646 |   - The scaling factor to apply on the ordinate of the image.
 647 |   - If not present, its default value is `scaleX`.
 648 | 
 649 | Scale the image.
 650 | 
 651 | > Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 652 | 
 653 | ```js
 654 | cropper.scale(-1); // Flip both horizontal and vertical
 655 | cropper.scale(-1, 1); // Flip horizontal
 656 | cropper.scale(1, -1); // Flip vertical
 657 | ```
 658 | 
 659 | ### scaleX(scaleX)
 660 | 
 661 | - **scaleX**:
 662 |   - Type: `Number`
 663 |   - Default: `1`
 664 |   - The scaling factor to apply to the abscissa of the image.
 665 |   - When equal to `1` it does nothing.
 666 | 
 667 | Scale the abscissa of the image.
 668 | 
 669 | ### scaleY(scaleY)
 670 | 
 671 | - **scaleY**:
 672 |   - Type: `Number`
 673 |   - Default: `1`
 674 |   - The scaling factor to apply on the ordinate of the image.
 675 |   - When equal to `1` it does nothing.
 676 | 
 677 | Scale the ordinate of the image.
 678 | 
 679 | ### getData([rounded])
 680 | 
 681 | - **rounded** (optional):
 682 |   - Type: `Boolean`
 683 |   - Default: `false`
 684 |   - Set `true` to get rounded values.
 685 | 
 686 | - (return value):
 687 |   - Type: `Object`
 688 |   - Properties:
 689 |     - `x`: the offset left of the cropped area
 690 |     - `y`: the offset top of the cropped area
 691 |     - `width`: the width of the cropped area
 692 |     - `height`: the height of the cropped area
 693 |     - `rotate`: the rotated degrees of the image
 694 |     - `scaleX`: the scaling factor to apply on the abscissa of the image
 695 |     - `scaleY`: the scaling factor to apply on the ordinate of the image
 696 | 
 697 | Output the final cropped area position and size data (base on the natural size of the original image).
 698 | 
 699 | > You can send the data to server-side to crop the image directly:
 700 | >
 701 | > 1. Rotate the image with the `rotate` property.
 702 | > 2. Scale the image with the `scaleX` and `scaleY` properties.
 703 | > 3. Crop the image with the `x`, `y`, `width` and `height` properties.
 704 | 
 705 | ![A schematic diagram for data's properties](docs/images/data.jpg)
 706 | 
 707 | ### setData(data)
 708 | 
 709 | - **data**:
 710 |   - Type: `Object`
 711 |   - Properties: See the [`getData`](#getdatarounded) method.
 712 |   - You may need to round the data properties before passing them in.
 713 | 
 714 | Change the cropped area position and size with new data (base on the original image).
 715 | 
 716 | > **Note:** This method only available when the value of the `viewMode` option is greater than or equal to `1`.
 717 | 
 718 | ### getContainerData()
 719 | 
 720 | - (return  value):
 721 |   - Type: `Object`
 722 |   - Properties:
 723 |     - `width`: the current width of the container
 724 |     - `height`: the current height of the container
 725 | 
 726 | Output the container size data.
 727 | 
 728 | ![A schematic diagram for cropper's layers](docs/images/layers.jpg)
 729 | 
 730 | ### getImageData()
 731 | 
 732 | - (return  value):
 733 |   - Type: `Object`
 734 |   - Properties:
 735 |     - `left`: the offset left of the image
 736 |     - `top`: the offset top of the image
 737 |     - `width`: the width of the image
 738 |     - `height`: the height of the image
 739 |     - `naturalWidth`: the natural width of the image
 740 |     - `naturalHeight`: the natural height of the image
 741 |     - `aspectRatio`: the aspect ratio of the image
 742 |     - `rotate`: the rotated degrees of the image if rotated
 743 |     - `scaleX`: the scaling factor to apply on the abscissa of the image if scaled
 744 |     - `scaleY`: the scaling factor to apply on the ordinate of the image if scaled
 745 | 
 746 | Output the image position, size, and other related data.
 747 | 
 748 | ### getCanvasData()
 749 | 
 750 | - (return  value):
 751 |   - Type: `Object`
 752 |   - Properties:
 753 |     - `left`: the offset left of the canvas
 754 |     - `top`: the offset top of the canvas
 755 |     - `width`: the width of the canvas
 756 |     - `height`: the height of the canvas
 757 |     - `naturalWidth`: the natural width of the canvas (read only)
 758 |     - `naturalHeight`: the natural height of the canvas (read only)
 759 | 
 760 | Output the canvas (image wrapper) position and size data.
 761 | 
 762 | ```js
 763 | const imageData = cropper.getImageData();
 764 | const canvasData = cropper.getCanvasData();
 765 | 
 766 | if (imageData.rotate % 180 === 0) {
 767 |   console.log(canvasData.naturalWidth === imageData.naturalWidth);
 768 |   // > true
 769 | }
 770 | ```
 771 | 
 772 | ### setCanvasData(data)
 773 | 
 774 | - **data**:
 775 |   - Type: `Object`
 776 |   - Properties:
 777 |     - `left`: the new offset left of the canvas
 778 |     - `top`: the new offset top of the canvas
 779 |     - `width`: the new width of the canvas
 780 |     - `height`: the new height of the canvas
 781 | 
 782 | Change the canvas (image wrapper) position and size with new data.
 783 | 
 784 | ### getCropBoxData()
 785 | 
 786 | - (return  value):
 787 |   - Type: `Object`
 788 |   - Properties:
 789 |     - `left`: the offset left of the crop box
 790 |     - `top`: the offset top of the crop box
 791 |     - `width`: the width of the crop box
 792 |     - `height`: the height of the crop box
 793 | 
 794 | Output the crop box position and size data.
 795 | 
 796 | ### setCropBoxData(data)
 797 | 
 798 | - **data**:
 799 |   - Type: `Object`
 800 |   - Properties:
 801 |     - `left`: the new offset left of the crop box
 802 |     - `top`: the new offset top of the crop box
 803 |     - `width`: the new width of the crop box
 804 |     - `height`: the new height of the crop box
 805 | 
 806 | Change the crop box position and size with new data.
 807 | 
 808 | ### getCroppedCanvas([options])
 809 | 
 810 | - **options** (optional):
 811 |   - Type: `Object`
 812 |   - Properties:
 813 |     - `width`: the destination width of the output canvas.
 814 |     - `height`: the destination height of the output canvas.
 815 |     - `minWidth`: the minimum destination width of the output canvas, the default value is `0`.
 816 |     - `minHeight`: the minimum destination height of the output canvas, the default value is `0`.
 817 |     - `maxWidth`: the maximum destination width of the output canvas, the default value is `Infinity`.
 818 |     - `maxHeight`: the maximum destination height of the output canvas, the default value is `Infinity`.
 819 |     - `fillColor`: a color to fill any alpha values in the output canvas, the default value is `transparent`.
 820 |     - [`imageSmoothingEnabled`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled): set to change if images are smoothed (`true`, default) or not (`false`).
 821 |     - [`imageSmoothingQuality`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality): set the quality of image smoothing, one of "low" (default), "medium", or "high".
 822 | 
 823 | - (return  value):
 824 |   - Type: `HTMLCanvasElement`
 825 |   - A canvas drawn the cropped image.
 826 | 
 827 | - Notes:
 828 |   - The aspect ratio of the output canvas will be fitted to the aspect ratio of the crop box automatically.
 829 |   - If you intend to get a JPEG image from the output canvas, you should set the `fillColor` option first, if not, the transparent part in the JPEG image will become black by default.
 830 |   - Uses the Browser's native [canvas.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) API to do the compression work, which means it is **lossy compression**. For better image quality, you can upload the original image and the cropped data to a server and do the crop work on the server.
 831 | 
 832 | - Browser support:
 833 |   - Basic image: requires [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) support ([IE 9+](http://caniuse.com/canvas)).
 834 |   - Rotated image: requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)).
 835 |   - Cross-origin image: requires HTML5 [CORS settings attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) support ([IE 11+](http://caniuse.com/cors)).
 836 | 
 837 | Get a canvas drawn the cropped image (lossy compression). If it is not cropped, then returns a canvas drawn the whole image.
 838 | 
 839 | > After then, you can display the canvas as an image directly, or use [HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to get a Data URL, or use [HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) to get a blob and upload it to server with [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) if the browser supports these APIs.
 840 | 
 841 | Avoid to get a blank output image, you might need to set the `maxWidth` and `maxHeight` properties to limited numbers, because of [the size limits of a canvas element](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element).
 842 | 
 843 | ```js
 844 | cropper.getCroppedCanvas();
 845 | 
 846 | cropper.getCroppedCanvas({
 847 |   width: 160,
 848 |   height: 90,
 849 |   minWidth: 256,
 850 |   minHeight: 256,
 851 |   maxWidth: 4096,
 852 |   maxHeight: 4096,
 853 |   fillColor: '#fff',
 854 |   imageSmoothingEnabled: false,
 855 |   imageSmoothingQuality: 'high',
 856 | });
 857 | 
 858 | // Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
 859 | // The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.
 860 | cropper.getCroppedCanvas().toBlob((blob) => {
 861 |   const formData = new FormData();
 862 | 
 863 |   // Pass the image file name as the third parameter if necessary.
 864 |   formData.append('croppedImage', blob/*, 'example.png' */);
 865 | 
 866 |   // Use `jQuery.ajax` method for example
 867 |   $.ajax('/path/to/upload', {
 868 |     method: "POST",
 869 |     data: formData,
 870 |     processData: false,
 871 |     contentType: false,
 872 |     success() {
 873 |       console.log('Upload success');
 874 |     },
 875 |     error() {
 876 |       console.log('Upload error');
 877 |     },
 878 |   });
 879 | }/*, 'image/png' */);
 880 | ```
 881 | 
 882 | ### setAspectRatio(aspectRatio)
 883 | 
 884 | - **aspectRatio**:
 885 |   - Type: `Number`
 886 |   - Requires a positive number.
 887 | 
 888 | Change the aspect ratio of the crop box.
 889 | 
 890 | ### setDragMode([mode])
 891 | 
 892 | - **mode** (optional):
 893 |   - Type: `String`
 894 |   - Default: `'none'`
 895 |   - Options: `'none'`, `'crop'`, `'move'`
 896 | 
 897 | Change the drag mode.
 898 | 
 899 | **Tips:** You can toggle the "crop" and "move" mode by double click on the cropper.
 900 | 
 901 | [⬆ back to top](#table-of-contents)
 902 | 
 903 | ## Events
 904 | 
 905 | ### ready
 906 | 
 907 | This event fires when the target image has been loaded and the cropper instance is ready for operating.
 908 | 
 909 | ```js
 910 | let cropper;
 911 | 
 912 | image.addEventListener('ready', function () {
 913 |   console.log(this.cropper === cropper);
 914 |   // > true
 915 | });
 916 | 
 917 | cropper = new Cropper(image);
 918 | ```
 919 | 
 920 | ### cropstart
 921 | 
 922 | - **event.detail.originalEvent**:
 923 |   - Type: `Event`
 924 |   - Options: `mousedown`, `touchstart` and `pointerdown`
 925 | 
 926 | - **event.detail.action**:
 927 |   - Type: `String`
 928 |   - Options:
 929 |     - `'crop'`: create a new crop box
 930 |     - `'move'`: move the canvas (image wrapper)
 931 |     - `'zoom'`: zoom in / out the canvas (image wrapper) by touch.
 932 |     - `'e'`: resize the east side of the crop box
 933 |     - `'w'`: resize the west side of the crop box
 934 |     - `'s'`: resize the south side of the crop box
 935 |     - `'n'`: resize the north side of the crop box
 936 |     - `'se'`: resize the southeast side of the crop box
 937 |     - `'sw'`: resize the southwest side of the crop box
 938 |     - `'ne'`: resize the northeast side of the crop box
 939 |     - `'nw'`: resize the northwest side of the crop box
 940 |     - `'all'`: move the crop box (all directions)
 941 | 
 942 | This event fires when the canvas (image wrapper) or the crop box starts to change.
 943 | 
 944 | ```js
 945 | image.addEventListener('cropstart', (event) => {
 946 |   console.log(event.detail.originalEvent);
 947 |   console.log(event.detail.action);
 948 | });
 949 | ```
 950 | 
 951 | ### cropmove
 952 | 
 953 | - **event.detail.originalEvent**:
 954 |   - Type: `Event`
 955 |   - Options: `mousemove`, `touchmove` and `pointermove`.
 956 | 
 957 | - **event.detail.action**: the same as "cropstart".
 958 | 
 959 | This event fires when the canvas (image wrapper) or the crop box is changing.
 960 | 
 961 | ### cropend
 962 | 
 963 | - **event.detail.originalEvent**:
 964 |   - Type: `Event`
 965 |   - Options: `mouseup`, `touchend`, `touchcancel`, `pointerup` and `pointercancel`.
 966 | 
 967 | - **event.detail.action**: the same as "cropstart".
 968 | 
 969 | This event fires when the canvas (image wrapper) or the crop box stops to change.
 970 | 
 971 | ### crop
 972 | 
 973 | - **event.detail.x**
 974 | - **event.detail.y**
 975 | - **event.detail.width**
 976 | - **event.detail.height**
 977 | - **event.detail.rotate**
 978 | - **event.detail.scaleX**
 979 | - **event.detail.scaleY**
 980 | 
 981 | > About these properties, see the [`getData`](#getdatarounded) method.
 982 | 
 983 | This event fires when the canvas (image wrapper) or the crop box changed.
 984 | 
 985 | **Notes:**
 986 | 
 987 | - When the `autoCrop` option is set to `true`, a `crop` event will be triggered before the `ready` event.
 988 | - When the `data` option is set, another `crop` event will be triggered before the `ready` event.
 989 | 
 990 | ### zoom
 991 | 
 992 | - **event.detail.originalEvent**:
 993 |   - Type: `Event`
 994 |   - Options: `wheel`, `touchmove`.
 995 | 
 996 | - **event.detail.oldRatio**:
 997 |   - Type: `Number`
 998 |   - The old (current) ratio of the canvas
 999 | 
1000 | - **event.detail.ratio**:
1001 |   - Type: `Number`
1002 |   - The new (next) ratio of the canvas (`canvasData.width / canvasData.naturalWidth`)
1003 | 
1004 | This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).
1005 | 
1006 | ```js
1007 | image.addEventListener('zoom', (event) => {
1008 |   // Zoom in
1009 |   if (event.detail.ratio > event.detail.oldRatio) {
1010 |     event.preventDefault(); // Prevent zoom in
1011 |   }
1012 | 
1013 |   // Zoom out
1014 |   // ...
1015 | });
1016 | ```
1017 | 
1018 | [⬆ back to top](#table-of-contents)
1019 | 
1020 | ## No conflict
1021 | 
1022 | If you have to use another cropper with the same namespace, just call the `Cropper.noConflict` static method to revert to it.
1023 | 
1024 | ```html
1025 | <script src="other-cropper.js"></script>
1026 | <script src="cropper.js"></script>
1027 | <script>
1028 |   Cropper.noConflict();
1029 |   // Code that uses other `Cropper` can follow here.
1030 | </script>
1031 | ```
1032 | 
1033 | ## Browser support
1034 | 
1035 | - Chrome (latest)
1036 | - Firefox (latest)
1037 | - Safari (latest)
1038 | - Opera (latest)
1039 | - Edge (latest)
1040 | - Internet Explorer 9+
1041 | 
1042 | ## Contributing
1043 | 
1044 | Please read through our [contributing guidelines](.github/CONTRIBUTING.md).
1045 | 
1046 | ## Versioning
1047 | 
1048 | Maintained under the [Semantic Versioning guidelines](https://semver.org/).
1049 | 
1050 | ## License
1051 | 
1052 | [MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com)
1053 | 
1054 | ## Related projects
1055 | 
1056 | - [angular-cropperjs](https://github.com/matheusdavidson/angular-cropperjs) by @matheusdavidson
1057 | - [ember-cropperjs](https://github.com/danielthall/ember-cropperjs) by @danielthall
1058 | - [iron-cropper](https://github.com/safetychanger/iron-cropper) by @safetychanger
1059 | - [react-cropper](https://github.com/roadmanfong/react-cropper) by @roadmanfong
1060 | - [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs) by @Agontuk
1061 | 
1062 | [⬆ back to top](#table-of-contents)
1063 | 


--------------------------------------------------------------------------------
/SlashUploader/server/UploadFiles.aspx:
--------------------------------------------------------------------------------
   1 | <%@ Page Language="C#" ContentType="text/html" Debug="True" %>
   2 | 
   3 | <%@ Import Namespace="System.IO" %>
   4 | <%@ Import Namespace="System.Drawing" %>
   5 | <%@ Import Namespace="System.Drawing.Drawing2D" %>
   6 | <%@ Import Namespace="System.Security.AccessControl" %>
   7 | <%@ Import Namespace="System.Security.Principal" %>
   8 | <%
   9 | 
  10 | /*
  11 |  * SlashUploader - JS plugin - Version 1.5.9
  12 |  * http://slashuploader.com/
  13 |  * Copyright (c) 2018-present Slash Apps Development, http://slash.co.il/
  14 |  * Licensed under the MIT License [https://en.wikipedia.org/wiki/MIT_License]
  15 | */
  16 | 
  17 | Response.AppendHeader("Access-Control-Allow-Origin", "*");
  18 | 
  19 | string FileFolder = "./uploads/";
  20 | bool DoOverwriteFilename = false;
  21 | bool SaveFileWithGuidFilename = false;
  22 | String[] AllowedFilesTypes = {
  23 |     "jpg", "png", "gif", "jpeg", "bmp", "tiff", "webp", "jfif", // Images
  24 |     "3gp2", "3gpp", "3gpp2", "asf", "asx", "avi", "flv", "m4v", "mkv", "mov", "mpeg", "mpg", "mpe", "m1s", "mpa", "mp2", "m2a", "mp2v", "m2v", "m2s", "mp4", "ogg", "rm", "wmv", "mp4", "qt", "ogm", "vob", "webm", "787", // Videos
  25 |     "3gp", "act", "aiff", "aac", "alac", "amr", "atrac", "au", "awb", "dct", "dss", "dvf", "flac", "gsm", "iklax", "ivs", "m4a", "m4p", "mmf", "mp3", "mpc", "msv", "ogg", "opus", "raw", "tta", "vox", "wav", "wma", // Audios
  26 |     "txt", // plain Text
  27 |     "doc", "docb", "docm", "docx", "dot", "dotm", "dotx", "pdf", "pot", "potm", "potx", "ppam", "pps", "ppsx", "ppt", "pptm", "pptx", "sldm", "sldx", // Docs
  28 |     "csv", "xla", "xlam", "xll", "xlm", "xls","xlsb", "xslm", "xlsx", "xlt", "xltm", "xltx", "xlw" // Excel
  29 | };
  30 | 
  31 | StartUpload(FileFolder, DoOverwriteFilename, SaveFileWithGuidFilename, AllowedFilesTypes);
  32 | %>
  33 | <script runat="server">
  34 | 
  35 |     public static string MethodParamName = "upload_method";
  36 |     public static string RequestIdParamName = "request_id";
  37 |     public static string ChunkIndexParamName = "chunk_index";
  38 |     public static string TotalChunksParamName = "total_chunks";
  39 |     public static string IframeGatewayparamName = "iframe_gateway";
  40 |     public static string FileNameParamName = "file_name";
  41 |     public static string FileRotationParamName = "rotation";
  42 | 
  43 |     public static string ReturnFileNameParamName = "file_name";
  44 |     public static string ReturnFilePathParamName = "file_path";
  45 |     public static string ReturnErrorParamName = "error";
  46 | 
  47 |     public static string ResizeTypeParamName = "resize_type";
  48 |     public static string ResizeOutputWidthParamName = "resize_output_width";
  49 |     public static string ResizeOutputHeightParamName = "resize_output_height";
  50 | 
  51 | 
  52 |     //
  53 |     //
  54 |     //  Main Function
  55 |     //
  56 | 
  57 |     public static void StartUpload(string FileFolder, bool DoOverwriteFilename, bool SaveFileWithGuidFilename, String[] AllowedFilesTypes)
  58 |     {
  59 |         try
  60 |         {
  61 | 
  62 |             string GeneralError = GetGeneralError(FileFolder, AllowedFilesTypes);
  63 |             if (!string.IsNullOrEmpty(GeneralError))
  64 |             {
  65 |                 ResponseError(GeneralError);
  66 |             }
  67 |             else
  68 |             {
  69 |                 System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
  70 |                 string Method = PageInstance.Request[MethodParamName];
  71 |                 if (Method == "upload_chunk")
  72 |                 {
  73 |                     UploadChunk(FileFolder, DoOverwriteFilename, SaveFileWithGuidFilename);
  74 |                 }
  75 |                 else if (Method == "upload_through_iframe")
  76 |                 {
  77 |                     UploadThroughIframe(FileFolder, DoOverwriteFilename, SaveFileWithGuidFilename);
  78 |                 }
  79 |                 else if (Method == "upload_stream")
  80 |                 {
  81 |                     UploadStream(FileFolder, DoOverwriteFilename, SaveFileWithGuidFilename);
  82 |                 }
  83 |             }
  84 | 
  85 |         }
  86 |         catch (Exception e)
  87 |         {
  88 |             ResponseError(e);
  89 |         }
  90 |     }
  91 | 
  92 |     //
  93 |     //
  94 |     //  Endpoints
  95 |     //
  96 | 
  97 |     public static void CombineChunks(string FileFolder, bool DoOverwriteFilename, bool SaveFileWithGuidFilename)
  98 |     {
  99 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 100 |         string Rotation = PageInstance.Request[FileRotationParamName];
 101 |         string FileName = PageInstance.Request[FileNameParamName];
 102 |         string RequestId = PageInstance.Request[RequestIdParamName];
 103 |         int RotationInt = 0;
 104 |         int.TryParse(Rotation, out RotationInt);
 105 |         NameValueCollection CombinedFile = CombineFileChunks(FileName, FileFolder, RequestId, RotationInt, DoOverwriteFilename, SaveFileWithGuidFilename);
 106 |         CombinedFile = ProcessUploadedFile(FileFolder, CombinedFile);
 107 |         string FileDataJson = GetFileJson(CombinedFile);
 108 |         PageInstance.Response.Write(GetJsonResponse(FileDataJson));
 109 |     }
 110 | 
 111 |     public static void UploadChunk(string FileFolder, bool DoOverwriteFilename, bool SaveFileWithGuidFilename)
 112 |     {
 113 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 114 |         string FileName = PageInstance.Request[FileNameParamName];
 115 |         string RequestId = PageInstance.Request[RequestIdParamName];
 116 |         string ChunkIndex = PageInstance.Request[ChunkIndexParamName];
 117 |         string TotalChunks = PageInstance.Request[TotalChunksParamName];
 118 | 
 119 |         int ChunkIndexInt = -1;
 120 |         int.TryParse(ChunkIndex, out ChunkIndexInt);
 121 |         int TotalChunksInt = -1;
 122 |         int.TryParse(TotalChunks, out TotalChunksInt);
 123 |         if (ChunkIndexInt >= 0 && TotalChunksInt > 0)
 124 |         {
 125 |             string Folder = UploadFileChunk(FileName, FileFolder, RequestId, ChunkIndex);
 126 |             if (ChunkIndexInt + 1 == TotalChunksInt)
 127 |             {
 128 |                 CombineChunks(FileFolder, DoOverwriteFilename, SaveFileWithGuidFilename);
 129 |             }
 130 |             else
 131 |             {
 132 |                 PageInstance.Response.Write(GetJsonResponse(@"{""success"": ""1""}"));
 133 |             }
 134 |         }
 135 |     }
 136 | 
 137 |     public static void UploadThroughIframe(string FileFolder, bool DoOverwriteFilename, bool SaveFileWithGuidFilename)
 138 |     {
 139 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 140 |         string Rotation = PageInstance.Request[FileRotationParamName];
 141 |         string FileName = PageInstance.Request[FileNameParamName];
 142 |         string IframeGateway = PageInstance.Request[IframeGatewayparamName];
 143 |         string RequestId = PageInstance.Request[RequestIdParamName];
 144 |         int RotationInt = 0;
 145 |         string FilesReturnStr = "";
 146 |         string[] Rotations = null;
 147 |         if (!string.IsNullOrEmpty(Rotation))
 148 |         {
 149 |             Rotations = Rotation.Split(new string[] { "," }, StringSplitOptions.None);
 150 |         }
 151 |         for (int i = 0; i < PageInstance.Request.Files.Count; i++)
 152 |         {
 153 |             RotationInt = 0;
 154 |             if (Rotations != null && Rotations.Length > i)
 155 |             {
 156 |                 int.TryParse(Rotations[i], out RotationInt);
 157 |             }
 158 |             NameValueCollection UploadedResult = UploadPostedFile(FileName, FileFolder, i, RotationInt, DoOverwriteFilename, SaveFileWithGuidFilename);
 159 |             UploadedResult = ProcessUploadedFile(FileFolder, UploadedResult);
 160 |             string FileDataJson = GetFileJson(UploadedResult);
 161 |             FilesReturnStr += FileDataJson;
 162 |             if (i < PageInstance.Request.Files.Count - 1)
 163 |             {
 164 |                 FilesReturnStr += ",";
 165 |             }
 166 |         }
 167 |         string ResponseStr = GetIframeResponse(IframeGateway, RequestId, FilesReturnStr);
 168 |         PageInstance.Response.Write(ResponseStr);
 169 |     }
 170 | 
 171 |     public static void UploadStream(string FileFolder, bool DoOverwriteFilename, bool SaveFileWithGuidFilename)
 172 |     {
 173 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 174 |         string Rotation = PageInstance.Request[FileRotationParamName];
 175 |         string FileName = PageInstance.Request[FileNameParamName];
 176 |         int RotationInt = 0;
 177 |         int.TryParse(Rotation, out RotationInt);
 178 |         NameValueCollection UploadedResult = SaveFileFromStreamData(FileName, FileFolder, RotationInt, DoOverwriteFilename, SaveFileWithGuidFilename);
 179 |         UploadedResult = ProcessUploadedFile(FileFolder, UploadedResult);
 180 |         string FileDataJson = GetFileJson(UploadedResult);
 181 |         PageInstance.Response.Write(GetJsonResponse(FileDataJson));
 182 |     }
 183 | 
 184 |     public static bool ValidateFilesTypes(String[] AllowedFilesTypes)
 185 |     {
 186 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 187 |         string FileName = PageInstance.Request[FileNameParamName];
 188 |         bool FileTypeIsValid = true;
 189 |         if (!string.IsNullOrEmpty(FileName) && !IsFileTypeValid(FileName, AllowedFilesTypes))
 190 |         {
 191 |             FileTypeIsValid = false;
 192 |         }
 193 |         if (PageInstance.Request.Files != null)
 194 |         {
 195 |             for (int i = 0; i < PageInstance.Request.Files.Count; i++)
 196 |             {
 197 |                 HttpPostedFile PostedFile = PageInstance.Request.Files[i];
 198 |                 if (!IsFileTypeValid(PostedFile.FileName, AllowedFilesTypes))
 199 |                 {
 200 |                     FileTypeIsValid = false;
 201 |                 }
 202 |             }
 203 |         }
 204 |         return FileTypeIsValid;
 205 |     }
 206 | 
 207 |     private static NameValueCollection ProcessUploadedFile(string FileFolder, NameValueCollection UploadedFile)
 208 |     {
 209 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 210 | 
 211 |         ImageCropper Cropper = new ImageCropper();
 212 |         ImageCropper.ScaleMode.TryParse(PageInstance.Request[ResizeTypeParamName], out Cropper.ResizeType);
 213 |         if (Cropper.ResizeType != ImageCropper.ScaleMode.None)
 214 |         {
 215 |             Cropper.OutputWidth = Convert.ToInt32(PageInstance.Request[ResizeOutputWidthParamName]);
 216 |             Cropper.OutputHeight = Convert.ToInt32(PageInstance.Request[ResizeOutputHeightParamName]);
 217 |             Cropper.FileToCropPath = PageInstance.Server.MapPath(FileFolder + UploadedFile[ReturnFileNameParamName]);
 218 |             Cropper.NewFileToSavePath = PageInstance.Server.MapPath(FileFolder + UploadedFile[ReturnFileNameParamName]);
 219 |             string NewFileName = Cropper.Crop();
 220 | 
 221 |             NameValueCollection ReturnObj = new NameValueCollection();
 222 |             ReturnObj[ReturnFileNameParamName] = NewFileName;
 223 |             ReturnObj[ReturnFilePathParamName] = GetFileUrl(NewFileName, FileFolder);
 224 |             return ReturnObj;
 225 |         }
 226 |         else
 227 |         {
 228 |             return UploadedFile;
 229 |         }
 230 | 
 231 |     }
 232 | 
 233 |     //
 234 |     //
 235 |     //  Functions
 236 |     //
 237 | 
 238 |     public static string GetJsonResponse(string FileDataJson)
 239 |     {
 240 | 
 241 |         string ReturnStr = "";
 242 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 243 |         string JsonCallback = "";
 244 |         if (PageInstance.Request["callback"] != null && PageInstance.Request["callback"] != "")
 245 |         {
 246 |             JsonCallback = PageInstance.Request["callback"];
 247 |         }
 248 |         if (PageInstance.Request["jsoncallback"] != null && PageInstance.Request["jsoncallback"] != "")
 249 |         {
 250 |             JsonCallback = PageInstance.Request["jsoncallback"];
 251 |         }
 252 |         if (JsonCallback != null && JsonCallback != "")
 253 |         {
 254 |             ReturnStr += JsonCallback + "(";
 255 |         }
 256 |         if (!string.IsNullOrEmpty(FileDataJson))
 257 |         {
 258 |             ReturnStr += "[" + FileDataJson + "]";
 259 |         }
 260 |         if (JsonCallback != null && JsonCallback != "")
 261 |         {
 262 |             ReturnStr += ")";
 263 |         }
 264 |         return ReturnStr;
 265 | 
 266 |     }
 267 | 
 268 |     public static string GetIframeResponse(string IframeGateway, string RequestId, string DataJson)
 269 |     {
 270 | 
 271 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 272 |         string ReturnStr = "<html><body><iframe src='" + IframeGateway + "?" + RequestIdParamName + "=" + RequestId + "&data=" + PageInstance.Server.UrlEncode("[" + DataJson + "]") + "' id='gateway_iframe' style='width: 1px; height: 1px; opacity: 0; display: none;'></iframe></body></html>"; // TODO: Try it
 273 |         return ReturnStr;
 274 | 
 275 |     }
 276 | 
 277 |     public static string GetFileJson(NameValueCollection FileObject)
 278 |     {
 279 | 
 280 |         string FileJson = @"{
 281 |         """ + ReturnFileNameParamName + @""": """ + FileObject[ReturnFileNameParamName] + @""",
 282 |             """ + ReturnFilePathParamName + @""": """ + FileObject[ReturnFilePathParamName] + @""",
 283 |                 """ + ReturnErrorParamName + @""": """ + FileObject[ReturnErrorParamName] + @"""
 284 |     } ";
 285 |         return FileJson;
 286 | 
 287 |     }
 288 | 
 289 |     public static string GetGeneralError(string FileFolder, String[] AllowedFilesTypes)
 290 |     {
 291 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 292 |         if (!ValidateFilesTypes(AllowedFilesTypes))
 293 |         {
 294 |             return "File type is not allowed. The only allowed file types to upload are images, media, plain text and documents.";
 295 |         }
 296 |         else if (!Directory.Exists(PageInstance.Server.MapPath(FileFolder)))
 297 |         {
 298 |             return "Directory '" + PageInstance.Server.MapPath(FileFolder) + "' doesn't exist.";
 299 |         }
 300 |         else if (!DirectoryHasWritePermission(PageInstance.Server.MapPath(FileFolder)))
 301 |         {
 302 |             return "Directory '" + PageInstance.Server.MapPath(FileFolder) + "' doesn't have write permissions.";
 303 |         }
 304 |         return null;
 305 |     }
 306 | 
 307 |     public static bool DirectoryHasWritePermission(string DirectoryPath)
 308 |     {
 309 |         var AllowWrite = false;
 310 |         var DenyWrite = false;
 311 |         var AccessControlList = Directory.GetAccessControl(DirectoryPath);
 312 |         if (AccessControlList == null)
 313 |         {
 314 |             return false;
 315 |         }
 316 |         var AccessRules = AccessControlList.GetAccessRules(true, true, typeof(System.Security.Principal.NTAccount));
 317 |         if (AccessRules == null)
 318 |         {
 319 |             return false;
 320 |         }
 321 |         WindowsIdentity CurrentUser = WindowsIdentity.GetCurrent();
 322 |         WindowsPrincipal Principal = new WindowsPrincipal(CurrentUser);
 323 |         foreach (FileSystemAccessRule CurRule in AccessRules)
 324 |         {
 325 |             NTAccount CurNtAccount = CurRule.IdentityReference as NTAccount;
 326 |             if (CurNtAccount != null && (CurRule.FileSystemRights & FileSystemRights.Write) > 0)
 327 |             {
 328 |                 if (Principal.IsInRole(CurNtAccount.Value))
 329 |                 {
 330 |                     if (CurRule.AccessControlType == AccessControlType.Allow)
 331 |                     {
 332 |                         AllowWrite = true;
 333 |                     }
 334 |                     else if (CurRule.AccessControlType == AccessControlType.Deny)
 335 |                     {
 336 |                         DenyWrite = true;
 337 |                     }
 338 |                 }
 339 |             }
 340 |         }
 341 | 
 342 |         return AllowWrite && !DenyWrite;
 343 |     }
 344 | 
 345 |     public static void ResponseError(Exception Exp)
 346 |     {
 347 |         ResponseError(Exp.Message + " " + Exp.StackTrace);
 348 |     }
 349 | 
 350 |     public static void ResponseError(string ErrorString)
 351 |     {
 352 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 353 |         NameValueCollection ErrorResult = new NameValueCollection();
 354 |         ErrorResult[ReturnErrorParamName] = ParseJsonStringValue(ErrorString);
 355 |         string ErrorJson = GetFileJson(ErrorResult);
 356 |         string Method = PageInstance.Request[MethodParamName];
 357 |         if (Method == "upload_through_iframe")
 358 |         {
 359 |             string IframeGateway = PageInstance.Request[IframeGatewayparamName];
 360 |             string RequestId = PageInstance.Request[RequestIdParamName];
 361 |             PageInstance.Response.Write(GetIframeResponse(IframeGateway, RequestId, ErrorJson));
 362 |         }
 363 |         else
 364 |         {
 365 |             PageInstance.Response.Write(GetJsonResponse(ErrorJson));
 366 |         }
 367 |     }
 368 | 
 369 |     public static string UploadFileChunk(string FileName, string FileFolder, string RequestId, string ChunkIndex)
 370 |     {
 371 | 
 372 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 373 |         string FolderName = "temp_" + FileName + "_" + RequestId;
 374 |         if (!Directory.Exists(PageInstance.Server.MapPath(FileFolder + FolderName + "/")))
 375 |         {
 376 |             Directory.CreateDirectory(PageInstance.Server.MapPath(FileFolder + FolderName + "/"));
 377 |         }
 378 |         string FilePath = PageInstance.Server.MapPath(FileFolder + FolderName + "/");
 379 |         int ChunkIndexInt = 0;
 380 |         int.TryParse(ChunkIndex, out ChunkIndexInt);
 381 |         string ChunkIndexStr = ChunkIndexInt.ToString();
 382 |         while (ChunkIndexStr.Length < 40)
 383 |         {
 384 |             ChunkIndexStr = "0" + ChunkIndexStr;
 385 |         }
 386 |         string NewFilePath = Path.Combine(FilePath, ChunkIndexStr);
 387 |         /*
 388 |          * This code is slower
 389 |         using (System.IO.FileStream Fs = System.IO.File.Create(NewFilePath)) {
 390 |             byte[] Bytes = new byte[77570];
 391 |             int BytesRead;
 392 |             while ((BytesRead = PageInstance.Request.InputStream.Read(Bytes, 0, Bytes.Length)) > 0) {
 393 |                 Fs.Write(Bytes, 0, BytesRead);
 394 |             }
 395 |         }
 396 |         */
 397 |         byte[] FileData = PageInstance.Request.BinaryRead(PageInstance.Request.TotalBytes);
 398 |         File.Create(NewFilePath).Close();
 399 |         File.WriteAllBytes(NewFilePath, FileData);
 400 | 
 401 |         return FolderName;
 402 | 
 403 |     }
 404 | 
 405 |     public static NameValueCollection CombineFileChunks(string FileName, string FileFolder, string RequestId, int Rotation, bool DoOverwrite, bool SaveFileWithGuidFilename)
 406 |     {
 407 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 408 |         string FolderName = "temp_" + FileName + "_" + RequestId;
 409 |         string FilePath = PageInstance.Server.MapPath(FileFolder + FolderName + "/");
 410 |         string TempFileName = GetGuidFileName(FileName);
 411 |         string NewFilePath = Path.Combine(PageInstance.Server.MapPath(FileFolder), TempFileName);
 412 |         string[] FilePaths = Directory.GetFiles(FilePath);
 413 |         foreach (string Item in FilePaths)
 414 |         {
 415 |             MergeFileChunks(NewFilePath, Item);
 416 |         }
 417 |         if (Rotation > 0)
 418 |         {
 419 |             RotateImage(TempFileName, FileFolder, TempFileName, FileFolder, Rotation);
 420 |         }
 421 |         Directory.Delete(PageInstance.Server.MapPath(FileFolder + FolderName + "/"));
 422 |         string FileNameToSave = ParseFileName(FileName, FileFolder, DoOverwrite, SaveFileWithGuidFilename);
 423 |         System.IO.File.Move(PageInstance.Server.MapPath(FileFolder + TempFileName), PageInstance.Server.MapPath(FileFolder + FileNameToSave)); // Rename
 424 |         NameValueCollection ReturnObj = new NameValueCollection();
 425 |         ReturnObj[ReturnFileNameParamName] = FileNameToSave;
 426 |         ReturnObj[ReturnFilePathParamName] = GetFileUrl(FileNameToSave, FileFolder);
 427 |         return ReturnObj;
 428 | 
 429 |     }
 430 | 
 431 |     
 432 |     private static void MergeFileChunks(string File1, string File2)
 433 |     {
 434 |         using (var stream1 = new FileStream(File1, FileMode.Append, FileAccess.Write))
 435 |         using (var stream2 = new FileStream(File2, FileMode.Open, FileAccess.Read))
 436 |         {
 437 |             stream2.CopyTo(stream1);
 438 |         }
 439 | 
 440 |         File.Delete(File2);
 441 |     }
 442 | 
 443 |     private static NameValueCollection SaveFileFromStreamData(string FileName, string FileFolder, int Rotation, bool DoOverwrite, bool SaveFileWithGuidFilename)
 444 |     {
 445 | 
 446 |         NameValueCollection ReturnObj = new NameValueCollection();
 447 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 448 |         byte[] FileData = PageInstance.Request.BinaryRead(PageInstance.Request.TotalBytes);
 449 |         string TempFileName = GetGuidFileName(FileName);
 450 |         if (FileData.Length >= 0)
 451 |         {
 452 |             File.WriteAllBytes(PageInstance.Server.MapPath(FileFolder) + TempFileName, FileData);
 453 |             string Extension = GetFileExtension(FileName).ToLower();
 454 |             if ((Rotation != 0) && (Extension == "jpg" || Extension == "png" || Extension == "jpeg" || Extension == "bmp"))
 455 |             {
 456 |                 RotateImage(TempFileName, FileFolder, TempFileName, FileFolder, Rotation);
 457 |             }
 458 |             string FileNameToSave = ParseFileName(FileName, FileFolder, DoOverwrite, SaveFileWithGuidFilename);
 459 |             System.IO.File.Move(PageInstance.Server.MapPath(FileFolder + TempFileName), PageInstance.Server.MapPath(FileFolder + FileNameToSave)); // Rename
 460 |             ReturnObj[ReturnFileNameParamName] = FileNameToSave;
 461 |             ReturnObj[ReturnFilePathParamName] = GetFileUrl(FileNameToSave, FileFolder);
 462 | 
 463 |         }
 464 |         else
 465 |         {
 466 |             ReturnObj[ReturnErrorParamName] = "No stream data";
 467 |         }
 468 | 
 469 |         return ReturnObj;
 470 |     }
 471 | 
 472 |     private static NameValueCollection UploadPostedFile(string FileName, string FileFolder, int FileIndex, int Rotation, bool DoOverwrite, bool SaveFileWithGuidFilename)
 473 |     {
 474 | 
 475 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 476 |         HttpFileCollection Files = PageInstance.Request.Files;
 477 |         NameValueCollection ReturnObj = new NameValueCollection();
 478 | 
 479 |         if (Files.Count > FileIndex)
 480 |         {
 481 | 
 482 |             HttpPostedFile PostedFile = Files[FileIndex];
 483 |             if (String.IsNullOrEmpty(FileName))
 484 |             {
 485 |                 FileName = PostedFile.FileName;
 486 |             }
 487 |             string TempFileName = GetGuidFileName(FileName);
 488 |             string SaveLocation = PageInstance.Server.MapPath(FileFolder) + TempFileName;
 489 |             PostedFile.SaveAs(SaveLocation);
 490 |             if (Rotation > 0)
 491 |             {
 492 |                 RotateImage(TempFileName, FileFolder, TempFileName, FileFolder, Rotation);
 493 |             }
 494 |             string FileNameToSave = ParseFileName(FileName, FileFolder, DoOverwrite, SaveFileWithGuidFilename);
 495 |             System.IO.File.Move(PageInstance.Server.MapPath(FileFolder + TempFileName), PageInstance.Server.MapPath(FileFolder + FileNameToSave)); // Rename
 496 |             ReturnObj[ReturnFileNameParamName] = FileNameToSave;
 497 |             ReturnObj[ReturnFilePathParamName] = GetFileUrl(FileNameToSave, FileFolder);
 498 | 
 499 |         }
 500 |         else
 501 |         {
 502 |             ReturnObj[ReturnErrorParamName] = "File was not found";
 503 |         }
 504 |         return ReturnObj;
 505 |     }
 506 | 
 507 |     private static string GetGuidFileName(string FileName)
 508 |     {
 509 |         string Extension = "";
 510 |         if (FileName.LastIndexOf(".") != -1)
 511 |         {
 512 |             Extension = FileName.Substring(FileName.LastIndexOf("."), FileName.Length - FileName.LastIndexOf("."));
 513 |         }
 514 |         FileName = GetGuid();
 515 |         if (!string.IsNullOrEmpty(Extension))
 516 |         {
 517 |             FileName += Extension;
 518 |         }
 519 |         return FileName;
 520 |     }
 521 | 
 522 |     private static string ParseFileName(string FileName, string FileFolder, bool DoOverwrite, bool SaveFileWithGuidFilename)
 523 |     {
 524 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 525 |         if (!Directory.Exists(PageInstance.Server.MapPath(FileFolder)))
 526 |         {
 527 |             Directory.CreateDirectory(PageInstance.Server.MapPath(FileFolder));
 528 |         }
 529 |         if (SaveFileWithGuidFilename)
 530 |         {
 531 |             FileName = GetGuidFileName(FileName);
 532 |         }
 533 |         FileName = FileName.Replace("/", "")
 534 |             .Replace("\\", "")
 535 |             .Replace(":", "")
 536 |             .Replace("'", "")
 537 |             .Replace("+", "")
 538 |             .Replace("%", "")
 539 |             .Replace("#", "")
 540 |             .Replace(";", "")
 541 |             .Replace(">", "")
 542 |             .Replace("<", "")
 543 |             .Replace("/", "")
 544 |             .Replace("*", "")
 545 |             .Replace("%", "")
 546 |             .Replace("$", "")
 547 |             .Replace("|", "")
 548 |             .Replace("?", "")
 549 |             .Replace(@"""", "")
 550 |             .Replace("'", "")
 551 |             .Replace(" ", "_");
 552 | 
 553 |         while (FileName.Split('.').Length - 1 > 1) // As long as there is more then 1 dot, remove first dot
 554 |         {
 555 |             int DotIndex = FileName.IndexOf(".");
 556 |             FileName = (DotIndex < 0) ? FileName : FileName.Remove(DotIndex, 1);
 557 |         }
 558 | 
 559 | 
 560 |         if (string.IsNullOrEmpty(FileName))
 561 |         {
 562 |             FileName = GetGuid();
 563 |         }
 564 |         else if (FileName.StartsWith(".") && FileName.Split('.').Length <= 2)
 565 |         {
 566 |             FileName = GetGuid() + FileName;
 567 |         }
 568 |         if (!DoOverwrite)
 569 |         {
 570 |             FileName = GetNonOverwrittenFileName(FileName, FileFolder);
 571 |         }
 572 |         return FileName;
 573 | 
 574 |     }
 575 | 
 576 |     public static string GetFilePath(string Filename, string FileDir)
 577 |     {
 578 |         System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 579 |         if (PageInstance == null)
 580 |         {
 581 |             return FileDir + Filename;
 582 |         }
 583 |         else
 584 |         {
 585 |             return PageInstance.Server.MapPath(FileDir) + Filename;
 586 |         }
 587 |     }
 588 | 
 589 |     public static string GetNonOverwrittenFileName(string FileName, string FileFolder)
 590 |     {
 591 | 
 592 |         try
 593 |         {
 594 | 
 595 |             System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 596 |             string FilesNumberingType = "parenthesis";
 597 |             if (PageInstance.Request.Browser.Type.ToUpper().Contains("IE"))
 598 |             {
 599 |                 if (PageInstance.Request.Browser.MajorVersion <= 9)
 600 |                 {
 601 |                     FileName = FileName
 602 |                         .Replace("(", "-")
 603 |                         .Replace(")", "-");
 604 |                     FilesNumberingType = "underline";
 605 |                 }
 606 |             }
 607 | 
 608 |             string Extension = "";
 609 |             string CurFileName = FileName;
 610 |             if (FileName.LastIndexOf(".") != -1)
 611 |             {
 612 |                 Extension = FileName.Substring(FileName.LastIndexOf("."), FileName.Length - FileName.LastIndexOf("."));
 613 |                 CurFileName = FileName.Substring(0, FileName.LastIndexOf("."));
 614 |             }
 615 |             int CurNum = 0;
 616 |             while (System.IO.File.Exists(GetFilePath(FileName, FileFolder)))
 617 |             {
 618 |                 CurNum++;
 619 |                 if (FilesNumberingType == "parenthesis")
 620 |                 {
 621 |                     FileName = CurFileName + "(" + Convert.ToString(CurNum) + ")" + Extension;
 622 |                 }
 623 |                 else
 624 |                 {
 625 |                     FileName = CurFileName + "_" + Convert.ToString(CurNum) + Extension;
 626 |                 }
 627 |             }
 628 | 
 629 |         }
 630 |         catch (Exception e)
 631 |         {
 632 |         }
 633 |         return FileName;
 634 | 
 635 |     }
 636 | 
 637 |     public static string GetFileExtension(string FileName)
 638 |     {
 639 | 
 640 |         if (FileName != null)
 641 |         {
 642 |             if (FileName.LastIndexOf(".") != -1)
 643 |             {
 644 |                 string ReturnStr = FileName.Substring(FileName.LastIndexOf(".") + 1, FileName.Length - FileName.LastIndexOf(".") - 1);
 645 |                 return ReturnStr.ToLower();
 646 |             }
 647 |             else
 648 |             {
 649 |                 return "";
 650 |             }
 651 |         }
 652 |         else
 653 |         {
 654 |             return "";
 655 |         }
 656 | 
 657 |     }
 658 | 
 659 |     public static System.Drawing.Imaging.ImageFormat GetImageFormatByFileExtension(string FileName)
 660 |     {
 661 |         try
 662 |         {
 663 |             System.Drawing.Imaging.ImageFormat ImgFormat = System.Drawing.Imaging.ImageFormat.Png;
 664 |             string Extens = GetFileExtension(FileName);
 665 |             if (Extens == "jpg" || Extens == "jpeg")
 666 |             {
 667 |                 ImgFormat = System.Drawing.Imaging.ImageFormat.Jpeg;
 668 |             }
 669 |             else if (Extens == "bmp")
 670 |             {
 671 |                 ImgFormat = System.Drawing.Imaging.ImageFormat.Bmp;
 672 |             }
 673 |             return ImgFormat;
 674 |         }
 675 |         catch (Exception e)
 676 |         {
 677 |         }
 678 |         return null;
 679 |     }
 680 | 
 681 |     private static void RotateImage(string FileToRotateName, string FileToRotateFolder, string NewFileName, string NewFileFolder, int Rotation)
 682 |     {
 683 |         try
 684 |         {
 685 | 
 686 |             System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 687 |             ImageCropper.ScaleMode CurScaleMode = ImageCropper.ScaleMode.None;
 688 |             ImageCropper.ScaleMode.TryParse(PageInstance.Request[ResizeTypeParamName], out CurScaleMode);
 689 |             if (CurScaleMode != ImageCropper.ScaleMode.Manual)
 690 |             {
 691 |                 NewFileName = ParseFileName(NewFileName, NewFileFolder, true, false);
 692 |                 string DestanationImg = PageInstance.Server.MapPath(NewFileFolder + NewFileName);
 693 |                 System.Drawing.Image Image = System.Drawing.Image.FromFile(PageInstance.Server.MapPath(FileToRotateFolder) + Convert.ToString(FileToRotateName));
 694 | 
 695 |                 GraphicsPath Path = new GraphicsPath();
 696 |                 Path.AddRectangle(new RectangleF(0f, 0f, Image.Width, Image.Height));
 697 |                 Matrix Mtrx = new Matrix();
 698 |                 Mtrx.Rotate(Rotation);
 699 |                 RectangleF Rct = Path.GetBounds(Mtrx);
 700 | 
 701 |                 Bitmap Bmp = new Bitmap(Convert.ToInt32(Rct.Width), Convert.ToInt32(Rct.Height));
 702 | 
 703 |                 System.Drawing.Graphics Gr = System.Drawing.Graphics.FromImage(Bmp);
 704 |                 Gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
 705 |                 Gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
 706 |                 Gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
 707 | 
 708 |                 Gr.TranslateTransform(-Rct.X, -Rct.Y);
 709 |                 Gr.RotateTransform(Rotation);
 710 | 
 711 |                 System.Drawing.Rectangle RectDestination = new System.Drawing.Rectangle(0, 0, Convert.ToInt32(Gr.VisibleClipBounds.Width), Convert.ToInt32(Gr.VisibleClipBounds.Height));
 712 |                 Gr.DrawImage(Image, RectDestination, 0, 0, Convert.ToInt32(Gr.VisibleClipBounds.Width), Convert.ToInt32(Gr.VisibleClipBounds.Height), GraphicsUnit.Pixel);
 713 | 
 714 |                 Image.Dispose();
 715 |                 if (System.IO.File.Exists(DestanationImg))
 716 |                 {
 717 |                     System.IO.File.Delete(DestanationImg);
 718 |                 }
 719 |                 Bmp.Save(DestanationImg, GetImageFormatByFileExtension(NewFileName));
 720 |                 Bmp.Dispose();
 721 |             }
 722 | 
 723 |         }
 724 |         catch (Exception e)
 725 |         {
 726 |         }
 727 |     }
 728 | 
 729 |     public static string GetFileUrl(string FileName, string fileDir)
 730 |     {
 731 |         try
 732 |         {
 733 |             System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 734 |             if (PageInstance == null)
 735 |             {
 736 |                 return null;
 737 |             }
 738 |             string Str = "//" + PageInstance.Request.ServerVariables["SERVER_NAME"] + (new System.Web.UI.Control()).ResolveUrl(fileDir) + FileName;
 739 |             return Str;
 740 |         }
 741 |         catch (Exception)
 742 |         {
 743 |         }
 744 |         return null;
 745 |     }
 746 | 
 747 |     private static string ParseJsonStringValue(string Str)
 748 |     {
 749 | 
 750 |         Str = Str.Replace(Convert.ToString(Convert.ToChar(8232)), "\n");
 751 |         Str = Str.Replace(Convert.ToString(Convert.ToChar(8233)), "\n");
 752 |         Str = System.Web.HttpUtility.JavaScriptStringEncode(Str);
 753 |         return Str;
 754 | 
 755 |     }
 756 | 
 757 |     public static string GetGuid()
 758 |     {
 759 |         return (Guid.NewGuid().ToString());
 760 |     }
 761 | 
 762 |     public static bool IsFileTypeValid(string FileName, String[] AllowedFilesTypes)
 763 |     {
 764 |         string Extension = GetFileExtension(FileName).ToLower();
 765 |         if (!string.IsNullOrEmpty(Extension) && Array.IndexOf(AllowedFilesTypes, Extension) >= 0)
 766 |         {
 767 |             return true;
 768 |         }
 769 |         else
 770 |         {
 771 |             return false;
 772 |         }
 773 |     }
 774 | 
 775 | 
 776 |     public class ImageCropper
 777 |     {
 778 | 
 779 |         public string FileToCropPath = "";
 780 |         public string NewFileToSavePath = "";
 781 |         public ScaleMode ResizeType = ScaleMode.None;
 782 | 
 783 |         public int OutputWidth = -1;
 784 |         public int OutputHeight = -1;
 785 | 
 786 |         public float ManualCropPositionX = -1;
 787 |         public float ManualCropPositionY = -1;
 788 |         public float ManualCropWidth = -1;
 789 |         public float ManualCropHeight = -1;
 790 |         public float ManualCropRotate = -1;
 791 |         public float ManualCropScaleX = -1;
 792 |         public float ManualCropScaleY = -1;
 793 | 
 794 |         public static string ManualCropXParamName = "crop_x";
 795 |         public static string ManualCropYParamName = "crop_y";
 796 |         public static string ManualCropWidthParamName = "crop_width";
 797 |         public static string ManualCropHeightParamName = "crop_height";
 798 |         public static string ManualCropRotateParamName = "crop_rotate";
 799 |         public static string ManualCropScaleXParamName = "crop_scaleX";
 800 |         public static string ManualCropScaleYParamName = "crop_scaleY";
 801 | 
 802 |         public enum ScaleMode
 803 |         {
 804 |             None = 0,
 805 |             ProportionalInside = 1,
 806 |             ProportionalOutside = 2,
 807 |             ProportionalCropOutsideTopLeft = 3,
 808 |             ProportionalCropOutsideTopCenter = 4,
 809 |             ProportionalCropOutsideTopRight = 5,
 810 |             ProportionalCropOutsideMiddleLeft = 6,
 811 |             ProportionalCropOutsideMiddleCenter = 7,
 812 |             ProportionalCropOutsideMiddleRight = 8,
 813 |             ProportionalCropOutsideBottomLeft = 9,
 814 |             ProportionalCropOutsideBottomCenter = 10,
 815 |             ProportionalCropOutsideBottomRight = 11,
 816 |             Stretch = 14,
 817 |             Manual = 20
 818 |         };
 819 | 
 820 |         public void PopulateInstanceVariablesFromRequestParams()
 821 |         {
 822 |             System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 823 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropXParamName]), out ManualCropPositionX);
 824 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropYParamName]), out ManualCropPositionY);
 825 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropWidthParamName]), out ManualCropWidth);
 826 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropHeightParamName]), out ManualCropHeight);
 827 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropRotateParamName]), out ManualCropRotate);
 828 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropScaleXParamName]), out ManualCropScaleX);
 829 |             float.TryParse(Convert.ToString(PageInstance.Request[ManualCropScaleYParamName]), out ManualCropScaleY);
 830 |         }
 831 | 
 832 |         public string Crop()
 833 |         {
 834 |             if (OutputWidth > 0 && OutputHeight > 0
 835 |                 && ResizeType != ScaleMode.None
 836 |                 && !string.IsNullOrEmpty(FileToCropPath)
 837 |                 && !string.IsNullOrEmpty(NewFileToSavePath))
 838 |             {
 839 |                 System.Drawing.Image CurImage = System.Drawing.Image.FromFile(FileToCropPath);
 840 |                 if (CurImage != null)
 841 |                 {
 842 |                     Bitmap Bmp = new Bitmap(CurImage);
 843 |                     Bitmap CroppedBmp = null;
 844 |                     if (ResizeType != ScaleMode.Manual)
 845 |                     {
 846 |                         CroppedBmp = AutoScaleBitmap(Bmp);
 847 |                     }
 848 |                     else
 849 |                     {
 850 |                         PopulateInstanceVariablesFromRequestParams();
 851 |                         if (ManualCropWidth > 0 && ManualCropHeight > 0)
 852 |                         {
 853 |                             CroppedBmp = ManualScaleBitmap(Bmp);
 854 |                         }
 855 |                     }
 856 |                     Bmp.Dispose();
 857 |                     CurImage.Dispose();
 858 |                     if (CroppedBmp != null)
 859 |                     {
 860 |                         CroppedBmp.Save(NewFileToSavePath);
 861 |                         CroppedBmp.Dispose();
 862 |                         if (ResizeType == ScaleMode.Manual
 863 |                             && ManualCropWidth > 0 && ManualCropHeight > 0)
 864 |                         {
 865 |                             string FileNewName = Path.GetFileNameWithoutExtension(NewFileToSavePath) + ".png";
 866 |                             string FileName = Path.GetFileName(NewFileToSavePath);
 867 |                             string FileDir = Path.GetDirectoryName(NewFileToSavePath) + "/";
 868 |                             FileNewName = RenameFile(FileName, FileDir, FileNewName);
 869 |                             return FileNewName;
 870 |                         }
 871 |                     }
 872 | 
 873 |                 }
 874 | 
 875 |             }
 876 |             return Path.GetFileName(NewFileToSavePath);
 877 |         }
 878 | 
 879 |         public static string RenameFile(string FileName, string FileDir, string FileNewName)
 880 |         {
 881 | 
 882 |             if (FileName != null && FileName != "")
 883 |             {
 884 |                 if (FileName.ToLower() == FileNewName.ToLower())
 885 |                 {
 886 |                     return FileNewName;
 887 |                 }
 888 |                 System.Web.HttpContext PageInstance = System.Web.HttpContext.Current;
 889 | 
 890 |                 if (!FileNewName.Contains("."))
 891 |                 {
 892 |                     FileNewName = FileNewName + "." + GetFileExtension(FileName);
 893 |                 }
 894 |                 FileNewName = GetNonOverwrittenFileName(FileNewName, FileDir);
 895 | 
 896 |                 string NewFilePath = FileDir + FileNewName;
 897 |                 if (!Path.IsPathRooted(FileDir))
 898 |                 {
 899 |                     NewFilePath = PageInstance.Server.MapPath(FileDir + FileNewName);
 900 |                 }
 901 |                 if (System.IO.File.Exists(NewFilePath))
 902 |                 {
 903 |                     System.IO.File.Delete(NewFilePath);
 904 |                 }
 905 | 
 906 |                 if (!Path.IsPathRooted(FileDir))
 907 |                 {
 908 |                     File.Move(PageInstance.Server.MapPath(FileDir) + FileName, PageInstance.Server.MapPath(FileDir) + FileNewName);
 909 |                 }
 910 |                 else
 911 |                 {
 912 |                     File.Move(FileDir + FileName, FileDir + FileNewName);
 913 |                 }
 914 | 
 915 |                 return FileNewName;
 916 |             }
 917 |             else
 918 |             {
 919 |                 return null;
 920 |             }
 921 |         }
 922 | 
 923 |         private Bitmap AutoScaleBitmap(Bitmap Bmp)
 924 |         {
 925 |             return AutoScaleBitmap(Bmp, OutputWidth, OutputHeight, ResizeType);
 926 |         }
 927 | 
 928 |         public static Bitmap AutoScaleBitmap(Bitmap Bmp, int OutputWidth, int OutputHeight, ScaleMode ResizeType)
 929 |         {
 930 | 
 931 |             if (ResizeType == ScaleMode.None)
 932 |             {
 933 |                 return Bmp;
 934 |             }
 935 |             else
 936 |             {
 937 |                 int SrcWidth = Bmp.Width;
 938 |                 int SrcHeight = Bmp.Height;
 939 | 
 940 |                 decimal RatioX = Decimal.Divide(OutputWidth, SrcWidth);
 941 |                 decimal RatioY = Decimal.Divide(OutputHeight, SrcHeight);
 942 |                 int ResizeToWidth = 0;
 943 |                 int ResizeToHeight = 0;
 944 | 
 945 |                 bool ScaleModeIsProporitonalCropOutside = (ResizeType == ScaleMode.ProportionalOutside
 946 |                     || ResizeType == ScaleMode.ProportionalCropOutsideBottomCenter
 947 |                     || ResizeType == ScaleMode.ProportionalCropOutsideBottomLeft
 948 |                     || ResizeType == ScaleMode.ProportionalCropOutsideBottomRight
 949 |                     || ResizeType == ScaleMode.ProportionalCropOutsideMiddleCenter
 950 |                     || ResizeType == ScaleMode.ProportionalCropOutsideMiddleLeft
 951 |                     || ResizeType == ScaleMode.ProportionalCropOutsideMiddleRight
 952 |                     || ResizeType == ScaleMode.ProportionalCropOutsideTopCenter
 953 |                     || ResizeType == ScaleMode.ProportionalCropOutsideTopLeft
 954 |                     || ResizeType == ScaleMode.ProportionalCropOutsideTopRight);
 955 | 
 956 |                 if (ScaleModeIsProporitonalCropOutside)
 957 |                 {
 958 | 
 959 |                     if (RatioX > RatioY)
 960 |                     {
 961 |                         ResizeToWidth = OutputWidth;
 962 |                         ResizeToHeight = Convert.ToInt32(Decimal.Multiply(SrcHeight, RatioX));
 963 |                     }
 964 |                     else
 965 |                     {
 966 |                         ResizeToWidth = Convert.ToInt32(Decimal.Multiply(SrcWidth, RatioY));
 967 |                         ResizeToHeight = OutputHeight;
 968 |                     }
 969 | 
 970 |                 }
 971 |                 else if (ResizeType == ScaleMode.ProportionalInside)
 972 |                 {
 973 | 
 974 |                     if ((RatioX < RatioY && RatioX > 0) || RatioY <= 0)
 975 |                     {
 976 |                         ResizeToWidth = OutputWidth;
 977 |                         ResizeToHeight = Convert.ToInt32(Decimal.Multiply(SrcHeight, RatioX));
 978 |                     }
 979 |                     else
 980 |                     {
 981 |                         ResizeToWidth = Convert.ToInt32(Decimal.Multiply(SrcWidth, RatioY));
 982 |                         ResizeToHeight = OutputHeight;
 983 |                     }
 984 |                 }
 985 |                 else if (ResizeType == ScaleMode.Stretch)
 986 |                 {
 987 |                     ResizeToWidth = OutputWidth;
 988 |                     ResizeToHeight = OutputHeight;
 989 |                 }
 990 |                 Bitmap NewBmp = new Bitmap(ResizeToWidth, ResizeToHeight);
 991 | 
 992 |                 System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(NewBmp);
 993 |                 gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
 994 |                 gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
 995 |                 gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
 996 | 
 997 |                 System.Drawing.Rectangle RectDestination = new System.Drawing.Rectangle(0, 0, ResizeToWidth, ResizeToHeight);
 998 |                 gr.DrawImage(Bmp, RectDestination, 0, 0, SrcWidth, SrcHeight, GraphicsUnit.Pixel);
 999 | 
1000 |                 if (ScaleModeIsProporitonalCropOutside)
1001 |                 {
1002 | 
1003 |                     int x = (ResizeToWidth - OutputWidth) / 2;
1004 |                     int y = (ResizeToHeight - OutputHeight) / 2;
1005 | 
1006 |                     if (ResizeType == ScaleMode.ProportionalCropOutsideTopCenter)
1007 |                     {
1008 |                         x = (ResizeToWidth - OutputWidth) / 2;
1009 |                         y = 0;
1010 |                     }
1011 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideTopLeft)
1012 |                     {
1013 |                         x = 0;
1014 |                         y = 0;
1015 |                     }
1016 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideTopRight)
1017 |                     {
1018 |                         x = (ResizeToWidth - OutputWidth);
1019 |                         y = 0;
1020 |                     }
1021 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideMiddleCenter)
1022 |                     {
1023 |                         x = (ResizeToWidth - OutputWidth) / 2;
1024 |                         y = (ResizeToHeight - OutputHeight) / 2;
1025 |                     }
1026 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideMiddleLeft)
1027 |                     {
1028 |                         x = 0;
1029 |                         y = (ResizeToHeight - OutputHeight) / 2;
1030 |                     }
1031 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideTopRight)
1032 |                     {
1033 |                         x = (ResizeToWidth - OutputWidth);
1034 |                         y = (ResizeToHeight - OutputHeight) / 2;
1035 |                     }
1036 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideBottomCenter)
1037 |                     {
1038 |                         x = (ResizeToWidth - OutputWidth) / 2;
1039 |                         y = (ResizeToHeight - OutputHeight);
1040 |                     }
1041 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideBottomLeft)
1042 |                     {
1043 |                         x = 0;
1044 |                         y = (ResizeToHeight - OutputHeight);
1045 |                     }
1046 |                     else if (ResizeType == ScaleMode.ProportionalCropOutsideBottomRight)
1047 |                     {
1048 |                         x = (ResizeToWidth - OutputWidth);
1049 |                         y = (ResizeToHeight - OutputHeight);
1050 |                     }
1051 | 
1052 |                     System.Drawing.Rectangle Rect = new System.Drawing.Rectangle(x, y, OutputWidth, OutputHeight);
1053 |                     NewBmp = NewBmp.Clone(Rect, NewBmp.PixelFormat);
1054 |                 }
1055 |                 return NewBmp;
1056 |             }
1057 |         }
1058 | 
1059 |         public Bitmap ManualScaleBitmap(Bitmap Bmp)
1060 |         {
1061 |             Bitmap NewBmp = Bmp.Clone() as Bitmap;
1062 | 
1063 |             if (ManualCropWidth == 0 || ManualCropHeight == 0)
1064 |             {
1065 |                 return NewBmp;
1066 |             }
1067 | 
1068 |             if (ManualCropScaleX == -1)
1069 |             {
1070 |                 NewBmp.RotateFlip(RotateFlipType.RotateNoneFlipX);
1071 |             }
1072 |             if (ManualCropScaleY == -1)
1073 |             {
1074 |                 NewBmp.RotateFlip(RotateFlipType.RotateNoneFlipY);
1075 |             }
1076 |             if (ManualCropRotate != 0)
1077 |             {
1078 |                 NewBmp = RotateBitmap(NewBmp, ManualCropRotate);
1079 |             }
1080 | 
1081 |             Rectangle CropRect = new Rectangle((int)ManualCropPositionX, (int)ManualCropPositionY, (int)ManualCropWidth, (int)ManualCropHeight);
1082 |             Bitmap CroppedBmp = NewBmp.Clone(CropRect, NewBmp.PixelFormat);
1083 |             NewBmp.Dispose();
1084 | 
1085 |             CroppedBmp = AutoScaleBitmap(CroppedBmp, OutputWidth, OutputHeight, ScaleMode.ProportionalOutside);
1086 |             return CroppedBmp;
1087 | 
1088 |         }
1089 | 
1090 |         public Bitmap RotateBitmap(Bitmap Bmp, float Angle)
1091 |         {
1092 |             int BmpWidth = Bmp.Width;
1093 |             int BmpHeight = Bmp.Height;
1094 |             double CurAngle = Angle * Math.PI / 180;
1095 |             double CurAngleCos = Math.Abs(Math.Cos(CurAngle));
1096 |             double CurAngleSin = Math.Abs(Math.Sin(CurAngle));
1097 |             int ReturnBmpWidth = (int)(BmpWidth * CurAngleCos + BmpHeight * CurAngleSin);
1098 |             int ReturnBmpHeight = (int)(BmpWidth * CurAngleSin + BmpHeight * CurAngleCos);
1099 |             Bitmap ReturnBitmap = new Bitmap(ReturnBmpWidth, ReturnBmpHeight);
1100 |             Graphics g = Graphics.FromImage(ReturnBitmap);
1101 |             g.TranslateTransform((float)(ReturnBmpWidth - BmpWidth) / 2, (float)(ReturnBmpHeight - BmpHeight) / 2);
1102 |             g.TranslateTransform((float)Bmp.Width / 2, (float)Bmp.Height / 2);
1103 |             g.RotateTransform(Angle);
1104 |             g.TranslateTransform(-(float)Bmp.Width / 2, -(float)Bmp.Height / 2);
1105 |             g.DrawImage(Bmp, new Point(0, 0));
1106 |             Bmp.Dispose();
1107 |             return ReturnBitmap;
1108 |         }
1109 | 
1110 |     }
1111 | 
1112 | </script>
1113 | 


--------------------------------------------------------------------------------