= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
8 | bytesCount += 1;
9 | } else {
10 | bytesCount += 2;
11 | }
12 | }
13 | return parseInt((bytesCount / 2).toFixed(0));
14 | }
15 |
16 | module.exports = getLength
--------------------------------------------------------------------------------
/lib/is_array.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var isArray = function (value) {
3 | if (typeof Array.isArray === "function") {
4 | return Array.isArray(value)
5 | } else {
6 | return Object.prototype.toString.call(value) === "[object Array]"
7 | }
8 | }
9 | module.exports = isArray
--------------------------------------------------------------------------------
/lib/rotate_draw.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | var EXIF = require('./exif')
3 | var rotateImg = function (img, canvas, custom, untiles) {
4 | var Orientation;
5 | EXIF.getData(img, function () {
6 | EXIF.getAllTags(this);
7 | Orientation = EXIF.getTag(this, 'Orientation');
8 | });
9 | var ctx = canvas.getContext("2d");
10 |
11 | if (custom) {
12 | img.width = custom.width
13 | img.height = custom.height
14 | }
15 | switch (Orientation) {
16 | case 6:
17 | canvas.width = img.height
18 | canvas.height = img.width
19 | ctx.save()
20 | ctx.rotate(Math.PI / 2);
21 | if (!untiles) {
22 | tiles(canvas, ctx, img, function (istiles) {
23 | if (!istiles) {
24 | ctx.drawImage(img, 0, -img.height, canvas.height, canvas.width)
25 | }
26 | ctx.restore()
27 | })
28 | } else {
29 | ctx.drawImage(img, 0, -img.height, canvas.height, canvas.width)
30 | ctx.restore()
31 | }
32 | break;
33 | case 3:
34 | ctx.save()
35 | ctx.rotate(Math.PI);
36 | if (!untiles) {
37 | tiles(canvas, ctx, img, function (istiles) {
38 | if (!istiles) {
39 | ctx.drawImage(img, 0, 0, -img.width, -img.height);
40 | }
41 | ctx.restore()
42 | })
43 | } else {
44 | ctx.drawImage(img, 0, 0, -img.width, -img.height);
45 | ctx.restore()
46 | }
47 | // ctx.drawImage(img, 0, 0, -img.width, -img.height);
48 | // ctx.restore()
49 | break;
50 | case 8:
51 | canvas.width = img.height;
52 | canvas.height = img.width;
53 | ctx.save()
54 | ctx.rotate(Math.PI * 3 / 2);
55 | if (!untiles) {
56 | tiles(canvas, ctx, img, function (istiles) {
57 | if (!istiles) {
58 | ctx.drawImage(img, 0, 0, -img.width, img.height);
59 | }
60 | ctx.restore()
61 | })
62 | } else {
63 | ctx.drawImage(img, 0, 0, -img.width, img.height);
64 | ctx.restore()
65 | }
66 | // ctx.drawImage(img, 0, 0, -img.width, img.height);
67 | // ctx.restore()
68 | break;
69 | default:
70 | if (!untiles) {
71 | tiles(canvas, ctx, img, function (istiles) {
72 | if (!istiles) {
73 | ctx.drawImage(img, 0, 0, img.width, img.height);
74 | }
75 | })
76 | } else {
77 | ctx.drawImage(img, 0, 0, img.width, img.height);
78 | }
79 | break;
80 | }
81 | }
82 | var tiles = function (canvas, ctx, img, isDone) {
83 | var width = img.width;
84 | var height = img.height;
85 |
86 | //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
87 | var ratio;
88 | if ((ratio = width * height / 4000000) > 1) {
89 | ratio = Math.sqrt(ratio);
90 | width /= ratio;
91 | height /= ratio;
92 | } else {
93 | ratio = 1;
94 | }
95 |
96 | //如果图片像素大于100万则使用瓦片绘制
97 | var count;
98 | if ((count = width * height / 1000000) > 1) {
99 | canvas.width = width
100 | canvas.height = height
101 | count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
102 | //计算每块瓦片的宽和高
103 | var nw = ~~(width / count);
104 | var nh = ~~(height / count);
105 |
106 | var tCanvas = document.createElement('canvas')
107 | tCanvas.width = nw;
108 | tCanvas.height = nh;
109 | var tctx = tCanvas.getContext('2d')
110 |
111 | for (var i = 0; i < count; i++) {
112 | for (var j = 0; j < count; j++) {
113 | tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
114 | ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
115 | }
116 | }
117 | isDone(true)
118 | rotateImg(img, canvas, {
119 | width: width,
120 | height: height
121 | }, true)
122 | } else {
123 | isDone()
124 | }
125 | }
126 | module.exports = rotateImg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ccimg",
3 | "version": "1.0.1",
4 | "description": "A set of web image tools by js, include Compress, Watermark",
5 | "main": "index.js",
6 | "directories": {
7 | "doc": "docs"
8 | },
9 | "scripts": {
10 |
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/palxiao/ccImg_tool.git"
15 | },
16 | "keywords": [
17 | "js",
18 | "javascript",
19 | "compress",
20 | "watermark"
21 | ],
22 | "author": "ShawnPhang",
23 | "license": "ISC",
24 | "bugs": {
25 | "url": "https://github.com/palxiao/ccImg_tool/issues"
26 | },
27 | "homepage": "https://github.com/palxiao/ccImg_tool#readme"
28 | }
29 |
--------------------------------------------------------------------------------
/src/build.js:
--------------------------------------------------------------------------------
1 | ({
2 | appDir: './',
3 | baseUrl: './js',
4 | dir: '../dist',
5 | modules: [{
6 | name: 'main'
7 | }],
8 | fileExclusionRegExp: /^(r|build)\.js$/,
9 | optimizeCss: 'standard',
10 | removeCombined: true,
11 | paths: {
12 | '$cropper': 'app/cropper',
13 | 'cropper': 'lib/cropper',
14 | 'compress': 'app/compress',
15 | 'watermark': 'app/watermark',
16 | 'isArray': 'app/is_array',
17 | 'getLength': 'app/get_length',
18 | 'base64toBlob': 'app/base64_blob',
19 | 'exif': 'lib/exif',
20 | 'rotateDraw': 'app/rotate_draw',
21 | 'gif': 'lib/gif'
22 | },
23 |
24 | shim: {
25 | 'cropper': {
26 | // deps: ['base64toBlob'],
27 | exports: 'cropper'
28 | }
29 | }
30 | })
--------------------------------------------------------------------------------
/src/css/cropper.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Cropper.js v1.3.5
3 | * https://github.com/fengyuanchen/cropperjs
4 | *
5 | * Copyright (c) 2015-2018 Chen Fengyuan
6 | * Released under the MIT license
7 | *
8 | * Date: 2018-04-15T06:19:56.029Z
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 {/*Avoid margin top issue (Occur only when margin-top <= -height)
25 | */
26 | display: block;
27 | height: 100%;
28 | image-orientation: 0deg;
29 | max-height: none !important;
30 | max-width: none !important;
31 | min-height: 0 !important;
32 | min-width: 0 !important;
33 | width: 100%;
34 | }
35 |
36 | .cropper-wrap-box,
37 | .cropper-canvas,
38 | .cropper-drag-box,
39 | .cropper-crop-box,
40 | .cropper-modal {
41 | bottom: 0;
42 | left: 0;
43 | position: absolute;
44 | right: 0;
45 | top: 0;
46 | }
47 |
48 | .cropper-wrap-box,
49 | .cropper-canvas {
50 | overflow: hidden;
51 | }
52 |
53 | .cropper-drag-box {
54 | background-color: #fff;
55 | opacity: 0;
56 | }
57 |
58 | .cropper-modal {
59 | background-color: #000;
60 | opacity: .5;
61 | }
62 |
63 | .cropper-view-box {
64 | display: block;
65 | height: 100%;
66 | outline-color: rgba(51, 153, 255, 0.75);
67 | outline: 1px solid #39f;
68 | overflow: hidden;
69 | width: 100%;
70 | }
71 |
72 | .cropper-dashed {
73 | border: 0 dashed #eee;
74 | display: block;
75 | opacity: .5;
76 | position: absolute;
77 | }
78 |
79 | .cropper-dashed.dashed-h {
80 | border-bottom-width: 1px;
81 | border-top-width: 1px;
82 | height: 33.33333%;
83 | left: 0;
84 | top: 33.33333%;
85 | width: 100%;
86 | }
87 |
88 | .cropper-dashed.dashed-v {
89 | border-left-width: 1px;
90 | border-right-width: 1px;
91 | height: 100%;
92 | left: 33.33333%;
93 | top: 0;
94 | width: 33.33333%;
95 | }
96 |
97 | .cropper-center {
98 | display: block;
99 | height: 0;
100 | left: 50%;
101 | opacity: .75;
102 | position: absolute;
103 | top: 50%;
104 | width: 0;
105 | }
106 |
107 | .cropper-center:before,
108 | .cropper-center:after {
109 | background-color: #eee;
110 | content: ' ';
111 | display: block;
112 | position: absolute;
113 | }
114 |
115 | .cropper-center:before {
116 | height: 1px;
117 | left: -3px;
118 | top: 0;
119 | width: 7px;
120 | }
121 |
122 | .cropper-center:after {
123 | height: 7px;
124 | left: 0;
125 | top: -3px;
126 | width: 1px;
127 | }
128 |
129 | .cropper-face,
130 | .cropper-line,
131 | .cropper-point {
132 | display: block;
133 | height: 100%;
134 | opacity: .1;
135 | position: absolute;
136 | width: 100%;
137 | }
138 |
139 | .cropper-face {
140 | background-color: #fff;
141 | left: 0;
142 | top: 0;
143 | }
144 |
145 | .cropper-line {
146 | background-color: #39f;
147 | }
148 |
149 | .cropper-line.line-e {
150 | cursor: ew-resize;
151 | right: -3px;
152 | top: 0;
153 | width: 5px;
154 | }
155 |
156 | .cropper-line.line-n {
157 | cursor: ns-resize;
158 | height: 5px;
159 | left: 0;
160 | top: -3px;
161 | }
162 |
163 | .cropper-line.line-w {
164 | cursor: ew-resize;
165 | left: -3px;
166 | top: 0;
167 | width: 5px;
168 | }
169 |
170 | .cropper-line.line-s {
171 | bottom: -3px;
172 | cursor: ns-resize;
173 | height: 5px;
174 | left: 0;
175 | }
176 |
177 | .cropper-point {
178 | background-color: #39f;
179 | height: 5px;
180 | opacity: .75;
181 | width: 5px;
182 | }
183 |
184 | .cropper-point.point-e {
185 | cursor: ew-resize;
186 | margin-top: -3px;
187 | right: -3px;
188 | top: 50%;
189 | }
190 |
191 | .cropper-point.point-n {
192 | cursor: ns-resize;
193 | left: 50%;
194 | margin-left: -3px;
195 | top: -3px;
196 | }
197 |
198 | .cropper-point.point-w {
199 | cursor: ew-resize;
200 | left: -3px;
201 | margin-top: -3px;
202 | top: 50%;
203 | }
204 |
205 | .cropper-point.point-s {
206 | bottom: -3px;
207 | cursor: s-resize;
208 | left: 50%;
209 | margin-left: -3px;
210 | }
211 |
212 | .cropper-point.point-ne {
213 | cursor: nesw-resize;
214 | right: -3px;
215 | top: -3px;
216 | }
217 |
218 | .cropper-point.point-nw {
219 | cursor: nwse-resize;
220 | left: -3px;
221 | top: -3px;
222 | }
223 |
224 | .cropper-point.point-sw {
225 | bottom: -3px;
226 | cursor: nesw-resize;
227 | left: -3px;
228 | }
229 |
230 | .cropper-point.point-se {
231 | bottom: -3px;
232 | cursor: nwse-resize;
233 | height: 20px;
234 | opacity: 1;
235 | right: -3px;
236 | width: 20px;
237 | }
238 |
239 | @media (min-width: 768px) {
240 | .cropper-point.point-se {
241 | height: 15px;
242 | width: 15px;
243 | }
244 | }
245 |
246 | @media (min-width: 992px) {
247 | .cropper-point.point-se {
248 | height: 10px;
249 | width: 10px;
250 | }
251 | }
252 |
253 | @media (min-width: 1200px) {
254 | .cropper-point.point-se {
255 | height: 5px;
256 | opacity: .75;
257 | width: 5px;
258 | }
259 | }
260 |
261 | .cropper-point.point-se:before {
262 | background-color: #39f;
263 | bottom: -50%;
264 | content: ' ';
265 | display: block;
266 | height: 200%;
267 | opacity: 0;
268 | position: absolute;
269 | right: -50%;
270 | width: 200%;
271 | }
272 |
273 | .cropper-invisible {
274 | opacity: 0;
275 | }
276 |
277 | .cropper-bg {
278 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
279 | }
280 |
281 | .cropper-hide {
282 | display: block;
283 | height: 0;
284 | position: absolute;
285 | width: 0;
286 | }
287 |
288 | .cropper-hidden {
289 | display: none !important;
290 | }
291 |
292 | .cropper-move {
293 | cursor: move;
294 | }
295 |
296 | .cropper-crop {
297 | cursor: crosshair;
298 | }
299 |
300 | .cropper-disabled .cropper-drag-box,
301 | .cropper-disabled .cropper-face,
302 | .cropper-disabled .cropper-line,
303 | .cropper-disabled .cropper-point {
304 | cursor: not-allowed;
305 | }
306 |
307 | /* customer */
308 | #ccw_cropprt_out {
309 | color: beige;
310 | display: table;
311 | width: 100%;
312 | text-align: center;
313 | background:black;
314 | display: none;
315 | }
316 | .ccw_cropper_container {
317 | width: 100%;
318 | display:table-cell;
319 | vertical-align:middle;
320 | text-align:center;
321 | }
322 | .ccw_cropper_image {
323 | width: 100%;
324 | }
325 | .ccw_cropper_confirm, .ccw_cropper_cancel {
326 | color: aliceblue;
327 | position: fixed;
328 | border: 1px solid white;
329 | border-radius: 5px;
330 | bottom: 3%;
331 | padding: 6px 10px;
332 | }
333 | .ccw_cropper_confirm {
334 | left: 5%;
335 | }
336 | .ccw_cropper_cancel {
337 | right: 5%;
338 | }
339 | .cc_disScroll {
340 | position: fixed;
341 | width: 100%;
342 | }
343 |
--------------------------------------------------------------------------------
/src/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/src/html/compress.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
21 |
22 |
23 |
24 |
28 |
72 |
73 |
74 |
152 |
153 |
--------------------------------------------------------------------------------
/src/html/cropper.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | web图片工具
9 |
10 |
11 |
57 |
58 |
59 |
60 |
64 |
65 |
70 |
' +
61 | '
' +
62 | '
' +
63 | '
确 认
' +
64 | '
取 消
' +
65 | '
' +
66 | '
30 |
34 |