Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
landaiqing
2024-05-20 14:34:52 +08:00
parent 3d60f1478a
commit 7e87781c85
53 changed files with 3726 additions and 2537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/captcha/api.ts
View File

@@ -1,16 +1,28 @@
import web from '@/utils/axios/web.ts'
/** @format */
import web from "@/utils/axios/web.ts";
/**
* 获取验证码
*/
export const getCaptcha = () => {
return web.post('/ReactRotateCaptcha/get')
}
return web.request({
url: "/ReactRotateCaptcha/get",
method: "get",
});
};
/**
* 验证验证码
* @param data
* @constructor
*/
export const VerfiyCaptcha = (data: any) => {
return web.post('/ReactRotateCaptcha/verfiy', data)
}
return web.request({
url: "/ReactRotateCaptcha/verfiy",
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: data,
});
};

104
src/api/captcha/canvas.ts
View File

@@ -1,68 +1,68 @@
const calcSize = (img: HTMLImageElement, size: number) => {
const src_src = Math.max(Math.min(img.width, img.height, size), 160)
const dst_w = src_src
const dst_h = src_src
const src_src = Math.max(Math.min(img.width, img.height, size), 160);
const dst_w = src_src;
const dst_h = src_src;
const dst_scale = dst_h / dst_w // Target image ratio
const src_scale = img.height / img.width // Original image aspect ratio
const dst_scale = dst_h / dst_w; // Target image ratio
const src_scale = img.height / img.width; // Original image aspect ratio
const info =
src_scale >= dst_scale
? [
Math.round(img.height * (src_src / img.width)),
0,
Math.round((img.height - img.width) / 2),
]
: [
Math.round(img.width * (src_src / img.height)),
Math.round((img.width - img.height) / 2),
0,
]
const info =
src_scale >= dst_scale
? [
Math.round(img.height * (src_src / img.width)),
0,
Math.round((img.height - img.width) / 2),
]
: [
Math.round(img.width * (src_src / img.height)),
Math.round((img.width - img.height) / 2),
0,
];
return [img.width, img.height, src_src, ...info]
}
return [img.width, img.height, src_src, ...info];
};
const build = (img: HTMLImageElement, sizes: number[]): [number, string] => {
const [src_w, src_h, size, tar_size, x, y] = sizes
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
const [src_w, src_h, size, tar_size, x, y] = sizes;
const canvas = document.createElement("canvas");
canvas.width = size;
canvas.height = size;
const max = 275 - 50
const min = 0
const max = 275 - 50;
const min = 0;
const ave = Math.round((360 / max) * 100) / 100
const ctx = canvas.getContext('2d')
const ave = Math.round((360 / max) * 100) / 100;
const ctx = canvas.getContext("2d");
const coordinate = size / 2
const moveX = Math.floor(Math.random() * (max - min + 1))
const coordinate = size / 2;
const moveX = Math.floor(Math.random() * (max - min + 1));
ctx?.beginPath()
ctx?.translate(coordinate, coordinate)
ctx?.rotate((moveX * -1 * ave * Math.PI) / 180)
ctx?.translate(-coordinate, -coordinate)
ctx?.drawImage(img, x, y, src_w, src_h, 0, 0, tar_size, size)
ctx!.globalCompositeOperation = 'destination-in'
ctx?.arc(size / 2, size / 2, size / 2, 0, (360 * Math.PI) / 180, false)
ctx?.fill()
ctx?.restore()
ctx?.beginPath();
ctx?.translate(coordinate, coordinate);
ctx?.rotate((moveX * -1 * ave * Math.PI) / 180);
ctx?.translate(-coordinate, -coordinate);
ctx?.drawImage(img, x, y, src_w, src_h, 0, 0, tar_size, size);
ctx!.globalCompositeOperation = "destination-in";
ctx?.arc(size / 2, size / 2, size / 2, 0, (360 * Math.PI) / 180, false);
ctx?.fill();
ctx?.restore();
return [(360 / (max - min)) * moveX, canvas.toDataURL('image/png')]
}
return [(360 / (max - min)) * moveX, canvas.toDataURL("image/png")];
};
export const handle = (url: string, size: number = 350) =>
new Promise<[number, string]>((resovle) => {
const img = new Image()
img.onerror = function () {
console.log('image load error')
}
new Promise<[number, string]>((resovle) => {
const img = new Image();
img.onerror = function () {
console.log("image load error");
};
img.onload = function () {
const sizes = calcSize(img, size)
const arc_img = build(img, sizes)
img.onload = function () {
const sizes = calcSize(img, size);
const arc_img = build(img, sizes);
resovle(arc_img)
}
resovle(arc_img);
};
img.src = url
})
img.src = url;
});

60
src/api/captcha/index.ts
View File

@@ -1,44 +1,46 @@
import type { TicketInfoType, TokenInfoType } from 'react-rotate-captcha'
import { getCaptcha, VerfiyCaptcha } from '@/api/captcha/api.ts'
import type { TicketInfoType, TokenInfoType } from "react-rotate-captcha";
import { getCaptcha, VerfiyCaptcha } from "@/api/captcha/api.ts";
export type ActionType = {
code: 0 | 1
msg: string
}
let image: string = ''
code: 0 | 1;
msg: string;
};
let image: string = "";
export async function get(): Promise<TokenInfoType> {
const res: any = await getCaptcha()
image = res.data.str
return res
const res: any = await getCaptcha();
image = res.data.str;
return res;
}
export function isSupportWebp() {
try {
return (
document
.createElement('canvas')
.toDataURL('image/webp', 0.5)
.indexOf('data:image/webp') === 0
)
} catch (err) {
return false
}
try {
return (
document
.createElement("canvas")
.toDataURL("image/webp", 0.5)
.indexOf("data:image/webp") === 0
);
} catch (err) {
return false;
}
}
export async function load() {
return image
return image;
}
export function sleep(time: number) {
return new Promise((resolve) => {
setTimeout(() => resolve(true), time)
})
return new Promise((resolve) => {
setTimeout(() => resolve(true), time);
});
}
export async function verify(token: string, deg: number): Promise<TicketInfoType> {
const data: any = {
token: token,
deg: deg,
}
const res: any = await VerfiyCaptcha(data)
return res
const data: any = {
token: token,
deg: deg,
};
const res: any = await VerfiyCaptcha(data);
return res;
}