diff --git a/web/src/features/home/AvatarEditor.module.css b/web/src/features/home/AvatarEditor.module.css
new file mode 100644
index 0000000..750bc14
--- /dev/null
+++ b/web/src/features/home/AvatarEditor.module.css
@@ -0,0 +1,137 @@
+.editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.main {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.stage {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+}
+
+.canvas {
+  display: block;
+  cursor: grab;
+  touch-action: none;
+}
+
+.canvas:active {
+  cursor: grabbing;
+}
+
+/* 圆形取景框:圆外压暗,圆内透明;不拦截拖动 */
+.mask {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle closest-side, transparent calc(100% - 1px), var(--scrim) 100%);
+  pointer-events: none;
+}
+
+.slider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.slider span {
+  flex: 0 0 32px;
+}
+
+.slider input[type='range'] {
+  flex: 1;
+  min-width: 0;
+  accent-color: var(--accent);
+}
+
+.preview {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 200px;
+}
+
+.preview h3 {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.message,
+.member {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+}
+
+.member {
+  align-items: center;
+}
+
+.message p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.message small,
+.member small {
+  margin-inline-start: var(--space-2);
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.member div {
+  font-size: 14px;
+}
+
+.avatar,
+.avatarSmall {
+  flex: 0 0 auto;
+  border-radius: var(--radius-avatar);
+  background: var(--surface-2);
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.avatarSmall {
+  width: 32px;
+  height: 32px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+
+.error {
+  margin: 0;
+  color: var(--danger);
+  font-size: 13px;
+}
diff --git a/web/src/features/home/AvatarEditor.tsx b/web/src/features/home/AvatarEditor.tsx
new file mode 100644
index 0000000..0cac1d1
--- /dev/null
+++ b/web/src/features/home/AvatarEditor.tsx
@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';
+import { Button } from '@/ui/Button';
+import { clampCrop, exportAvatar, paintCrop, type Crop } from './avatarCrop';
+import styles from './AvatarEditor.module.css';
+
+const VIEW = 260;
+
+interface View { zoom: number; x: number; y: number; quarter: number; fine: number }
+const FRESH: View = { zoom: 1, x: 0, y: 0, quarter: 0, fine: 0 };
+
+/** 头像预览:同一份裁剪结果按实际使用的尺寸画出来 */
+function Preview({ image, crop, size }: { image: ImageBitmap; crop: Crop; size: number }) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+    canvas.width = canvas.height = Math.round(size * (window.devicePixelRatio || 1));
+    paintCrop(ctx, image, crop, VIEW, canvas.width);
+  }, [image, crop, size]);
+  return <canvas ref={ref} className={styles.avatar} style={{ width: size, height: size }} aria-hidden="true" />;
+}
+
+interface Props {
+  file: File;
+  /** 预览里显示的名称 */
+  name: string;
+  onCancel: () => void;
+  onDone: (dataUrl: string) => void;
+}
+
+/** 在浏览器里裁剪头像:拖动、缩放、旋转,右侧按聊天消息和成员列表的样子实时预览 */
+export function AvatarEditor({ file, name, onCancel, onDone }: Props) {
+  const [image, setImage] = useState<ImageBitmap>();
+  const [failed, setFailed] = useState(false);
+  const [view, setView] = useState<View>(FRESH);
+  const [busy, setBusy] = useState(false);
+  const stage = useRef<HTMLCanvasElement>(null);
+  const drag = useRef<{ x: number; y: number } | null>(null);
+  const crop = useMemo<Crop>(() => ({ zoom: view.zoom, x: view.x, y: view.y, angle: view.quarter * 90 + view.fine }), [view]);
+
+  useEffect(() => {
+    let active = true;
+    let bitmap: ImageBitmap | undefined;
+    createImageBitmap(file).then((value) => {
+      if (!active) { value.close(); return; }
+      bitmap = value; setImage(value); setView(FRESH);
+    }).catch(() => { if (active) setFailed(true); });
+    return () => { active = false; bitmap?.close(); };
+  }, [file]);
+
+  const update = useCallback((next: (value: View) => View) => {
+    if (!image) return;
+    setView((value) => {
+      const moved = next(value);
+      const fixed = clampCrop(image, VIEW, { zoom: moved.zoom, x: moved.x, y: moved.y, angle: moved.quarter * 90 + moved.fine });
+      return { ...moved, x: fixed.x, y: fixed.y };
+    });
+  }, [image]);
+
+  useEffect(() => {
+    const canvas = stage.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx || !image) return;
+    canvas.width = canvas.height = Math.round(VIEW * (window.devicePixelRatio || 1));
+    paintCrop(ctx, image, crop, VIEW, canvas.width);
+  }, [image, crop]);
+
+  // 滚轮缩放需要 preventDefault,React 的 onWheel 是被动监听
+  useEffect(() => {
+    const canvas = stage.current;
+    if (!canvas) return;
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      update((value) => ({ ...value, zoom: Math.min(4, Math.max(1, value.zoom * Math.exp(-event.deltaY / 400))) }));
+    };
+    canvas.addEventListener('wheel', onWheel, { passive: false });
+    return () => canvas.removeEventListener('wheel', onWheel);
+  }, [update, failed]);
+
+  function down(event: ReactPointerEvent) {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = { x: event.clientX, y: event.clientY };
+  }
+  function move(event: ReactPointerEvent) {
+    const from = drag.current;
+    if (!from) return;
+    drag.current = { x: event.clientX, y: event.clientY };
+    const dx = event.clientX - from.x;
+    const dy = event.clientY - from.y;
+    update((value) => ({ ...value, x: value.x + dx, y: value.y + dy }));
+  }
+
+  async function confirm() {
+    if (!image || busy) return;
+    setBusy(true);
+    try { onDone(await exportAvatar(image, crop, VIEW)); }
+    catch { setFailed(true); setBusy(false); }
+  }
+
+  if (failed) return <div className={styles.editor}>
+    <p className={styles.error} role="alert">这张图片无法处理，请换一张 PNG、JPEG 或 WebP 图片。</p>
+    <div className={styles.actions}><Button onClick={onCancel}>返回</Button></div>
+  </div>;
+
+  const ready = Boolean(image);
+  return <div className={styles.editor}>
+    <div className={styles.main}>
+      <div className={styles.left}>
+        <div className={styles.stage} style={{ width: VIEW, height: VIEW }}>
+          <canvas ref={stage} className={styles.canvas} style={{ width: VIEW, height: VIEW }} aria-label="拖动图片调整头像位置"
+            onPointerDown={down} onPointerMove={move} onPointerUp={() => { drag.current = null; }} onPointerCancel={() => { drag.current = null; }} />
+          <span className={styles.mask} aria-hidden="true" />
+        </div>
+        <label className={styles.slider}><span>缩放</span>
+          <input type="range" min={1} max={4} step={0.01} value={view.zoom} disabled={!ready}
+            onChange={(event) => update((value) => ({ ...value, zoom: Number(event.target.value) }))} /></label>
+        <div className={styles.slider}><span>旋转</span>
+          <Button icon="rotateLeft" label="向左转 90°" disabled={!ready} onClick={() => update((value) => ({ ...value, quarter: value.quarter - 1 }))} />
+          <Button icon="rotateRight" label="向右转 90°" disabled={!ready} onClick={() => update((value) => ({ ...value, quarter: value.quarter + 1 }))} />
+          <input type="range" min={-45} max={45} step={1} value={view.fine} disabled={!ready} aria-label="微调角度"
+            onChange={(event) => update((value) => ({ ...value, fine: Number(event.target.value) }))} />
+        </div>
+      </div>
+      <div className={styles.preview} aria-label="头像预览">
+        <h3>预览</h3>
+        <div className={styles.message}>
+          {image ? <Preview image={image} crop={crop} size={40} /> : <span className={styles.avatar} />}
+          <div><p><strong>{name}</strong><small>刚刚</small></p><p>大家好～</p></div>
+        </div>
+        <div className={styles.member}>
+          {image ? <Preview image={image} crop={crop} size={32} /> : <span className={styles.avatarSmall} />}
+          <div><strong>{name}</strong><small>在线</small></div>
+        </div>
+      </div>
+    </div>
+    <div className={styles.actions}>
+      <Button variant="ghost" onClick={() => setView(FRESH)} disabled={!ready}>重置</Button>
+      <Button variant="ghost" onClick={onCancel}>取消</Button>
+      <Button variant="primary" onClick={() => { void confirm(); }} disabled={!ready || busy}>{busy ? '处理中…' : '使用头像'}</Button>
+    </div>
+  </div>;
+}
diff --git a/web/src/features/home/ProfileSettings.tsx b/web/src/features/home/ProfileSettings.tsx
index 52326ae..a0e200c 100644
--- a/web/src/features/home/ProfileSettings.tsx
+++ b/web/src/features/home/ProfileSettings.tsx
@@ -3,22 +3,18 @@ import { errorMessage } from '@/core-bridge/errors';
 import { useAccount } from '@/store/account';
 import { useToast } from '@/store/toast';
 import { Button } from '@/ui/Button';
+import { AvatarEditor } from './AvatarEditor';
 import styles from './AccountSettings.module.css';
 
-const MAX_AVATAR_BYTES = 250_000;
+// 原图只做初步检查;裁剪后会重新编码为 256×256,体积由编辑器控制
+const MAX_SOURCE_BYTES = 20_000_000;
 
-async function readAvatar(file: File): Promise<string> {
-  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > MAX_AVATAR_BYTES) throw new Error('请选择 250 KB 以内的 PNG、JPEG 或 WebP 图片');
+async function checkAvatarSource(file: File): Promise<void> {
+  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > MAX_SOURCE_BYTES) throw new Error('请选择 20 MB 以内的 PNG、JPEG 或 WebP 图片');
   const bitmap = await createImageBitmap(file);
-  const valid = bitmap.width > 0 && bitmap.height > 0 && bitmap.width <= 4096 && bitmap.height <= 4096;
+  const valid = bitmap.width > 0 && bitmap.height > 0 && bitmap.width <= 8192 && bitmap.height <= 8192;
   bitmap.close();
-  if (!valid) throw new Error('头像宽高不能超过 4096 像素');
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result));
-    reader.onerror = () => reject(new Error('头像读取失败'));
-    reader.readAsDataURL(file);
-  });
+  if (!valid) throw new Error('图片宽高不能超过 8192 像素');
 }
 
 export function ProfileSettings() {
@@ -29,6 +25,7 @@ export function ProfileSettings() {
   const fileInput = useRef<HTMLInputElement>(null);
   const [name, setName] = useState(personal?.displayName ?? '');
   const [avatar, setAvatar] = useState(personal?.avatar);
+  const [editing, setEditing] = useState<File>();
   useEffect(() => { setName(personal?.displayName ?? ''); setAvatar(personal?.avatar); }, [personal?.displayName, personal?.avatar]);
 
   const changed = name.trim() !== (personal?.displayName ?? '') || avatar !== personal?.avatar;
@@ -36,7 +33,7 @@ export function ProfileSettings() {
 
   async function choose(file?: File) {
     if (!file) return;
-    try { setAvatar(await readAvatar(file)); }
+    try { await checkAvatarSource(file); setEditing(file); }
     catch (cause) { useToast.getState().push({ kind: 'error', text: errorMessage(cause) }); }
   }
   async function submit(event: FormEvent) {
@@ -46,6 +43,11 @@ export function ProfileSettings() {
     catch (cause) { useToast.getState().push({ kind: 'error', text: `保存失败：${errorMessage(cause)}` }); }
   }
 
+  if (editing) return <div className={styles.page}>
+    <h2>编辑头像</h2>
+    <AvatarEditor file={editing} name={shown} onCancel={() => setEditing(undefined)} onDone={(url) => { setAvatar(url); setEditing(undefined); }} />
+  </div>;
+
   return <form className={styles.page} onSubmit={(event) => { void submit(event); }} aria-label="个人资料">
     <h2>个人资料</h2>
     <div className={styles.avatarRow}>
@@ -57,15 +59,15 @@ export function ProfileSettings() {
           <Button icon="image" onClick={() => fileInput.current?.click()}>更换头像</Button>
           {avatar ? <Button variant="ghost" onClick={() => setAvatar(undefined)}>移除</Button> : null}
         </div>
-        <span className={styles.hint}>PNG、JPEG 或 WebP，最大 250 KB</span>
+        <span className={styles.hint}>PNG、JPEG 或 WebP，可在浏览器里裁剪</span>
       </div>
     </div>
     <label className={styles.field}>个人名称
       <input maxLength={48} value={name} placeholder={username} onChange={(event) => setName(event.target.value)} />
     </label>
-    <div className={styles.field}>用户名
+    <div className={styles.field}>账号 ID
       <span className={styles.readonly}>{username}</span>
-      <span className={styles.hint}>用户名是固定的账号身份，不能修改。个人名称与头像由服务端保存，在你的所有设备上同步。</span>
+      <span className={styles.hint}>账号 ID 是固定的账号身份，不能修改。个人名称与头像由服务端保存，在你的所有设备上同步。</span>
     </div>
     <div className={styles.footer}><Button type="submit" variant="primary" disabled={!changed || busy}>{busy ? '保存中…' : '保存'}</Button></div>
   </form>;
diff --git a/web/src/features/home/avatarCrop.ts b/web/src/features/home/avatarCrop.ts
new file mode 100644
index 0000000..4dd1db5
--- /dev/null
+++ b/web/src/features/home/avatarCrop.ts
@@ -0,0 +1,73 @@
+/** 头像裁剪的几何:图片以视口中心为原点平移、旋转、缩放,圆形取景框始终被图片完全盖住 */
+export interface Crop {
+  /** 相对「刚好盖住取景框」的放大倍数,≥ 1 */
+  zoom: number;
+  /** 旋转角度(度) */
+  angle: number;
+  /** 图片中心相对视口中心的偏移(视口像素) */
+  x: number;
+  y: number;
+}
+
+export const OUTPUT_SIZE = 256;
+export const MAX_OUTPUT_BYTES = 250_000;
+
+type Source = CanvasImageSource & { width: number; height: number };
+
+function scaleOf(source: Source, size: number, zoom: number): number {
+  return (size / Math.min(source.width, source.height)) * zoom;
+}
+
+/** 把偏移限制在「取景圆仍在图片内」的范围 */
+export function clampCrop(source: Source, size: number, crop: Crop): Crop {
+  const s = scaleOf(source, size, crop.zoom);
+  const rad = (crop.angle * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  // 取景圆心在图片坐标系中的位置(图片像素)
+  const px = (-crop.x * cos - crop.y * sin) / s;
+  const py = (crop.x * sin - crop.y * cos) / s;
+  const reach = size / 2 / s;
+  const limitX = Math.max(0, source.width / 2 - reach);
+  const limitY = Math.max(0, source.height / 2 - reach);
+  const cx = Math.min(limitX, Math.max(-limitX, px));
+  const cy = Math.min(limitY, Math.max(-limitY, py));
+  return { ...crop, x: -(cx * cos - cy * sin) * s, y: -(cx * sin + cy * cos) * s };
+}
+
+export function paintCrop(ctx: CanvasRenderingContext2D, image: Source, crop: Crop, from: number, to: number): void {
+  const ratio = to / from;
+  ctx.save();
+  ctx.clearRect(0, 0, to, to);
+  ctx.imageSmoothingQuality = 'high';
+  ctx.translate(to / 2 + crop.x * ratio, to / 2 + crop.y * ratio);
+  ctx.rotate((crop.angle * Math.PI) / 180);
+  const s = scaleOf(image, from, crop.zoom) * ratio;
+  ctx.scale(s, s);
+  ctx.drawImage(image, -image.width / 2, -image.height / 2);
+  ctx.restore();
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error('头像读取失败'));
+    reader.readAsDataURL(blob);
+  });
+}
+
+/** 导出 256×256 的 WebP(浏览器不支持时退回 PNG),质量逐步降低直到不超过上限 */
+export async function exportAvatar(image: Source, crop: Crop, from: number): Promise<string> {
+  const canvas = document.createElement('canvas');
+  canvas.width = OUTPUT_SIZE;
+  canvas.height = OUTPUT_SIZE;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('当前浏览器不支持图片处理');
+  paintCrop(ctx, image, crop, from, OUTPUT_SIZE);
+  for (const quality of [0.92, 0.8, 0.65, 0.5]) {
+    const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/webp', quality));
+    if (blob && blob.size <= MAX_OUTPUT_BYTES) return blobToDataUrl(blob);
+  }
+  throw new Error('头像压缩后仍然过大，请换一张图片');
+}