sculp-js 1.10.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/array.js +18 -1
- package/lib/cjs/async.js +1 -1
- package/lib/cjs/base64.js +1 -1
- package/lib/cjs/clipboard.js +1 -1
- package/lib/cjs/cloneDeep.js +1 -1
- package/lib/cjs/cookie.js +1 -1
- package/lib/cjs/date.js +1 -1
- package/lib/cjs/dom.js +1 -1
- package/lib/cjs/download.js +1 -1
- package/lib/cjs/easing.js +1 -1
- package/lib/cjs/file.js +76 -50
- package/lib/cjs/func.js +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/isEqual.js +1 -1
- package/lib/cjs/math.js +1 -1
- package/lib/cjs/number.js +1 -1
- package/lib/cjs/object.js +1 -1
- package/lib/cjs/path.js +1 -1
- package/lib/cjs/qs.js +1 -1
- package/lib/cjs/random.js +1 -1
- package/lib/cjs/string.js +1 -1
- package/lib/cjs/tooltip.js +8 -5
- package/lib/cjs/tree.js +1 -1
- package/lib/cjs/type.js +1 -1
- package/lib/cjs/unique.js +1 -1
- package/lib/cjs/url.js +1 -1
- package/lib/cjs/validator.js +1 -1
- package/lib/cjs/variable.js +1 -1
- package/lib/cjs/watermark.js +1 -1
- package/lib/cjs/we-decode.js +1 -1
- package/lib/es/array.js +18 -1
- package/lib/es/async.js +1 -1
- package/lib/es/base64.js +1 -1
- package/lib/es/clipboard.js +1 -1
- package/lib/es/cloneDeep.js +1 -1
- package/lib/es/cookie.js +1 -1
- package/lib/es/date.js +1 -1
- package/lib/es/dom.js +1 -1
- package/lib/es/download.js +1 -1
- package/lib/es/easing.js +1 -1
- package/lib/es/file.js +76 -50
- package/lib/es/func.js +1 -1
- package/lib/es/index.js +1 -1
- package/lib/es/isEqual.js +1 -1
- package/lib/es/math.js +1 -1
- package/lib/es/number.js +1 -1
- package/lib/es/object.js +1 -1
- package/lib/es/path.js +1 -1
- package/lib/es/qs.js +1 -1
- package/lib/es/random.js +1 -1
- package/lib/es/string.js +1 -1
- package/lib/es/tooltip.js +8 -5
- package/lib/es/tree.js +1 -1
- package/lib/es/type.js +1 -1
- package/lib/es/unique.js +1 -1
- package/lib/es/url.js +1 -1
- package/lib/es/validator.js +1 -1
- package/lib/es/variable.js +1 -1
- package/lib/es/watermark.js +1 -1
- package/lib/es/we-decode.js +1 -1
- package/lib/index.d.ts +28 -7
- package/lib/umd/index.js +99 -54
- package/package.json +1 -1
package/lib/cjs/array.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -41,6 +41,23 @@ function arrayEach(array, iterator, reverse = false) {
|
|
|
41
41
|
* @param {ArrayLike<V>} array 数组
|
|
42
42
|
* @param {(val: V, idx: number) => Promise<any>} iterator 支持Promise类型的回调函数
|
|
43
43
|
* @param {boolean} reverse 是否反向遍历
|
|
44
|
+
* @example
|
|
45
|
+
* 使用范例如下:
|
|
46
|
+
* const start = async () => {
|
|
47
|
+
* await arrayEachAsync(result, async (item) => {
|
|
48
|
+
* await request(item);
|
|
49
|
+
* count++;
|
|
50
|
+
* })
|
|
51
|
+
* console.log('发送次数', count);
|
|
52
|
+
* }
|
|
53
|
+
|
|
54
|
+
* for await...of 使用范例如下
|
|
55
|
+
* const loadImages = async (images) => {
|
|
56
|
+
* for await (const item of images) {
|
|
57
|
+
* await request(item);
|
|
58
|
+
* count++;
|
|
59
|
+
* }
|
|
60
|
+
* }
|
|
44
61
|
*/
|
|
45
62
|
async function arrayEachAsync(array, iterator, reverse = false) {
|
|
46
63
|
if (reverse) {
|
package/lib/cjs/async.js
CHANGED
package/lib/cjs/base64.js
CHANGED
package/lib/cjs/clipboard.js
CHANGED
package/lib/cjs/cloneDeep.js
CHANGED
package/lib/cjs/cookie.js
CHANGED
package/lib/cjs/date.js
CHANGED
package/lib/cjs/dom.js
CHANGED
package/lib/cjs/download.js
CHANGED
package/lib/cjs/easing.js
CHANGED
package/lib/cjs/file.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
'use strict';
|
|
8
8
|
|
|
9
|
+
var type = require('./type.js');
|
|
9
10
|
var weDecode = require('./we-decode.js');
|
|
10
11
|
|
|
11
12
|
/**
|
|
@@ -36,16 +37,73 @@ function chooseLocalFile(accept, changeCb) {
|
|
|
36
37
|
};
|
|
37
38
|
return inputObj;
|
|
38
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* 计算图片压缩后的尺寸
|
|
42
|
+
*
|
|
43
|
+
* @param {number} maxWidth
|
|
44
|
+
* @param {number} maxHeight
|
|
45
|
+
* @param {number} originWidth
|
|
46
|
+
* @param {number} originHeight
|
|
47
|
+
* @returns {*}
|
|
48
|
+
*/
|
|
49
|
+
function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
|
|
50
|
+
let width = originWidth, height = originHeight;
|
|
51
|
+
// 图片尺寸超过限制
|
|
52
|
+
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
53
|
+
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
54
|
+
// 更宽，按照宽度限定尺寸
|
|
55
|
+
width = maxWidth;
|
|
56
|
+
height = Math.round(maxWidth * (originHeight / originWidth));
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
height = maxHeight;
|
|
60
|
+
width = Math.round(maxHeight * (originWidth / originHeight));
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return { width, height };
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
|
|
67
|
+
*
|
|
68
|
+
* @param {number} sizeKB
|
|
69
|
+
* @param {number} originWidth
|
|
70
|
+
* @param {number} originHeight
|
|
71
|
+
* @returns {*}
|
|
72
|
+
*/
|
|
73
|
+
function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
|
|
74
|
+
let targetWidth = originWidth, targetHeight = originHeight;
|
|
75
|
+
if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
|
|
76
|
+
// [1MB, 10MB)
|
|
77
|
+
const maxWidth = 1600, maxHeight = 1600;
|
|
78
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
79
|
+
targetWidth = width;
|
|
80
|
+
targetHeight = height;
|
|
81
|
+
}
|
|
82
|
+
else if (10 * 1024 <= sizeKB) {
|
|
83
|
+
// [10MB, Infinity)
|
|
84
|
+
const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2000, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2000;
|
|
85
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
86
|
+
targetWidth = width;
|
|
87
|
+
targetHeight = height;
|
|
88
|
+
}
|
|
89
|
+
return { width: targetWidth, height: targetHeight };
|
|
90
|
+
}
|
|
39
91
|
/**
|
|
40
92
|
* Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
|
|
41
|
-
*
|
|
42
|
-
* @param {
|
|
93
|
+
*
|
|
94
|
+
* @param {File | FileList} file 图片或图片数组
|
|
95
|
+
* @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
|
|
43
96
|
* @returns {Promise<object> | undefined}
|
|
44
97
|
*/
|
|
45
|
-
function compressImg(file, options) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
98
|
+
function compressImg(file, options = { quality: 0.52, mime: 'image/jpeg' }) {
|
|
99
|
+
if (!(file instanceof File || file instanceof FileList)) {
|
|
100
|
+
throw new Error(`${file} require be File or FileList`);
|
|
101
|
+
}
|
|
102
|
+
else if (!supportCanvas()) {
|
|
103
|
+
throw new Error(`Current runtime environment not support Canvas`);
|
|
104
|
+
}
|
|
105
|
+
const { quality = 0.52, mime = 'image/jpeg' } = type.isObject(options) ? options : {};
|
|
106
|
+
let targetQuality = quality;
|
|
49
107
|
if (file instanceof File) {
|
|
50
108
|
const sizeKB = +parseInt((file.size / 1024).toFixed(2));
|
|
51
109
|
if (sizeKB < 1 * 1024) {
|
|
@@ -54,8 +112,11 @@ function compressImg(file, options) {
|
|
|
54
112
|
else if (sizeKB >= 1 * 1024 && sizeKB < 5 * 1024) {
|
|
55
113
|
targetQuality = 0.62;
|
|
56
114
|
}
|
|
57
|
-
else if (sizeKB >= 5 * 1024) {
|
|
58
|
-
targetQuality = 0.
|
|
115
|
+
else if (sizeKB >= 5 * 1024 && sizeKB < 10 * 1024) {
|
|
116
|
+
targetQuality = 0.75;
|
|
117
|
+
}
|
|
118
|
+
else if (sizeKB >= 10 * 1024) {
|
|
119
|
+
targetQuality = 0.92;
|
|
59
120
|
}
|
|
60
121
|
}
|
|
61
122
|
if (options.quality) {
|
|
@@ -80,49 +141,14 @@ function compressImg(file, options) {
|
|
|
80
141
|
image.onload = () => {
|
|
81
142
|
const canvas = document.createElement('canvas'); // 创建 canvas 元素
|
|
82
143
|
const context = canvas.getContext('2d');
|
|
83
|
-
let targetWidth = image.width;
|
|
84
|
-
let targetHeight = image.height;
|
|
85
144
|
const originWidth = image.width;
|
|
86
145
|
const originHeight = image.height;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
94
|
-
// 更宽，按照宽度限定尺寸
|
|
95
|
-
targetWidth = maxWidth;
|
|
96
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
97
|
-
}
|
|
98
|
-
else {
|
|
99
|
-
targetHeight = maxHeight;
|
|
100
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
if (10 * 1024 <= sizeKB && sizeKB <= 20 * 1024) {
|
|
105
|
-
const maxWidth = 1400, maxHeight = 1400;
|
|
106
|
-
targetWidth = originWidth;
|
|
107
|
-
targetHeight = originHeight;
|
|
108
|
-
// 图片尺寸超过的限制
|
|
109
|
-
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
110
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
111
|
-
// 更宽，按照宽度限定尺寸
|
|
112
|
-
targetWidth = maxWidth;
|
|
113
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
targetHeight = maxHeight;
|
|
117
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
canvas.width = targetWidth;
|
|
122
|
-
canvas.height = targetHeight;
|
|
123
|
-
context.clearRect(0, 0, targetWidth, targetHeight);
|
|
124
|
-
context.drawImage(image, 0, 0, targetWidth, targetHeight); // 绘制 canvas
|
|
125
|
-
const canvasURL = canvas.toDataURL(options.mime, targetQuality);
|
|
146
|
+
const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
|
|
147
|
+
canvas.width = width;
|
|
148
|
+
canvas.height = height;
|
|
149
|
+
context.clearRect(0, 0, width, height);
|
|
150
|
+
context.drawImage(image, 0, 0, width, height); // 绘制 canvas
|
|
151
|
+
const canvasURL = canvas.toDataURL(mime, targetQuality);
|
|
126
152
|
const buffer = weDecode.weAtob(canvasURL.split(',')[1]);
|
|
127
153
|
let length = buffer.length;
|
|
128
154
|
const bufferArray = new Uint8Array(new ArrayBuffer(length));
|
package/lib/cjs/func.js
CHANGED
package/lib/cjs/index.js
CHANGED
package/lib/cjs/isEqual.js
CHANGED
package/lib/cjs/math.js
CHANGED
package/lib/cjs/number.js
CHANGED
package/lib/cjs/object.js
CHANGED
package/lib/cjs/path.js
CHANGED
package/lib/cjs/qs.js
CHANGED
package/lib/cjs/random.js
CHANGED
package/lib/cjs/string.js
CHANGED
package/lib/cjs/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -10,16 +10,19 @@ var dom = require('./dom.js');
|
|
|
10
10
|
var type = require('./type.js');
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* 自定义的 tooltip, 支持鼠标移动动悬浮提示
|
|
14
14
|
* @Desc 自定义的tooltip方法, 支持拖动悬浮提示
|
|
15
15
|
* Created by chendeqiao on 2017/5/8.
|
|
16
16
|
* @example
|
|
17
|
-
* <span onmouseleave="handleMouseLeave('#root')"
|
|
18
|
-
*
|
|
17
|
+
* <span onmouseleave="handleMouseLeave('#root')"
|
|
18
|
+
* onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
|
|
19
|
+
* onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
|
|
20
|
+
* title content
|
|
21
|
+
* </span>
|
|
19
22
|
*/
|
|
20
23
|
/**
|
|
21
24
|
* 自定义title提示功能的mouseenter事件句柄
|
|
22
|
-
* @param {ITooltipParams}
|
|
25
|
+
* @param {ITooltipParams} param
|
|
23
26
|
* @returns {*}
|
|
24
27
|
*/
|
|
25
28
|
function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
|
package/lib/cjs/tree.js
CHANGED
package/lib/cjs/type.js
CHANGED
package/lib/cjs/unique.js
CHANGED
package/lib/cjs/url.js
CHANGED
package/lib/cjs/validator.js
CHANGED
package/lib/cjs/variable.js
CHANGED
package/lib/cjs/watermark.js
CHANGED
package/lib/cjs/we-decode.js
CHANGED
package/lib/es/array.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -39,6 +39,23 @@ function arrayEach(array, iterator, reverse = false) {
|
|
|
39
39
|
* @param {ArrayLike<V>} array 数组
|
|
40
40
|
* @param {(val: V, idx: number) => Promise<any>} iterator 支持Promise类型的回调函数
|
|
41
41
|
* @param {boolean} reverse 是否反向遍历
|
|
42
|
+
* @example
|
|
43
|
+
* 使用范例如下:
|
|
44
|
+
* const start = async () => {
|
|
45
|
+
* await arrayEachAsync(result, async (item) => {
|
|
46
|
+
* await request(item);
|
|
47
|
+
* count++;
|
|
48
|
+
* })
|
|
49
|
+
* console.log('发送次数', count);
|
|
50
|
+
* }
|
|
51
|
+
|
|
52
|
+
* for await...of 使用范例如下
|
|
53
|
+
* const loadImages = async (images) => {
|
|
54
|
+
* for await (const item of images) {
|
|
55
|
+
* await request(item);
|
|
56
|
+
* count++;
|
|
57
|
+
* }
|
|
58
|
+
* }
|
|
42
59
|
*/
|
|
43
60
|
async function arrayEachAsync(array, iterator, reverse = false) {
|
|
44
61
|
if (reverse) {
|
package/lib/es/async.js
CHANGED
package/lib/es/base64.js
CHANGED
package/lib/es/clipboard.js
CHANGED
package/lib/es/cloneDeep.js
CHANGED
package/lib/es/cookie.js
CHANGED
package/lib/es/date.js
CHANGED
package/lib/es/dom.js
CHANGED
package/lib/es/download.js
CHANGED
package/lib/es/easing.js
CHANGED
package/lib/es/file.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
import { isObject } from './type.js';
|
|
7
8
|
import { weAtob } from './we-decode.js';
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -34,16 +35,73 @@ function chooseLocalFile(accept, changeCb) {
|
|
|
34
35
|
};
|
|
35
36
|
return inputObj;
|
|
36
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* 计算图片压缩后的尺寸
|
|
40
|
+
*
|
|
41
|
+
* @param {number} maxWidth
|
|
42
|
+
* @param {number} maxHeight
|
|
43
|
+
* @param {number} originWidth
|
|
44
|
+
* @param {number} originHeight
|
|
45
|
+
* @returns {*}
|
|
46
|
+
*/
|
|
47
|
+
function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
|
|
48
|
+
let width = originWidth, height = originHeight;
|
|
49
|
+
// 图片尺寸超过限制
|
|
50
|
+
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
51
|
+
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
52
|
+
// 更宽，按照宽度限定尺寸
|
|
53
|
+
width = maxWidth;
|
|
54
|
+
height = Math.round(maxWidth * (originHeight / originWidth));
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
height = maxHeight;
|
|
58
|
+
width = Math.round(maxHeight * (originWidth / originHeight));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return { width, height };
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
|
|
65
|
+
*
|
|
66
|
+
* @param {number} sizeKB
|
|
67
|
+
* @param {number} originWidth
|
|
68
|
+
* @param {number} originHeight
|
|
69
|
+
* @returns {*}
|
|
70
|
+
*/
|
|
71
|
+
function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
|
|
72
|
+
let targetWidth = originWidth, targetHeight = originHeight;
|
|
73
|
+
if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
|
|
74
|
+
// [1MB, 10MB)
|
|
75
|
+
const maxWidth = 1600, maxHeight = 1600;
|
|
76
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
77
|
+
targetWidth = width;
|
|
78
|
+
targetHeight = height;
|
|
79
|
+
}
|
|
80
|
+
else if (10 * 1024 <= sizeKB) {
|
|
81
|
+
// [10MB, Infinity)
|
|
82
|
+
const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2000, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2000;
|
|
83
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
84
|
+
targetWidth = width;
|
|
85
|
+
targetHeight = height;
|
|
86
|
+
}
|
|
87
|
+
return { width: targetWidth, height: targetHeight };
|
|
88
|
+
}
|
|
37
89
|
/**
|
|
38
90
|
* Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
|
|
39
|
-
*
|
|
40
|
-
* @param {
|
|
91
|
+
*
|
|
92
|
+
* @param {File | FileList} file 图片或图片数组
|
|
93
|
+
* @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
|
|
41
94
|
* @returns {Promise<object> | undefined}
|
|
42
95
|
*/
|
|
43
|
-
function compressImg(file, options) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
96
|
+
function compressImg(file, options = { quality: 0.52, mime: 'image/jpeg' }) {
|
|
97
|
+
if (!(file instanceof File || file instanceof FileList)) {
|
|
98
|
+
throw new Error(`${file} require be File or FileList`);
|
|
99
|
+
}
|
|
100
|
+
else if (!supportCanvas()) {
|
|
101
|
+
throw new Error(`Current runtime environment not support Canvas`);
|
|
102
|
+
}
|
|
103
|
+
const { quality = 0.52, mime = 'image/jpeg' } = isObject(options) ? options : {};
|
|
104
|
+
let targetQuality = quality;
|
|
47
105
|
if (file instanceof File) {
|
|
48
106
|
const sizeKB = +parseInt((file.size / 1024).toFixed(2));
|
|
49
107
|
if (sizeKB < 1 * 1024) {
|
|
@@ -52,8 +110,11 @@ function compressImg(file, options) {
|
|
|
52
110
|
else if (sizeKB >= 1 * 1024 && sizeKB < 5 * 1024) {
|
|
53
111
|
targetQuality = 0.62;
|
|
54
112
|
}
|
|
55
|
-
else if (sizeKB >= 5 * 1024) {
|
|
56
|
-
targetQuality = 0.
|
|
113
|
+
else if (sizeKB >= 5 * 1024 && sizeKB < 10 * 1024) {
|
|
114
|
+
targetQuality = 0.75;
|
|
115
|
+
}
|
|
116
|
+
else if (sizeKB >= 10 * 1024) {
|
|
117
|
+
targetQuality = 0.92;
|
|
57
118
|
}
|
|
58
119
|
}
|
|
59
120
|
if (options.quality) {
|
|
@@ -78,49 +139,14 @@ function compressImg(file, options) {
|
|
|
78
139
|
image.onload = () => {
|
|
79
140
|
const canvas = document.createElement('canvas'); // 创建 canvas 元素
|
|
80
141
|
const context = canvas.getContext('2d');
|
|
81
|
-
let targetWidth = image.width;
|
|
82
|
-
let targetHeight = image.height;
|
|
83
142
|
const originWidth = image.width;
|
|
84
143
|
const originHeight = image.height;
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
92
|
-
// 更宽，按照宽度限定尺寸
|
|
93
|
-
targetWidth = maxWidth;
|
|
94
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
95
|
-
}
|
|
96
|
-
else {
|
|
97
|
-
targetHeight = maxHeight;
|
|
98
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
if (10 * 1024 <= sizeKB && sizeKB <= 20 * 1024) {
|
|
103
|
-
const maxWidth = 1400, maxHeight = 1400;
|
|
104
|
-
targetWidth = originWidth;
|
|
105
|
-
targetHeight = originHeight;
|
|
106
|
-
// 图片尺寸超过的限制
|
|
107
|
-
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
108
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
109
|
-
// 更宽，按照宽度限定尺寸
|
|
110
|
-
targetWidth = maxWidth;
|
|
111
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
112
|
-
}
|
|
113
|
-
else {
|
|
114
|
-
targetHeight = maxHeight;
|
|
115
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
canvas.width = targetWidth;
|
|
120
|
-
canvas.height = targetHeight;
|
|
121
|
-
context.clearRect(0, 0, targetWidth, targetHeight);
|
|
122
|
-
context.drawImage(image, 0, 0, targetWidth, targetHeight); // 绘制 canvas
|
|
123
|
-
const canvasURL = canvas.toDataURL(options.mime, targetQuality);
|
|
144
|
+
const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
|
|
145
|
+
canvas.width = width;
|
|
146
|
+
canvas.height = height;
|
|
147
|
+
context.clearRect(0, 0, width, height);
|
|
148
|
+
context.drawImage(image, 0, 0, width, height); // 绘制 canvas
|
|
149
|
+
const canvasURL = canvas.toDataURL(mime, targetQuality);
|
|
124
150
|
const buffer = weAtob(canvasURL.split(',')[1]);
|
|
125
151
|
let length = buffer.length;
|
|
126
152
|
const bufferArray = new Uint8Array(new ArrayBuffer(length));
|
package/lib/es/func.js
CHANGED
package/lib/es/index.js
CHANGED
package/lib/es/isEqual.js
CHANGED
package/lib/es/math.js
CHANGED
package/lib/es/number.js
CHANGED
package/lib/es/object.js
CHANGED
package/lib/es/path.js
CHANGED
package/lib/es/qs.js
CHANGED
package/lib/es/random.js
CHANGED
package/lib/es/string.js
CHANGED
package/lib/es/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -8,16 +8,19 @@ import { getStrWidthPx } from './dom.js';
|
|
|
8
8
|
import { isString } from './type.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* 自定义的 tooltip, 支持鼠标移动动悬浮提示
|
|
12
12
|
* @Desc 自定义的tooltip方法, 支持拖动悬浮提示
|
|
13
13
|
* Created by chendeqiao on 2017/5/8.
|
|
14
14
|
* @example
|
|
15
|
-
* <span onmouseleave="handleMouseLeave('#root')"
|
|
16
|
-
*
|
|
15
|
+
* <span onmouseleave="handleMouseLeave('#root')"
|
|
16
|
+
* onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
|
|
17
|
+
* onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
|
|
18
|
+
* title content
|
|
19
|
+
* </span>
|
|
17
20
|
*/
|
|
18
21
|
/**
|
|
19
22
|
* 自定义title提示功能的mouseenter事件句柄
|
|
20
|
-
* @param {ITooltipParams}
|
|
23
|
+
* @param {ITooltipParams} param
|
|
21
24
|
* @returns {*}
|
|
22
25
|
*/
|
|
23
26
|
function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
|
package/lib/es/tree.js
CHANGED
package/lib/es/type.js
CHANGED
package/lib/es/unique.js
CHANGED
package/lib/es/url.js
CHANGED
package/lib/es/validator.js
CHANGED
package/lib/es/variable.js
CHANGED
package/lib/es/watermark.js
CHANGED
package/lib/es/we-decode.js
CHANGED
package/lib/index.d.ts
CHANGED
|
@@ -106,6 +106,23 @@ declare function arrayEach<V>(array: ArrayLike<V>, iterator: (val: V, idx: numbe
|
|
|
106
106
|
* @param {ArrayLike<V>} array 数组
|
|
107
107
|
* @param {(val: V, idx: number) => Promise<any>} iterator 支持Promise类型的回调函数
|
|
108
108
|
* @param {boolean} reverse 是否反向遍历
|
|
109
|
+
* @example
|
|
110
|
+
* 使用范例如下:
|
|
111
|
+
* const start = async () => {
|
|
112
|
+
* await arrayEachAsync(result, async (item) => {
|
|
113
|
+
* await request(item);
|
|
114
|
+
* count++;
|
|
115
|
+
* })
|
|
116
|
+
* console.log('发送次数', count);
|
|
117
|
+
* }
|
|
118
|
+
|
|
119
|
+
* for await...of 使用范例如下
|
|
120
|
+
* const loadImages = async (images) => {
|
|
121
|
+
* for await (const item of images) {
|
|
122
|
+
* await request(item);
|
|
123
|
+
* count++;
|
|
124
|
+
* }
|
|
125
|
+
* }
|
|
109
126
|
*/
|
|
110
127
|
declare function arrayEachAsync<V>(array: ArrayLike<V>, iterator: (val: V, idx: number) => Promise<any> | any, reverse?: boolean): Promise<void>;
|
|
111
128
|
/**
|
|
@@ -589,11 +606,12 @@ interface ICompressOptions {
|
|
|
589
606
|
}
|
|
590
607
|
/**
|
|
591
608
|
* Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
|
|
592
|
-
*
|
|
593
|
-
* @param {
|
|
609
|
+
*
|
|
610
|
+
* @param {File | FileList} file 图片或图片数组
|
|
611
|
+
* @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
|
|
594
612
|
* @returns {Promise<object> | undefined}
|
|
595
613
|
*/
|
|
596
|
-
declare function compressImg(file: File | FileList, options
|
|
614
|
+
declare function compressImg(file: File | FileList, options?: ICompressOptions): Promise<object> | undefined;
|
|
597
615
|
|
|
598
616
|
interface ICanvasWM {
|
|
599
617
|
rootContainer?: HTMLElement | string;
|
|
@@ -760,12 +778,15 @@ interface UniqueString {
|
|
|
760
778
|
declare const uniqueString: UniqueString;
|
|
761
779
|
|
|
762
780
|
/**
|
|
763
|
-
*
|
|
781
|
+
* 自定义的 tooltip, 支持鼠标移动动悬浮提示
|
|
764
782
|
* @Desc 自定义的tooltip方法, 支持拖动悬浮提示
|
|
765
783
|
* Created by chendeqiao on 2017/5/8.
|
|
766
784
|
* @example
|
|
767
|
-
* <span onmouseleave="handleMouseLeave('#root')"
|
|
768
|
-
*
|
|
785
|
+
* <span onmouseleave="handleMouseLeave('#root')"
|
|
786
|
+
* onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
|
|
787
|
+
* onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
|
|
788
|
+
* title content
|
|
789
|
+
* </span>
|
|
769
790
|
*/
|
|
770
791
|
interface ITooltipParams {
|
|
771
792
|
rootContainer: HTMLElement | string;
|
|
@@ -776,7 +797,7 @@ interface ITooltipParams {
|
|
|
776
797
|
}
|
|
777
798
|
/**
|
|
778
799
|
* 自定义title提示功能的mouseenter事件句柄
|
|
779
|
-
* @param {ITooltipParams}
|
|
800
|
+
* @param {ITooltipParams} param
|
|
780
801
|
* @returns {*}
|
|
781
802
|
*/
|
|
782
803
|
declare function handleMouseEnter({ rootContainer, title, event, bgColor, color }: ITooltipParams): void;
|
package/lib/umd/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -45,6 +45,23 @@
|
|
|
45
45
|
* @param {ArrayLike<V>} array 数组
|
|
46
46
|
* @param {(val: V, idx: number) => Promise<any>} iterator 支持Promise类型的回调函数
|
|
47
47
|
* @param {boolean} reverse 是否反向遍历
|
|
48
|
+
* @example
|
|
49
|
+
* 使用范例如下:
|
|
50
|
+
* const start = async () => {
|
|
51
|
+
* await arrayEachAsync(result, async (item) => {
|
|
52
|
+
* await request(item);
|
|
53
|
+
* count++;
|
|
54
|
+
* })
|
|
55
|
+
* console.log('发送次数', count);
|
|
56
|
+
* }
|
|
57
|
+
|
|
58
|
+
* for await...of 使用范例如下
|
|
59
|
+
* const loadImages = async (images) => {
|
|
60
|
+
* for await (const item of images) {
|
|
61
|
+
* await request(item);
|
|
62
|
+
* count++;
|
|
63
|
+
* }
|
|
64
|
+
* }
|
|
48
65
|
*/
|
|
49
66
|
async function arrayEachAsync(array, iterator, reverse = false) {
|
|
50
67
|
if (reverse) {
|
|
@@ -1485,16 +1502,73 @@
|
|
|
1485
1502
|
};
|
|
1486
1503
|
return inputObj;
|
|
1487
1504
|
}
|
|
1505
|
+
/**
|
|
1506
|
+
* 计算图片压缩后的尺寸
|
|
1507
|
+
*
|
|
1508
|
+
* @param {number} maxWidth
|
|
1509
|
+
* @param {number} maxHeight
|
|
1510
|
+
* @param {number} originWidth
|
|
1511
|
+
* @param {number} originHeight
|
|
1512
|
+
* @returns {*}
|
|
1513
|
+
*/
|
|
1514
|
+
function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
|
|
1515
|
+
let width = originWidth, height = originHeight;
|
|
1516
|
+
// 图片尺寸超过限制
|
|
1517
|
+
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
1518
|
+
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
1519
|
+
// 更宽，按照宽度限定尺寸
|
|
1520
|
+
width = maxWidth;
|
|
1521
|
+
height = Math.round(maxWidth * (originHeight / originWidth));
|
|
1522
|
+
}
|
|
1523
|
+
else {
|
|
1524
|
+
height = maxHeight;
|
|
1525
|
+
width = Math.round(maxHeight * (originWidth / originHeight));
|
|
1526
|
+
}
|
|
1527
|
+
}
|
|
1528
|
+
return { width, height };
|
|
1529
|
+
}
|
|
1530
|
+
/**
|
|
1531
|
+
* 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
|
|
1532
|
+
*
|
|
1533
|
+
* @param {number} sizeKB
|
|
1534
|
+
* @param {number} originWidth
|
|
1535
|
+
* @param {number} originHeight
|
|
1536
|
+
* @returns {*}
|
|
1537
|
+
*/
|
|
1538
|
+
function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
|
|
1539
|
+
let targetWidth = originWidth, targetHeight = originHeight;
|
|
1540
|
+
if (1 * 1024 <= sizeKB && sizeKB < 10 * 1024) {
|
|
1541
|
+
// [1MB, 10MB)
|
|
1542
|
+
const maxWidth = 1600, maxHeight = 1600;
|
|
1543
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
1544
|
+
targetWidth = width;
|
|
1545
|
+
targetHeight = height;
|
|
1546
|
+
}
|
|
1547
|
+
else if (10 * 1024 <= sizeKB) {
|
|
1548
|
+
// [10MB, Infinity)
|
|
1549
|
+
const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2000, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2000;
|
|
1550
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
1551
|
+
targetWidth = width;
|
|
1552
|
+
targetHeight = height;
|
|
1553
|
+
}
|
|
1554
|
+
return { width: targetWidth, height: targetHeight };
|
|
1555
|
+
}
|
|
1488
1556
|
/**
|
|
1489
1557
|
* Web端：等比例压缩图片批量处理 (size小于200KB，不压缩)
|
|
1490
|
-
*
|
|
1491
|
-
* @param {
|
|
1558
|
+
*
|
|
1559
|
+
* @param {File | FileList} file 图片或图片数组
|
|
1560
|
+
* @param {ICompressOptions} options 压缩图片配置项，default: {quality:0.52,mime:'image/jpeg'}
|
|
1492
1561
|
* @returns {Promise<object> | undefined}
|
|
1493
1562
|
*/
|
|
1494
|
-
function compressImg(file, options) {
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1563
|
+
function compressImg(file, options = { quality: 0.52, mime: 'image/jpeg' }) {
|
|
1564
|
+
if (!(file instanceof File || file instanceof FileList)) {
|
|
1565
|
+
throw new Error(`${file} require be File or FileList`);
|
|
1566
|
+
}
|
|
1567
|
+
else if (!supportCanvas()) {
|
|
1568
|
+
throw new Error(`Current runtime environment not support Canvas`);
|
|
1569
|
+
}
|
|
1570
|
+
const { quality = 0.52, mime = 'image/jpeg' } = isObject(options) ? options : {};
|
|
1571
|
+
let targetQuality = quality;
|
|
1498
1572
|
if (file instanceof File) {
|
|
1499
1573
|
const sizeKB = +parseInt((file.size / 1024).toFixed(2));
|
|
1500
1574
|
if (sizeKB < 1 * 1024) {
|
|
@@ -1503,8 +1577,11 @@
|
|
|
1503
1577
|
else if (sizeKB >= 1 * 1024 && sizeKB < 5 * 1024) {
|
|
1504
1578
|
targetQuality = 0.62;
|
|
1505
1579
|
}
|
|
1506
|
-
else if (sizeKB >= 5 * 1024) {
|
|
1507
|
-
targetQuality = 0.
|
|
1580
|
+
else if (sizeKB >= 5 * 1024 && sizeKB < 10 * 1024) {
|
|
1581
|
+
targetQuality = 0.75;
|
|
1582
|
+
}
|
|
1583
|
+
else if (sizeKB >= 10 * 1024) {
|
|
1584
|
+
targetQuality = 0.92;
|
|
1508
1585
|
}
|
|
1509
1586
|
}
|
|
1510
1587
|
if (options.quality) {
|
|
@@ -1529,49 +1606,14 @@
|
|
|
1529
1606
|
image.onload = () => {
|
|
1530
1607
|
const canvas = document.createElement('canvas'); // 创建 canvas 元素
|
|
1531
1608
|
const context = canvas.getContext('2d');
|
|
1532
|
-
let targetWidth = image.width;
|
|
1533
|
-
let targetHeight = image.height;
|
|
1534
1609
|
const originWidth = image.width;
|
|
1535
1610
|
const originHeight = image.height;
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
1543
|
-
// 更宽，按照宽度限定尺寸
|
|
1544
|
-
targetWidth = maxWidth;
|
|
1545
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
1546
|
-
}
|
|
1547
|
-
else {
|
|
1548
|
-
targetHeight = maxHeight;
|
|
1549
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
1550
|
-
}
|
|
1551
|
-
}
|
|
1552
|
-
}
|
|
1553
|
-
if (10 * 1024 <= sizeKB && sizeKB <= 20 * 1024) {
|
|
1554
|
-
const maxWidth = 1400, maxHeight = 1400;
|
|
1555
|
-
targetWidth = originWidth;
|
|
1556
|
-
targetHeight = originHeight;
|
|
1557
|
-
// 图片尺寸超过的限制
|
|
1558
|
-
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
1559
|
-
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
1560
|
-
// 更宽，按照宽度限定尺寸
|
|
1561
|
-
targetWidth = maxWidth;
|
|
1562
|
-
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
|
1563
|
-
}
|
|
1564
|
-
else {
|
|
1565
|
-
targetHeight = maxHeight;
|
|
1566
|
-
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
|
1567
|
-
}
|
|
1568
|
-
}
|
|
1569
|
-
}
|
|
1570
|
-
canvas.width = targetWidth;
|
|
1571
|
-
canvas.height = targetHeight;
|
|
1572
|
-
context.clearRect(0, 0, targetWidth, targetHeight);
|
|
1573
|
-
context.drawImage(image, 0, 0, targetWidth, targetHeight); // 绘制 canvas
|
|
1574
|
-
const canvasURL = canvas.toDataURL(options.mime, targetQuality);
|
|
1611
|
+
const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
|
|
1612
|
+
canvas.width = width;
|
|
1613
|
+
canvas.height = height;
|
|
1614
|
+
context.clearRect(0, 0, width, height);
|
|
1615
|
+
context.drawImage(image, 0, 0, width, height); // 绘制 canvas
|
|
1616
|
+
const canvasURL = canvas.toDataURL(mime, targetQuality);
|
|
1575
1617
|
const buffer = weAtob(canvasURL.split(',')[1]);
|
|
1576
1618
|
let length = buffer.length;
|
|
1577
1619
|
const bufferArray = new Uint8Array(new ArrayBuffer(length));
|
|
@@ -2032,16 +2074,19 @@
|
|
|
2032
2074
|
};
|
|
2033
2075
|
|
|
2034
2076
|
/**
|
|
2035
|
-
*
|
|
2077
|
+
* 自定义的 tooltip, 支持鼠标移动动悬浮提示
|
|
2036
2078
|
* @Desc 自定义的tooltip方法, 支持拖动悬浮提示
|
|
2037
2079
|
* Created by chendeqiao on 2017/5/8.
|
|
2038
2080
|
* @example
|
|
2039
|
-
* <span onmouseleave="handleMouseLeave('#root')"
|
|
2040
|
-
*
|
|
2081
|
+
* <span onmouseleave="handleMouseLeave('#root')"
|
|
2082
|
+
* onmousemove="handleMouseEnter({rootContainer: '#root', title: 'title content', event: event})"
|
|
2083
|
+
* onmouseenter="handleMouseEnter({rootContainer:'#root', title: 'title content', event: event})">
|
|
2084
|
+
* title content
|
|
2085
|
+
* </span>
|
|
2041
2086
|
*/
|
|
2042
2087
|
/**
|
|
2043
2088
|
* 自定义title提示功能的mouseenter事件句柄
|
|
2044
|
-
* @param {ITooltipParams}
|
|
2089
|
+
* @param {ITooltipParams} param
|
|
2045
2090
|
* @returns {*}
|
|
2046
2091
|
*/
|
|
2047
2092
|
function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
|