sculp-js 1.9.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 +11 -7
- 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 +10 -4
- 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 +25 -18
- 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 +20 -19
- 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 +11 -7
- 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 +10 -4
- 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 +25 -18
- 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 +20 -19
- package/lib/es/we-decode.js +1 -1
- package/lib/index.d.ts +50 -26
- package/lib/umd/index.js +151 -94
- package/package.json +2 -1
package/lib/es/array.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.
|
|
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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -131,28 +131,32 @@ function getComputedCssVal(el, property, reNumber = true) {
|
|
|
131
131
|
* 字符串的像素宽度
|
|
132
132
|
* @param {string} str 目标字符串
|
|
133
133
|
* @param {number} fontSize 字符串字体大小
|
|
134
|
-
* @param {boolean}
|
|
134
|
+
* @param {boolean} isRemove 计算后是否移除创建的dom元素
|
|
135
135
|
* @returns {*}
|
|
136
136
|
*/
|
|
137
|
-
function getStrWidthPx(str, fontSize = 14,
|
|
137
|
+
function getStrWidthPx(str, fontSize = 14, isRemove = true) {
|
|
138
138
|
let strWidth = 0;
|
|
139
139
|
console.assert(isString(str), `${str} 不是有效的字符串`);
|
|
140
140
|
if (isString(str) && str.length > 0) {
|
|
141
|
-
|
|
141
|
+
const id = 'getStrWidth1494304949567';
|
|
142
|
+
let getEle = document.querySelector(`#${id}`);
|
|
142
143
|
if (!getEle) {
|
|
143
144
|
const _ele = document.createElement('span');
|
|
144
|
-
_ele.id =
|
|
145
|
+
_ele.id = id;
|
|
145
146
|
_ele.style.fontSize = fontSize + 'px';
|
|
146
147
|
_ele.style.whiteSpace = 'nowrap';
|
|
147
148
|
_ele.style.visibility = 'hidden';
|
|
149
|
+
_ele.style.position = 'absolute';
|
|
150
|
+
_ele.style.top = '-9999px';
|
|
151
|
+
_ele.style.left = '-9999px';
|
|
148
152
|
_ele.textContent = str;
|
|
149
153
|
document.body.appendChild(_ele);
|
|
150
154
|
getEle = _ele;
|
|
151
155
|
}
|
|
152
156
|
getEle.textContent = str;
|
|
153
157
|
strWidth = getEle.offsetWidth;
|
|
154
|
-
if (
|
|
155
|
-
|
|
158
|
+
if (isRemove) {
|
|
159
|
+
getEle.remove();
|
|
156
160
|
}
|
|
157
161
|
}
|
|
158
162
|
return strWidth;
|
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.
|
|
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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.
|
|
2
|
+
* sculp-js v1.10.1
|
|
3
3
|
* (c) 2023-present chandq
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -76,11 +76,17 @@ const numberAbbr = (num, units, options = { ratio: 1000, decimals: 0, separator:
|
|
|
76
76
|
* ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
|
|
77
77
|
* @returns
|
|
78
78
|
*/
|
|
79
|
-
function humanFileSize(num, options) {
|
|
80
|
-
const { decimals = 0, si = false, separator = ' ', maxUnit } = options;
|
|
81
|
-
|
|
79
|
+
function humanFileSize(num, options = { decimals: 0, si: false, separator: ' ' }) {
|
|
80
|
+
const { decimals = 0, si = false, separator = ' ', baseUnit, maxUnit } = options;
|
|
81
|
+
let units = si
|
|
82
82
|
? ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
83
83
|
: ['Byte', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
|
84
|
+
if (!isNullOrUnDef(baseUnit)) {
|
|
85
|
+
const targetIndex = units.findIndex(el => el === baseUnit);
|
|
86
|
+
if (targetIndex !== -1) {
|
|
87
|
+
units = units.slice(targetIndex);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
84
90
|
if (!isNullOrUnDef(maxUnit)) {
|
|
85
91
|
const targetIndex = units.findIndex(el => el === maxUnit);
|
|
86
92
|
if (targetIndex !== -1) {
|
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,55 +1,62 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.
|
|
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
|
import { getStrWidthPx } from './dom.js';
|
|
8
|
+
import { isString } from './type.js';
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
|
-
*
|
|
11
|
+
* 自定义的 tooltip, 支持鼠标移动动悬浮提示
|
|
11
12
|
* @Desc 自定义的tooltip方法, 支持拖动悬浮提示
|
|
12
13
|
* Created by chendeqiao on 2017/5/8.
|
|
13
14
|
* @example
|
|
14
|
-
* <span onmouseleave="handleMouseLeave('#root')"
|
|
15
|
-
*
|
|
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>
|
|
16
20
|
*/
|
|
17
21
|
/**
|
|
18
22
|
* 自定义title提示功能的mouseenter事件句柄
|
|
19
|
-
* @param {ITooltipParams}
|
|
23
|
+
* @param {ITooltipParams} param
|
|
20
24
|
* @returns {*}
|
|
21
25
|
*/
|
|
22
|
-
function handleMouseEnter({
|
|
26
|
+
function handleMouseEnter({ rootContainer = '#root', title, event, bgColor = '#000', color = '#fff' }) {
|
|
23
27
|
try {
|
|
24
|
-
const $rootEl = document.querySelector(
|
|
25
|
-
|
|
28
|
+
const $rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
|
|
29
|
+
if (!$rootEl) {
|
|
30
|
+
throw new Error(`${rootContainer} is not valid Html Element or element selector`);
|
|
31
|
+
}
|
|
26
32
|
let $customTitle = null;
|
|
33
|
+
const styleId = 'style-tooltip-inner1494304949567';
|
|
27
34
|
// 动态创建class样式,并加入到head中
|
|
28
|
-
if (!document.querySelector(
|
|
35
|
+
if (!document.querySelector(`#${styleId}`)) {
|
|
29
36
|
const tooltipWrapperClass = document.createElement('style');
|
|
30
37
|
tooltipWrapperClass.type = 'text/css';
|
|
38
|
+
tooltipWrapperClass.id = styleId;
|
|
31
39
|
tooltipWrapperClass.innerHTML = `
|
|
32
40
|
.tooltip-inner1494304949567 {
|
|
33
41
|
max-width: 250px;
|
|
34
42
|
padding: 3px 8px;
|
|
35
|
-
color:
|
|
43
|
+
color: ${color};
|
|
36
44
|
text-decoration: none;
|
|
37
45
|
border-radius: 4px;
|
|
38
46
|
text-align: left;
|
|
47
|
+
background-color: ${bgColor};
|
|
39
48
|
}
|
|
40
49
|
`;
|
|
41
50
|
document.querySelector('head').appendChild(tooltipWrapperClass);
|
|
42
51
|
}
|
|
43
|
-
|
|
44
|
-
|
|
52
|
+
$customTitle = document.querySelector('#customTitle1494304949567');
|
|
53
|
+
if ($customTitle) {
|
|
45
54
|
mouseenter($customTitle, title, event);
|
|
46
55
|
}
|
|
47
56
|
else {
|
|
48
57
|
const $contentContainer = document.createElement('div');
|
|
49
|
-
$contentContainer.className = 'customTitle';
|
|
50
58
|
$contentContainer.id = 'customTitle1494304949567';
|
|
51
|
-
$contentContainer.
|
|
52
|
-
$contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden;';
|
|
59
|
+
$contentContainer.style.cssText = 'z-index: 99999999; visibility: hidden; position: absolute;';
|
|
53
60
|
$contentContainer.innerHTML =
|
|
54
61
|
'<div class="tooltip-inner1494304949567" style="word-wrap: break-word; max-width: 44px;">皮肤</div>';
|
|
55
62
|
$rootEl.appendChild($contentContainer);
|
|
@@ -102,11 +109,11 @@ function mouseenter($customTitle, title, e) {
|
|
|
102
109
|
}
|
|
103
110
|
/**
|
|
104
111
|
* 移除提示文案dom的事件句柄
|
|
105
|
-
* @param {string}
|
|
112
|
+
* @param {string} rootContainer
|
|
106
113
|
* @returns {*}
|
|
107
114
|
*/
|
|
108
|
-
function handleMouseLeave(
|
|
109
|
-
const rootEl = document.querySelector(
|
|
115
|
+
function handleMouseLeave(rootContainer = '#root') {
|
|
116
|
+
const rootEl = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer, titleEl = document.querySelector('#customTitle1494304949567');
|
|
110
117
|
if (rootEl && titleEl) {
|
|
111
118
|
rootEl.removeChild(titleEl);
|
|
112
119
|
}
|
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
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* sculp-js v1.
|
|
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 { isString, isNullOrUnDef } from './type.js';
|
|
8
|
+
|
|
7
9
|
/*
|
|
8
10
|
* @created: Saturday, 2020-04-18 14:38:23
|
|
9
11
|
* @author: chendq
|
|
@@ -15,15 +17,14 @@
|
|
|
15
17
|
* @param {ICanvasWM} canvasWM
|
|
16
18
|
* @example genCanvasWM({ content: 'QQMusicFE' })
|
|
17
19
|
*/
|
|
18
|
-
function genCanvasWM(canvasWM) {
|
|
19
|
-
const {
|
|
20
|
+
function genCanvasWM(content = '请勿外传', canvasWM) {
|
|
21
|
+
const { rootContainer = document.body, width = '300px', height = '150px', textAlign = 'center', textBaseline = 'middle', font = '20px PingFangSC-Medium,PingFang SC',
|
|
20
22
|
// fontWeight = 500,
|
|
21
|
-
fillStyle = 'rgba(189, 177, 167, .3)',
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const args = canvasWM;
|
|
23
|
+
fillStyle = 'rgba(189, 177, 167, .3)', rotate = -20, zIndex = 2147483647, watermarkId = '__wm' } = isNullOrUnDef(canvasWM) ? {} : canvasWM;
|
|
24
|
+
const container = isString(rootContainer) ? document.querySelector(rootContainer) : rootContainer;
|
|
25
|
+
if (!container) {
|
|
26
|
+
throw new Error(`${rootContainer} is not valid Html Element or element selector`);
|
|
27
|
+
}
|
|
27
28
|
const canvas = document.createElement('canvas');
|
|
28
29
|
canvas.setAttribute('width', width);
|
|
29
30
|
canvas.setAttribute('height', height);
|
|
@@ -36,36 +37,36 @@ function genCanvasWM(canvasWM) {
|
|
|
36
37
|
ctx.rotate((Math.PI / 180) * rotate);
|
|
37
38
|
ctx.fillText(content, parseFloat(width) / 4, parseFloat(height) / 2);
|
|
38
39
|
const base64Url = canvas.toDataURL();
|
|
39
|
-
const __wm = document.querySelector(
|
|
40
|
+
const __wm = document.querySelector(`#${watermarkId}`);
|
|
40
41
|
const watermarkDiv = __wm || document.createElement('div');
|
|
41
42
|
const styleStr = `opacity: 1 !important; display: block !important; visibility: visible !important; position:absolute; left:0; top:0; width:100%; height:100%; z-index:${zIndex}; pointer-events:none; background-repeat:repeat; background-image:url('${base64Url}')`;
|
|
42
43
|
watermarkDiv.setAttribute('style', styleStr);
|
|
43
|
-
watermarkDiv.
|
|
44
|
+
watermarkDiv.setAttribute('id', watermarkId);
|
|
44
45
|
watermarkDiv.classList.add('nav-height');
|
|
45
46
|
if (!__wm) {
|
|
46
47
|
container.style.position = 'relative';
|
|
47
48
|
container.appendChild(watermarkDiv);
|
|
48
49
|
}
|
|
49
50
|
const getMutableStyle = (ele) => {
|
|
50
|
-
const
|
|
51
|
+
const computedStyle = getComputedStyle(ele);
|
|
51
52
|
return {
|
|
52
|
-
opacity:
|
|
53
|
-
zIndex:
|
|
54
|
-
display:
|
|
55
|
-
visibility:
|
|
53
|
+
opacity: computedStyle.getPropertyValue('opacity'),
|
|
54
|
+
zIndex: computedStyle.getPropertyValue('z-index'),
|
|
55
|
+
display: computedStyle.getPropertyValue('display'),
|
|
56
|
+
visibility: computedStyle.getPropertyValue('visibility')
|
|
56
57
|
};
|
|
57
58
|
};
|
|
58
59
|
//@ts-ignore
|
|
59
60
|
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
|
60
61
|
if (MutationObserver) {
|
|
61
62
|
let mo = new MutationObserver(function () {
|
|
62
|
-
const __wm = document.querySelector(
|
|
63
|
+
const __wm = document.querySelector(`#${watermarkId}`); // 只在__wm元素变动才重新调用 __canvasWM
|
|
63
64
|
if (!__wm) {
|
|
64
65
|
// 避免一直触发
|
|
65
66
|
// console.log('regenerate watermark by delete::')
|
|
66
67
|
mo.disconnect();
|
|
67
68
|
mo = null;
|
|
68
|
-
genCanvasWM(
|
|
69
|
+
genCanvasWM(content, canvasWM);
|
|
69
70
|
}
|
|
70
71
|
else {
|
|
71
72
|
const { opacity, zIndex, display, visibility } = getMutableStyle(__wm);
|
|
@@ -77,7 +78,7 @@ function genCanvasWM(canvasWM) {
|
|
|
77
78
|
mo.disconnect();
|
|
78
79
|
mo = null;
|
|
79
80
|
container.removeChild(__wm);
|
|
80
|
-
genCanvasWM(
|
|
81
|
+
genCanvasWM(content, canvasWM);
|
|
81
82
|
}
|
|
82
83
|
}
|
|
83
84
|
});
|
package/lib/es/we-decode.js
CHANGED