mirror of https://github.com/msgbyte/tailchat
feat: 增加 AvatarPicker 头像选择与裁剪工具
moonrailgun
4 years ago
parent
d6300c7750
commit
23c4287109
@ -0,0 +1,81 @@
|
|||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { closeModal, openModal } from './Modal';
|
||||||
|
import { showToasts, t } from 'tailchat-shared';
|
||||||
|
import { Avatar } from 'antd';
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
import { ModalAvatarCropper } from './modals/AvatarCropper';
|
||||||
|
|
||||||
|
interface AvatarPickerProps {
|
||||||
|
className?: string;
|
||||||
|
imageUrl?: string; // 初始image url, 仅children为空时生效
|
||||||
|
onChange?: (blobUrl: string) => void;
|
||||||
|
disabled?: boolean; // 禁用选择
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 头像选择器
|
||||||
|
*/
|
||||||
|
export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
|
||||||
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [cropUrl, setCropUrl] = useState<string>(props.imageUrl || ''); // 裁剪后并使用的url
|
||||||
|
|
||||||
|
const handleSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (e.target.files && e.target.files.length > 0) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.addEventListener('load', () => {
|
||||||
|
if (reader.result) {
|
||||||
|
const key = openModal(
|
||||||
|
<ModalAvatarCropper
|
||||||
|
imageUrl={reader.result.toString()}
|
||||||
|
onConfirm={(croppedImageBlobUrl) => {
|
||||||
|
closeModal(key);
|
||||||
|
setCropUrl(croppedImageBlobUrl);
|
||||||
|
|
||||||
|
if (typeof props.onChange === 'function') {
|
||||||
|
props.onChange(croppedImageBlobUrl);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
{
|
||||||
|
maskClosable: false,
|
||||||
|
closable: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
showToasts(t('文件读取失败'), 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
reader.readAsDataURL(e.target.files[0]);
|
||||||
|
|
||||||
|
// 清理选中状态
|
||||||
|
e.target.files = null;
|
||||||
|
e.target.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={props.className}>
|
||||||
|
<div
|
||||||
|
className="cursor-pointer inline-block relative"
|
||||||
|
onClick={() => !props.disabled && fileRef.current?.click()}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
ref={fileRef}
|
||||||
|
type="file"
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleSelectFile}
|
||||||
|
accept="image/*"
|
||||||
|
/>
|
||||||
|
{props.children ? (
|
||||||
|
props.children
|
||||||
|
) : (
|
||||||
|
<Avatar
|
||||||
|
size={64}
|
||||||
|
icon={<Icon className="anticon" icon="mdi:account" />}
|
||||||
|
src={cropUrl}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
AvatarPicker.displayName = 'AvatarPicker';
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
import Cropper from 'react-easy-crop';
|
||||||
|
import type { Area } from 'react-easy-crop/types';
|
||||||
|
import _isNil from 'lodash/isNil';
|
||||||
|
import { showToasts, t } from 'tailchat-shared';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import { ModalWrapper } from '../Modal';
|
||||||
|
|
||||||
|
const createImage = (url: string): Promise<HTMLImageElement> =>
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
|
const image = new Image();
|
||||||
|
image.addEventListener('load', () => resolve(image));
|
||||||
|
image.addEventListener('error', (error) => reject(error));
|
||||||
|
image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
|
||||||
|
image.src = url;
|
||||||
|
});
|
||||||
|
|
||||||
|
function getRadianAngle(degreeValue: number) {
|
||||||
|
return (degreeValue * Math.PI) / 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
let fileUrlTemp: string | null = null; // 缓存裁剪后的图片url
|
||||||
|
/**
|
||||||
|
* 根据裁剪信息裁剪原始图片
|
||||||
|
* 生成一个临时的资源文件路径
|
||||||
|
* @param image 原始图片元素
|
||||||
|
* @param crop 裁剪信息
|
||||||
|
* @param rotation 旋转角度
|
||||||
|
* @param fileName 文件名
|
||||||
|
* @returns 裁剪后的图片blob url
|
||||||
|
*/
|
||||||
|
function getCroppedImg(
|
||||||
|
image: HTMLImageElement,
|
||||||
|
crop: Area,
|
||||||
|
rotation = 0,
|
||||||
|
fileName = 'newFile.jpeg'
|
||||||
|
): Promise<string> {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
if (!_isNil(ctx)) {
|
||||||
|
const maxSize = Math.max(image.width, image.height);
|
||||||
|
const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
|
||||||
|
|
||||||
|
// set each dimensions to double largest dimension to allow for a safe area for the
|
||||||
|
// image to rotate in without being clipped by canvas context
|
||||||
|
canvas.width = safeArea;
|
||||||
|
canvas.height = safeArea;
|
||||||
|
|
||||||
|
// translate canvas context to a central location on image to allow rotating around the center.
|
||||||
|
ctx.translate(safeArea / 2, safeArea / 2);
|
||||||
|
ctx.rotate(getRadianAngle(rotation));
|
||||||
|
ctx.translate(-safeArea / 2, -safeArea / 2);
|
||||||
|
|
||||||
|
// draw rotated image and store data.
|
||||||
|
ctx.drawImage(
|
||||||
|
image,
|
||||||
|
safeArea / 2 - image.width * 0.5,
|
||||||
|
safeArea / 2 - image.height * 0.5
|
||||||
|
);
|
||||||
|
const data = ctx.getImageData(0, 0, safeArea, safeArea);
|
||||||
|
|
||||||
|
// set canvas width to final desired crop size - this will clear existing context
|
||||||
|
canvas.width = crop.width;
|
||||||
|
canvas.height = crop.height;
|
||||||
|
|
||||||
|
// paste generated rotate image with correct offsets for x,y crop values.
|
||||||
|
ctx.putImageData(
|
||||||
|
data,
|
||||||
|
Math.round(0 - safeArea / 2 + image.width * 0.5 - crop.x),
|
||||||
|
Math.round(0 - safeArea / 2 + image.height * 0.5 - crop.y)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise<string>((resolve) => {
|
||||||
|
try {
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
if (!blob) {
|
||||||
|
// reject(new Error('Canvas is empty'));
|
||||||
|
console.error('Canvas is empty');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
(blob as any).name = fileName;
|
||||||
|
if (typeof fileUrlTemp === 'string') {
|
||||||
|
window.URL.revokeObjectURL(fileUrlTemp);
|
||||||
|
}
|
||||||
|
fileUrlTemp = window.URL.createObjectURL(blob);
|
||||||
|
resolve(fileUrlTemp);
|
||||||
|
}, 'image/jpeg');
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
showToasts('无法正确生成图片, 可能是因为您的浏览器版本过旧', 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 头像裁剪模态框
|
||||||
|
*/
|
||||||
|
export const ModalAvatarCropper: React.FC<{
|
||||||
|
imageUrl: string;
|
||||||
|
onConfirm: (croppedImageBlobUrl: string) => void;
|
||||||
|
}> = React.memo((props) => {
|
||||||
|
const [crop, setCrop] = useState({ x: 0, y: 0 });
|
||||||
|
const [zoom, setZoom] = useState(1);
|
||||||
|
const [area, setArea] = useState<Area>({ width: 0, height: 0, x: 0, y: 0 });
|
||||||
|
|
||||||
|
const handleConfirm = async () => {
|
||||||
|
const blobUrl = await getCroppedImg(
|
||||||
|
await createImage(props.imageUrl),
|
||||||
|
area
|
||||||
|
);
|
||||||
|
props.onConfirm(blobUrl);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalWrapper
|
||||||
|
className="flex flex-col"
|
||||||
|
style={{ width: '80vw', height: '80vh' }}
|
||||||
|
>
|
||||||
|
<div className="flex-1 relative mb-4">
|
||||||
|
<Cropper
|
||||||
|
image={props.imageUrl}
|
||||||
|
crop={crop}
|
||||||
|
zoom={zoom}
|
||||||
|
aspect={1}
|
||||||
|
onCropChange={setCrop}
|
||||||
|
onZoomChange={setZoom}
|
||||||
|
onCropComplete={(_, area) => setArea(area)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="primary" onClick={handleConfirm}>
|
||||||
|
{t('确认')}
|
||||||
|
</Button>
|
||||||
|
</ModalWrapper>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
ModalAvatarCropper.displayName = 'ModalAvatarCropper';
|
||||||
Loading…
Reference in New Issue