初始化移动端提交
This commit is contained in:
chenbowen
0
sheep/components/s-verify/s-verify-points.vue
Normal file
0
sheep/components/s-verify/s-verify-points.vue
Normal file
0
sheep/components/s-verify/s-verify-slide.vue
Normal file
0
sheep/components/s-verify/s-verify-slide.vue
Normal file
569
sheep/components/s-verify/s-verify.vue
Normal file
569
sheep/components/s-verify/s-verify.vue
Normal file
@@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="visible" class="s-verify-mask" @touchmove.stop.prevent>
|
||||
<view class="s-verify-wrapper" @tap.stop>
|
||||
<view class="s-verify-header">
|
||||
<text class="s-verify-title">安全验证</text>
|
||||
<view class="s-verify-close" @tap="handleClose">×</view>
|
||||
</view>
|
||||
|
||||
<view class="s-verify-body">
|
||||
<view class="s-verify-image" :style="imageStyle">
|
||||
<image
|
||||
v-if="backgroundImage"
|
||||
class="s-verify-image-bg"
|
||||
:src="backgroundImage"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
v-if="showBlock"
|
||||
class="s-verify-image-block"
|
||||
:style="blockStyle"
|
||||
:src="blockImage"
|
||||
mode="widthFix"
|
||||
/>
|
||||
|
||||
<view class="s-verify-refresh" @tap="refreshCaptcha">
|
||||
<text>↻</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="s-verify-loading">加载中...</view>
|
||||
</view>
|
||||
|
||||
<view v-if="tipMessage" :class="['s-verify-tip', tipClass]">
|
||||
{{ tipMessage }}
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="s-verify-slider"
|
||||
ref="sliderRef"
|
||||
@touchstart.stop.prevent="onDragStart"
|
||||
@touchmove.stop.prevent="onDragMove"
|
||||
@touchend.stop.prevent="onDragEnd"
|
||||
@mousedown.stop="onMouseDown"
|
||||
>
|
||||
<view class="s-verify-slider-track" />
|
||||
<view class="s-verify-slider-fill" :style="sliderFillStyle" />
|
||||
<view
|
||||
class="s-verify-slider-handle"
|
||||
:class="{
|
||||
's-verify-slider-success': success,
|
||||
's-verify-slider-fail': failAnimate
|
||||
}"
|
||||
:style="sliderHandleStyle"
|
||||
>
|
||||
<text class="s-verify-handle-icon">{{ success ? '✔' : '›' }}</text>
|
||||
</view>
|
||||
<text class="s-verify-slider-text">{{ sliderHint }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
|
||||
import AuthUtil from '@/sheep/api/system/auth';
|
||||
import { aesEncrypt } from '@/sheep/components/s-verify/utils/aes';
|
||||
|
||||
const props = defineProps({
|
||||
captchaType: {
|
||||
type: String,
|
||||
default: 'blockPuzzle',
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'pop',
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['success', 'error']);
|
||||
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const success = ref(false);
|
||||
const failAnimate = ref(false);
|
||||
const verifying = ref(false);
|
||||
const tipMessage = ref('');
|
||||
const sliderRef = ref(null);
|
||||
|
||||
const sliderWidth = 310;
|
||||
const sliderHeight = 40;
|
||||
const blockWidth = Math.floor((sliderWidth * 47) / 310);
|
||||
const imageHeight = 155;
|
||||
|
||||
const dragState = reactive({
|
||||
startClientX: 0,
|
||||
baseOffset: 0,
|
||||
isDragging: false,
|
||||
});
|
||||
|
||||
const captchaState = reactive({
|
||||
originalImageBase64: '',
|
||||
jigsawImageBase64: '',
|
||||
token: '',
|
||||
secretKey: '',
|
||||
});
|
||||
|
||||
const handleOffset = ref(0);
|
||||
const maxOffset = computed(() => Math.max(sliderWidth - blockWidth, 0));
|
||||
|
||||
const showBlock = computed(() => props.captchaType === 'blockPuzzle' && blockImage.value);
|
||||
const backgroundImage = computed(() =>
|
||||
captchaState.originalImageBase64
|
||||
? `data:image/png;base64,${captchaState.originalImageBase64}`
|
||||
: ''
|
||||
);
|
||||
const blockImage = computed(() =>
|
||||
captchaState.jigsawImageBase64
|
||||
? `data:image/png;base64,${captchaState.jigsawImageBase64}`
|
||||
: ''
|
||||
);
|
||||
|
||||
const imageStyle = computed(() => ({
|
||||
width: `${sliderWidth}px`,
|
||||
height: `${imageHeight}px`,
|
||||
}));
|
||||
|
||||
const blockStyle = computed(() => ({
|
||||
width: `${blockWidth}px`,
|
||||
height: `${imageHeight}px`,
|
||||
transform: `translateX(${handleOffset.value}px)`,
|
||||
}));
|
||||
|
||||
const sliderHandleStyle = computed(() => ({
|
||||
width: `${blockWidth}px`,
|
||||
height: `${sliderHeight}px`,
|
||||
transform: `translateX(${handleOffset.value}px)`,
|
||||
}));
|
||||
|
||||
const sliderFillStyle = computed(() => ({
|
||||
width: `${handleOffset.value > 0 ? Math.min(handleOffset.value + blockWidth, sliderWidth) : 0}px`,
|
||||
}));
|
||||
|
||||
const sliderHint = computed(() => {
|
||||
if (success.value) {
|
||||
return '验证通过';
|
||||
}
|
||||
if (loading.value) {
|
||||
return '验证码加载中';
|
||||
}
|
||||
return '请按住滑块，拖动完成拼图';
|
||||
});
|
||||
|
||||
const tipClass = computed(() => {
|
||||
if (success.value) return 's-verify-tip-success';
|
||||
if (failAnimate.value) return 's-verify-tip-error';
|
||||
return '';
|
||||
});
|
||||
|
||||
let closeTimer = null;
|
||||
let mouseMoveListener = null;
|
||||
let mouseUpListener = null;
|
||||
|
||||
function show() {
|
||||
if (visible.value) return;
|
||||
visible.value = true;
|
||||
resetState();
|
||||
nextTick(() => {
|
||||
loadCaptcha();
|
||||
});
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
visible.value = false;
|
||||
cleanupMouseListeners();
|
||||
clearCloseTimer();
|
||||
}
|
||||
|
||||
function refreshCaptcha() {
|
||||
if (loading.value) return;
|
||||
resetSlider();
|
||||
loadCaptcha();
|
||||
}
|
||||
|
||||
function resetSlider() {
|
||||
handleOffset.value = 0;
|
||||
dragState.baseOffset = 0;
|
||||
dragState.startClientX = 0;
|
||||
dragState.isDragging = false;
|
||||
success.value = false;
|
||||
failAnimate.value = false;
|
||||
tipMessage.value = '';
|
||||
verifying.value = false;
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
captchaState.originalImageBase64 = '';
|
||||
captchaState.jigsawImageBase64 = '';
|
||||
captchaState.token = '';
|
||||
captchaState.secretKey = '';
|
||||
resetSlider();
|
||||
}
|
||||
|
||||
async function loadCaptcha() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await AuthUtil.getCaptchaCode({ captchaType: props.captchaType });
|
||||
if (res && (res.repCode === '0000' || res.code === 0)) {
|
||||
const data = res.repData || res.data || {};
|
||||
captchaState.originalImageBase64 = data.originalImageBase64 || '';
|
||||
captchaState.jigsawImageBase64 = data.jigsawImageBase64 || '';
|
||||
captchaState.token = data.token || '';
|
||||
captchaState.secretKey = data.secretKey || '';
|
||||
} else {
|
||||
tipMessage.value = res?.repMsg || res?.msg || '验证码获取失败，请重试';
|
||||
emits('error', res);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('captcha load error', error);
|
||||
tipMessage.value = '验证码加载异常，请稍后再试';
|
||||
emits('error', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStart(event) {
|
||||
if (loading.value || success.value) return;
|
||||
dragState.isDragging = true;
|
||||
dragState.startClientX = getClientX(event);
|
||||
dragState.baseOffset = handleOffset.value;
|
||||
failAnimate.value = false;
|
||||
tipMessage.value = '';
|
||||
}
|
||||
|
||||
function onDragMove(event) {
|
||||
if (!dragState.isDragging) return;
|
||||
const currentX = getClientX(event);
|
||||
const delta = currentX - dragState.startClientX;
|
||||
let next = dragState.baseOffset + delta;
|
||||
if (next < 0) next = 0;
|
||||
if (next > maxOffset.value) next = maxOffset.value;
|
||||
handleOffset.value = next;
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
if (!dragState.isDragging) return;
|
||||
dragState.isDragging = false;
|
||||
submitVerification();
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
if (event?.button !== 0) return;
|
||||
if (typeof window !== 'undefined') {
|
||||
mouseMoveListener = (ev) => {
|
||||
onDragMove(ev);
|
||||
ev.preventDefault();
|
||||
};
|
||||
mouseUpListener = (ev) => {
|
||||
cleanupMouseListeners();
|
||||
onDragEnd(ev);
|
||||
};
|
||||
window.addEventListener('mousemove', mouseMoveListener);
|
||||
window.addEventListener('mouseup', mouseUpListener);
|
||||
}
|
||||
onDragStart(event);
|
||||
}
|
||||
|
||||
function cleanupMouseListeners() {
|
||||
if (typeof window === 'undefined') return;
|
||||
if (mouseMoveListener) {
|
||||
window.removeEventListener('mousemove', mouseMoveListener);
|
||||
mouseMoveListener = null;
|
||||
}
|
||||
if (mouseUpListener) {
|
||||
window.removeEventListener('mouseup', mouseUpListener);
|
||||
mouseUpListener = null;
|
||||
}
|
||||
}
|
||||
|
||||
function clearCloseTimer() {
|
||||
if (closeTimer) {
|
||||
clearTimeout(closeTimer);
|
||||
closeTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitVerification() {
|
||||
if (verifying.value) return;
|
||||
verifying.value = true;
|
||||
failAnimate.value = false;
|
||||
|
||||
const point = {
|
||||
x: Math.round(handleOffset.value),
|
||||
y: 5.0,
|
||||
};
|
||||
|
||||
try {
|
||||
const payload = captchaState.secretKey
|
||||
? aesEncrypt(JSON.stringify(point), captchaState.secretKey)
|
||||
: JSON.stringify(point);
|
||||
|
||||
const res = await AuthUtil.verifyCaptcha({
|
||||
captchaType: props.captchaType,
|
||||
token: captchaState.token,
|
||||
pointJson: payload,
|
||||
});
|
||||
|
||||
if (res && (res.repCode === '0000' || res.code === 0)) {
|
||||
success.value = true;
|
||||
tipMessage.value = '验证成功';
|
||||
const captchaVerification = captchaState.secretKey
|
||||
? aesEncrypt(
|
||||
`${captchaState.token}---${JSON.stringify(point)}`,
|
||||
captchaState.secretKey,
|
||||
)
|
||||
: `${captchaState.token}---${JSON.stringify(point)}`;
|
||||
|
||||
emits('success', {
|
||||
captchaVerification,
|
||||
token: captchaState.token,
|
||||
point,
|
||||
});
|
||||
|
||||
clearCloseTimer();
|
||||
closeTimer = setTimeout(() => {
|
||||
handleClose();
|
||||
}, 800);
|
||||
} else {
|
||||
handleFail(res?.repMsg || res?.msg || '验证失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('captcha verify error', error);
|
||||
handleFail('网络异常，请重试');
|
||||
} finally {
|
||||
verifying.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFail(message) {
|
||||
failAnimate.value = true;
|
||||
tipMessage.value = message;
|
||||
emits('error', message);
|
||||
setTimeout(() => {
|
||||
failAnimate.value = false;
|
||||
}, 400);
|
||||
setTimeout(() => {
|
||||
refreshCaptcha();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function getClientX(event) {
|
||||
if (event?.touches && event.touches.length) {
|
||||
return event.touches[0].clientX;
|
||||
}
|
||||
if (event?.changedTouches && event.changedTouches.length) {
|
||||
return event.changedTouches[0].clientX;
|
||||
}
|
||||
return event?.clientX || 0;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanupMouseListeners();
|
||||
clearCloseTimer();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
close: handleClose,
|
||||
refresh: refreshCaptcha,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s-verify-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.s-verify-wrapper {
|
||||
width: 340px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.s-verify-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f2f3f5;
|
||||
}
|
||||
|
||||
.s-verify-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
.s-verify-close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
color: #999999;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.s-verify-body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.s-verify-image {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.s-verify-image-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.s-verify-image-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.s-verify-refresh {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.s-verify-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.s-verify-tip {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding: 6px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.s-verify-tip-success {
|
||||
color: #52c41a;
|
||||
background: rgba(82, 196, 26, 0.12);
|
||||
}
|
||||
|
||||
.s-verify-tip-error {
|
||||
color: #ff4d4f;
|
||||
background: rgba(255, 77, 79, 0.12);
|
||||
}
|
||||
|
||||
.s-verify-slider {
|
||||
position: relative;
|
||||
width: 310px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: #f2f3f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.s-verify-slider-track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 20px;
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
.s-verify-slider-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: var(--ui-BG-Main, #409eff);
|
||||
border-radius: 20px;
|
||||
transition: width 0.05s linear;
|
||||
}
|
||||
|
||||
.s-verify-slider-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 6px 14px rgba(25, 87, 170, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1f2d3d;
|
||||
transition: transform 0.05s linear;
|
||||
}
|
||||
|
||||
.s-verify-slider-success {
|
||||
background: #52c41a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.s-verify-slider-fail {
|
||||
animation: s-verify-shake 0.3s;
|
||||
}
|
||||
|
||||
.s-verify-handle-icon {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.s-verify-slider-text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes s-verify-shake {
|
||||
0% {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
sheep/components/s-verify/utils/aes.js
Normal file
17
sheep/components/s-verify/utils/aes.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
/**
|
||||
* 使用 AES-ECB 模式 + PKCS7 填充对字符串进行加密
|
||||
* @param {string} word - 需要加密的明文
|
||||
* @param {string} [keyWord='XwKsGlMcdPMEhR1B'] - 加密密钥，默认为 aj-captcha 默认密钥
|
||||
* @returns {string} - 加密后的密文
|
||||
*/
|
||||
export function aesEncrypt(word, keyWord = 'XwKsGlMcdPMEhR1B') {
|
||||
const key = CryptoJS.enc.Utf8.parse(keyWord);
|
||||
const srcs = CryptoJS.enc.Utf8.parse(word);
|
||||
const encrypted = CryptoJS.AES.encrypt(srcs, key, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7,
|
||||
});
|
||||
return encrypted.toString();
|
||||
}
|
||||
227
sheep/components/s-verify/utils/index.js
Normal file
227
sheep/components/s-verify/utils/index.js
Normal file
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 验证码组件工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
* @param {number} min 最小值
|
||||
* @param {number} max 最大值
|
||||
* @returns {number} 随机整数
|
||||
*/
|
||||
export function randomInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成随机颜色
|
||||
* @returns {string} 十六进制颜色值
|
||||
*/
|
||||
export function randomColor() {
|
||||
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'];
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成随机字符串
|
||||
* @param {number} length 字符串长度
|
||||
* @param {string} chars 字符集
|
||||
* @returns {string} 随机字符串
|
||||
*/
|
||||
export function randomString(length = 4, chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678') {
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两点距离
|
||||
* @param {number} x1 点1 x坐标
|
||||
* @param {number} y1 点1 y坐标
|
||||
* @param {number} x2 点2 x坐标
|
||||
* @param {number} y2 点2 y坐标
|
||||
* @returns {number} 距离
|
||||
*/
|
||||
export function getDistance(x1, y1, x2, y2) {
|
||||
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断点是否在矩形区域内
|
||||
* @param {number} x 点x坐标
|
||||
* @param {number} y 点y坐标
|
||||
* @param {Object} rect 矩形对象 {x, y, width, height}
|
||||
* @returns {boolean} 是否在区域内
|
||||
*/
|
||||
export function isPointInRect(x, y, rect) {
|
||||
return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成验证码图片拼图
|
||||
* @param {CanvasRenderingContext2D} ctx Canvas上下文
|
||||
* @param {number} x x坐标
|
||||
* @param {number} y y坐标
|
||||
* @param {number} r 圆角半径
|
||||
* @param {number} PI 圆周率
|
||||
*/
|
||||
export function drawPath(ctx, x, y, r, PI) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.arc(x + r / 2, y - r + 2, r, 0, 2 * PI);
|
||||
ctx.lineTo(x + r, y);
|
||||
ctx.arc(x + r + r / 2, y + r / 2, r, 1.5 * PI, 0.5 * PI);
|
||||
ctx.lineTo(x + r, y + r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.arc(x + r / 2, y + r + r / 2, r, PI, 0);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取图片像素数据
|
||||
* @param {string} imgSrc 图片源
|
||||
* @returns {Promise<ImageData>} 图片像素数据
|
||||
*/
|
||||
export function getImageData(imgSrc) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = function() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.src = imgSrc;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建干扰线
|
||||
* @param {CanvasRenderingContext2D} ctx Canvas上下文
|
||||
* @param {number} width 画布宽度
|
||||
* @param {number} height 画布高度
|
||||
* @param {number} lineCount 干扰线数量
|
||||
*/
|
||||
export function drawInterferenceLines(ctx, width, height, lineCount = 8) {
|
||||
for (let i = 0; i < lineCount; i++) {
|
||||
ctx.strokeStyle = randomColor();
|
||||
ctx.lineWidth = randomInt(1, 3);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(randomInt(0, width), randomInt(0, height));
|
||||
ctx.lineTo(randomInt(0, width), randomInt(0, height));
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建干扰点
|
||||
* @param {CanvasRenderingContext2D} ctx Canvas上下文
|
||||
* @param {number} width 画布宽度
|
||||
* @param {number} height 画布高度
|
||||
* @param {number} pointCount 干扰点数量
|
||||
*/
|
||||
export function drawInterferencePoints(ctx, width, height, pointCount = 100) {
|
||||
for (let i = 0; i < pointCount; i++) {
|
||||
ctx.fillStyle = randomColor();
|
||||
ctx.beginPath();
|
||||
ctx.arc(randomInt(0, width), randomInt(0, height), randomInt(1, 2), 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 节流函数
|
||||
* @param {Function} func 要执行的函数
|
||||
* @param {number} delay 延迟时间
|
||||
* @returns {Function} 节流后的函数
|
||||
*/
|
||||
export function throttle(func, delay) {
|
||||
let timer = null;
|
||||
return function(...args) {
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
timer = null;
|
||||
}, delay);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 防抖函数
|
||||
* @param {Function} func 要执行的函数
|
||||
* @param {number} delay 延迟时间
|
||||
* @returns {Function} 防抖后的函数
|
||||
*/
|
||||
export function debounce(func, delay) {
|
||||
let timer = null;
|
||||
return function(...args) {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置画布
|
||||
* @param {CanvasRenderingContext2D} ctx Canvas上下文
|
||||
* @param {number} width 画布宽度
|
||||
* @param {number} height 画布高度
|
||||
*/
|
||||
export function resetCanvas(ctx, width, height) {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素的绝对位置
|
||||
* @param {Element} element DOM元素
|
||||
* @returns {Object} {left, top}
|
||||
*/
|
||||
export function getElementPosition(element) {
|
||||
let left = 0;
|
||||
let top = 0;
|
||||
|
||||
while (element) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
return { left, top };
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动端触摸事件坐标获取
|
||||
* @param {Event} e 事件对象
|
||||
* @returns {Object} {x, y}
|
||||
*/
|
||||
export function getTouchPosition(e) {
|
||||
const touch = e.touches && e.touches.length > 0 ? e.touches[0] : e.changedTouches[0];
|
||||
return {
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取鼠标或触摸位置
|
||||
* @param {Event} e 事件对象
|
||||
* @returns {Object} {x, y}
|
||||
*/
|
||||
export function getEventPosition(e) {
|
||||
if (e.touches) {
|
||||
return getTouchPosition(e);
|
||||
}
|
||||
return {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
}
|
||||
|
||||
export { aesEncrypt } from './aes';
|
||||
Reference in New Issue
Block a user