utils.js
5.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
export function getWatermarkCanvasImg(width, height, text, image) {
const canvas = document.createElement('canvas');
// 若不设置宽、高，无法渲染内容
canvas.width = width;
canvas.height = height;
// canvas.height = this.height - 40; // 40为底部工具条
canvas.className = 'watermark';
console.log('createCanvas', canvas);
// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');
// 在 Canvas 上绘制原始图片
if (image) {
ctx.drawImage(image, 0, 0);
}
// 绘制水印文本
ctx.font = '24px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
// 定义水印内容
const watermarkText = text;
// 定义水印间隔和边距
// TODO: 未兼容移动端
const watermarkIntervalX = 220; // 水印之间的水平间隔
const watermarkIntervalY = 220; // 水印之间的垂直间隔
const watermarkMarginX = 50; // 水印距离左边的边距
const watermarkMarginY = 180; // 水印距离顶部的边距
// 循环绘制水印
for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
for (let y = watermarkMarginY; y < canvas.height; y += watermarkIntervalY) {
// 保存当前绘图状态以便恢复
ctx.save();
// 将坐标原点移动到水印位置
ctx.translate(x, y);
// 旋转文本
ctx.rotate(-Math.PI / 4); // 旋转-45度（以弧度表示）
// 绘制水印文本
ctx.fillText(watermarkText, 0, 0);
// 恢复绘图状态
ctx.restore();
}
}
return canvas;
// return canvas.toDataURL('image/png');
}
// 支持MSE H265解码
export function checkSupportMSEHevc() {
return window.MediaSource && window.MediaSource.isTypeSupported('video/mp4; codecs="hev1.1.6.L123.b0"');
}
// 支持Webcodecs H265解码
export function checkSupportWCSHevc() {
const browserInfo = getBrowser();
const supportWCS = checkSupportWCS();
return supportWCS && browserInfo.type.toLowerCase() === 'chrome' && browserInfo.version >= 107 && (location.protocol === 'https:' || location.hostname === 'localhost');
}
// 支持WASM解码
export function checkSupportWasm() {
try {
if (typeof window.WebAssembly === 'object' && typeof window.WebAssembly.instantiate === 'function') {
const module = new window.WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
if (module instanceof window.WebAssembly.Module) {
return new window.WebAssembly.Instance(module) instanceof window.WebAssembly.Instance;
}
}
return false;
} catch (e) {
return false;
}
}
// 支持WASM SIMD解码
export function checkSupportSIMD() {
return WebAssembly && WebAssembly.validate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0, 253, 15, 253, 98, 11]));
}
function checkSupportWCS() {
return "VideoEncoder" in window;
}
function getBrowser() {
const UserAgent = window.navigator.userAgent.toLowerCase() || '';
let browserInfo = {
type: '',
version: ''
};
var browserArray = {
IE: window.ActiveXObject || "ActiveXObject" in window, // IE
Chrome: UserAgent.indexOf('chrome') > -1 && UserAgent.indexOf('safari') > -1, // Chrome浏览器
Firefox: UserAgent.indexOf('firefox') > -1, // 火狐浏览器
Opera: UserAgent.indexOf('opera') > -1, // Opera浏览器
Safari: UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1, // safari浏览器
Edge: UserAgent.indexOf('edge') > -1, // Edge浏览器
QQBrowser: /qqbrowser/.test(UserAgent), // qq浏览器
WeixinBrowser: /MicroMessenger/i.test(UserAgent) // 微信浏览器
};
// console.log(browserArray)
for (let i in browserArray) {
if (browserArray[i]) {
let versions = '';
if (i === 'IE') {
const versionArray = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)
if (versionArray && versionArray.length > 2) {
versions = UserAgent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2];
}
} else if (i === 'Chrome') {
for (let mt in navigator.mimeTypes) {
//检测是否是360浏览器(测试只有pc端的360才起作用)
if (navigator.mimeTypes[mt]['type'] === 'application/360softmgrplugin') {
i = '360';
}
}
const versionArray = UserAgent.match(/chrome\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
} else if (i === 'Firefox') {
const versionArray = UserAgent.match(/firefox\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
} else if (i === 'Opera') {
const versionArray = UserAgent.match(/opera\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
} else if (i === 'Safari') {
const versionArray = UserAgent.match(/version\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
} else if (i === 'Edge') {
const versionArray = UserAgent.match(/edge\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
} else if (i === 'QQBrowser') {
const versionArray = UserAgent.match(/qqbrowser\/([\d.]+)/);
if (versionArray && versionArray.length > 1) {
versions = versionArray[1];
}
}
browserInfo.type = i;
browserInfo.version = parseInt(versions);
}
}
return browserInfo;
}