超大图像裁剪不崩的核心是主动降载、分帧执行、规避全图加载：限制加载尺寸、缩略图交互、分层canvas、dpr适配、raf节流及toblob兜底。
处理超大图像裁剪时，Canvas本身不自动管理内存，容易触发浏览器OOM（Out of Memory）或卡死。关键不是“能不能裁”，而是“怎么裁不崩”——核心在于主动降载、分帧执行、规避全图加载。
限制原始图像加载尺寸
用户上传的图片动辄 8000×6000 像素，直接 drawImage 会瞬间占用数百MB显存。必须在解码前压缩尺寸：
- 用
createObjectURL(file)获取临时地址，再用new Image()加载 - 图片 onload 后，按目标显示区域计算缩放比：
const scale = Math.min(1024 / img.naturalWidth, 1024 / img.naturalHeight, 1); - 创建中间 canvas（如 1024×1024），用
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h)绘制缩略图，后续所有交互基于此缩略图 - 真实裁剪坐标需反向映射回原图：例如缩略图上选中
{x: 200, y: 150, width: 400, height: 300}，原图对应区域为{sx: 200/scale, sy: 150/scale, sWidth: 400/scale, sHeight: 300/scale}
避免一次性绘制全图到主canvas
不要把原图或高分辨率图直接 drawImage 到主 canvas 上——这是内存爆炸的主因。应分层处理：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 主 canvas 只用于交互层：绘制缩略图 + 半透明遮罩 + 裁剪框边框（
globalAlpha = 0.5） - 另建一个
offscreenCanvas（或document.createElement('canvas')）专用于最终裁剪输出，且尺寸严格等于目标导出尺寸（如 1200×900） - 最终裁剪调用
outputCtx.drawImage(sourceImg, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight)，只拉取原图中那一块像素，不加载其余部分 - 裁剪完成后立即调用
URL.revokeObjectURL(url)清理临时地址，防止内存泄漏
移动端与高DPR设备的渲染节流
在 iPhone 或高分屏上，canvas.width/height 若未按 window.devicePixelRatio 缩放，会导致 canvas 内部缓冲区过大；若盲目放大又加剧内存压力：
- 设置 canvas 显示尺寸（CSS width/height）为适配视口的值，比如
canvas.style.width = '100%'; canvas.style.height = 'auto'; - 但 canvas 的内在像素尺寸（
canvas.width和canvas.height）应设为：const dpr = window.devicePixelRatio || 1; canvas.width = rect.width * Math.min(dpr, 2); canvas.height = rect.height * Math.min(dpr, 2);（上限设为 2 防止 iPad Pro 级别设备溢出） - 鼠标/触摸事件坐标换算后，仅用于定位，真正传给 drawImage 的
sx/sy仍基于原图分辨率，与 DPR 无关 - 对频繁重绘的交互（如拖拽裁剪框），用
requestAnimationFrame节流，避免每帧都 clear + redraw 整个 canvas
导出阶段的轻量兜底策略
toBlob() 在超大图上可能失败或超时，需准备 fallback：
- 优先使用
canvas.toBlob(callback, 'image/jpeg', 0.8)，而非 toDataURL（后者生成 Base64 字符串，内存翻倍） - 添加超时保护：
const timer = setTimeout(() => reject(new Error('Export timeout')), 8000);，并在 callback 中 clearTimeout - 若失败，尝试降质重试：先用 0.5 质量导出；仍失败则缩小输出尺寸（如从 1200px 宽降到 800px），再试一次
- 对 >20MB 的原图，可提示用户“已启用智能采样模式”，后台用 Web Worker 解码并分块处理（需额外引入 offscreen-canvas 支持）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
