sculp-js 1.10.0 → 1.10.2
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 +101 -63
- 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 +101 -63
- 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 +221 -163
- 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.2
|
|
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,12 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.10.
|
|
2
|
+
* sculp-js v1.10.2
|
|
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
|
|
9
|
+
var type = require('./type.js');
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* 判断是否支持canvas
|
|
@@ -36,38 +36,111 @@ function chooseLocalFile(accept, changeCb) {
|
|
|
36
36
|
};
|
|
37
37
|
return inputObj;
|
|
38
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* 计算图片压缩后的尺寸
|
|
41
|
+
*
|
|
42
|
+
* @param {number} maxWidth
|
|
43
|
+
* @param {number} maxHeight
|
|
44
|
+
* @param {number} originWidth
|
|
45
|
+
* @param {number} originHeight
|
|
46
|
+
* @returns {*}
|
|
47
|
+
*/
|
|
48
|
+
function calculateSize({ maxWidth, maxHeight, originWidth, originHeight }) {
|
|
49
|
+
let width = originWidth, height = originHeight;
|
|
50
|
+
// 图片尺寸超过限制
|
|
51
|
+
if (originWidth > maxWidth || originHeight > maxHeight) {
|
|
52
|
+
if (originWidth / originHeight > maxWidth / maxHeight) {
|
|
53
|
+
// 更宽,按照宽度限定尺寸
|
|
54
|
+
width = maxWidth;
|
|
55
|
+
height = Math.round(maxWidth * (originHeight / originWidth));
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
height = maxHeight;
|
|
59
|
+
width = Math.round(maxHeight * (originWidth / originHeight));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return { width, height };
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* 根据原始图片的不同尺寸计算等比例缩放后的宽高尺寸
|
|
66
|
+
*
|
|
67
|
+
* @param {number} sizeKB
|
|
68
|
+
* @param {number} originWidth
|
|
69
|
+
* @param {number} originHeight
|
|
70
|
+
* @returns {*}
|
|
71
|
+
*/
|
|
72
|
+
function scalingByAspectRatio({ sizeKB, originWidth, originHeight }) {
|
|
73
|
+
let targetWidth = originWidth, targetHeight = originHeight;
|
|
74
|
+
if (sizeKB <= 500) {
|
|
75
|
+
// [50KB, 500KB]
|
|
76
|
+
const maxWidth = 1200, maxHeight = 1200;
|
|
77
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
78
|
+
targetWidth = width;
|
|
79
|
+
targetHeight = height;
|
|
80
|
+
}
|
|
81
|
+
else if (sizeKB < 10 * 1024) {
|
|
82
|
+
// (500KB, 10MB)
|
|
83
|
+
const maxWidth = 1600, maxHeight = 1600;
|
|
84
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
85
|
+
targetWidth = width;
|
|
86
|
+
targetHeight = height;
|
|
87
|
+
}
|
|
88
|
+
else if (10 * 1024 <= sizeKB) {
|
|
89
|
+
// [10MB, Infinity)
|
|
90
|
+
const maxWidth = originWidth > 15000 ? 8192 : originWidth > 10000 ? 4096 : 2048, maxHeight = originHeight > 15000 ? 8192 : originHeight > 10000 ? 4096 : 2048;
|
|
91
|
+
const { width, height } = calculateSize({ maxWidth, maxHeight, originWidth, originHeight });
|
|
92
|
+
targetWidth = width;
|
|
93
|
+
targetHeight = height;
|
|
94
|
+
}
|
|
95
|
+
return { width: targetWidth, height: targetHeight };
|
|
96
|
+
}
|
|
39
97
|
/**
|
|
40
98
|
* Web端:等比例压缩图片批量处理 (size小于200KB,不压缩)
|
|
41
|
-
*
|
|
42
|
-
* @param {
|
|
99
|
+
*
|
|
100
|
+
* @param {File | FileList} file 图片或图片数组
|
|
101
|
+
* @param {ICompressOptions} options 压缩图片配置项,default: {mime:'image/jpeg'}
|
|
43
102
|
* @returns {Promise<object> | undefined}
|
|
44
103
|
*/
|
|
45
|
-
function compressImg(file, options) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (
|
|
104
|
+
function compressImg(file, options = { mime: 'image/jpeg' }) {
|
|
105
|
+
if (!(file instanceof File || file instanceof FileList)) {
|
|
106
|
+
throw new Error(`${file} require be File or FileList`);
|
|
107
|
+
}
|
|
108
|
+
else if (!supportCanvas()) {
|
|
109
|
+
throw new Error(`Current runtime environment not support Canvas`);
|
|
110
|
+
}
|
|
111
|
+
const { quality, mime = 'image/jpeg' } = type.isObject(options) ? options : {};
|
|
112
|
+
let targetQuality = quality;
|
|
113
|
+
if (quality) {
|
|
114
|
+
targetQuality = quality;
|
|
115
|
+
}
|
|
116
|
+
else if (file instanceof File) {
|
|
50
117
|
const sizeKB = +parseInt((file.size / 1024).toFixed(2));
|
|
51
|
-
if (sizeKB < 1 *
|
|
118
|
+
if (sizeKB < 1 * 50) {
|
|
119
|
+
targetQuality = 1;
|
|
120
|
+
}
|
|
121
|
+
else if (sizeKB < 1 * 1024) {
|
|
52
122
|
targetQuality = 0.85;
|
|
53
123
|
}
|
|
54
|
-
else if (sizeKB
|
|
55
|
-
targetQuality = 0.
|
|
124
|
+
else if (sizeKB < 5 * 1024) {
|
|
125
|
+
targetQuality = 0.8;
|
|
56
126
|
}
|
|
57
|
-
else
|
|
58
|
-
targetQuality = 0.
|
|
127
|
+
else {
|
|
128
|
+
targetQuality = 0.75;
|
|
59
129
|
}
|
|
60
130
|
}
|
|
61
|
-
if (options.quality) {
|
|
62
|
-
targetQuality = options.quality;
|
|
63
|
-
}
|
|
64
131
|
if (file instanceof FileList) {
|
|
65
|
-
return Promise.all(Array.from(file).map(el => compressImg(el, { mime:
|
|
132
|
+
return Promise.all(Array.from(file).map(el => compressImg(el, { mime: mime, quality: targetQuality }))); // 如果是 file 数组返回 Promise 数组
|
|
66
133
|
}
|
|
67
134
|
else if (file instanceof File) {
|
|
68
135
|
return new Promise(resolve => {
|
|
136
|
+
const ext = {
|
|
137
|
+
'image/webp': 'webp',
|
|
138
|
+
'image/jpeg': 'jpg',
|
|
139
|
+
'image/png': 'png'
|
|
140
|
+
};
|
|
141
|
+
const fileName = [...file.name.split('.').slice(0, -1), ext[mime]].join('.');
|
|
69
142
|
const sizeKB = +parseInt((file.size / 1024).toFixed(2));
|
|
70
|
-
if (+(file.size / 1024).toFixed(2) <
|
|
143
|
+
if (+(file.size / 1024).toFixed(2) < 50) {
|
|
71
144
|
resolve({
|
|
72
145
|
file: file
|
|
73
146
|
});
|
|
@@ -80,57 +153,22 @@ function compressImg(file, options) {
|
|
|
80
153
|
image.onload = () => {
|
|
81
154
|
const canvas = document.createElement('canvas'); // 创建 canvas 元素
|
|
82
155
|
const context = canvas.getContext('2d');
|
|
83
|
-
let targetWidth = image.width;
|
|
84
|
-
let targetHeight = image.height;
|
|
85
156
|
const originWidth = image.width;
|
|
86
157
|
const originHeight = image.height;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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);
|
|
126
|
-
const buffer = weDecode.weAtob(canvasURL.split(',')[1]);
|
|
158
|
+
const { width, height } = scalingByAspectRatio({ sizeKB, originWidth, originHeight });
|
|
159
|
+
canvas.width = width;
|
|
160
|
+
canvas.height = height;
|
|
161
|
+
context.clearRect(0, 0, width, height);
|
|
162
|
+
context.drawImage(image, 0, 0, width, height); // 绘制 canvas
|
|
163
|
+
const canvasURL = canvas.toDataURL(mime, targetQuality);
|
|
164
|
+
const buffer = atob(canvasURL.split(',')[1]);
|
|
127
165
|
let length = buffer.length;
|
|
128
166
|
const bufferArray = new Uint8Array(new ArrayBuffer(length));
|
|
129
167
|
while (length--) {
|
|
130
168
|
bufferArray[length] = buffer.charCodeAt(length);
|
|
131
169
|
}
|
|
132
|
-
const miniFile = new File([bufferArray],
|
|
133
|
-
type:
|
|
170
|
+
const miniFile = new File([bufferArray], fileName, {
|
|
171
|
+
type: mime
|
|
134
172
|
});
|
|
135
173
|
resolve({
|
|
136
174
|
file: miniFile,
|
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.2
|
|
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.2
|
|
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