超大位图处理需分阶段降维：先按4096×4096阈值缩放控尺寸，再通过坐标逆向映射保原始精度，最后用临时canvas异步裁剪导出；须处理跨域、DPR适配及toBlob失败降级。
处理超大尺寸位图（如 8000×6000 或更高）时，Canvas 容易触发浏览器内存保护、尺寸限制或静默失败。关键不是“强行画”，而是分阶段降维：先控尺寸、再保精度、最后异步导出。
识别并规避 canvas 尺寸硬限制
部分 Android WebView 和旧版 Safari 对单个 canvas 的像素总数有上限（常见为 16777216 ≈ 4096×4096）。若直接用 img.naturalWidth × img.naturalHeight 创建 canvas，可能渲染为空白或被截断。
- 务必用
img.naturalWidth和img.naturalHeight判断原始尺寸，不要用img.width/img.height（CSS 缩放值不可靠） - 超过阈值（如 > 12M 像素）时，按比例缩小原图：计算缩放比
scale = Math.min(4096 / w, 4096 / h)，生成新 canvas 尺寸Math.floor(w * scale)和Math.floor(h * scale) - 缩放后仍需保留原始分辨率元信息，用于后续裁剪坐标的逆向映射
裁剪坐标必须基于原始像素空间
用户在页面上拖选的区域是缩放后 canvas 的视觉坐标，不能直接用于 drawImage()。必须还原为原始图像上的像素位置。
- 用
canvas.getBoundingClientRect()获取当前渲染宽高 - 算出缩放因子：
scaleX = canvas.width / rect.width，scaleY = canvas.height / rect.height - 鼠标事件坐标换算：
origX = (e.clientX - rect.left) * scaleX，同理算origY - 裁剪参数
sx, sy, sWidth, sHeight全部使用换算后的原始像素值
用临时 canvas 分离裁剪与导出，支持异步执行
避免主线程阻塞和内存峰值，把“绘制裁剪区域”和“编码导出”拆开，用 Promise + setTimeout 或 requestIdleCallback 调度。
立即学习“前端免费学习笔记（深入）”；
- 创建一个仅用于裁剪的临时 canvas（尺寸 = 目标输出宽高，如 800×600），不复用主预览 canvas
- 调用
ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, dWidth, dHeight)完成像素级裁剪 - 导出阶段单独封装：
tempCanvas.toBlob(resolve, 'image/jpeg', 0.75)——toBlob是异步且可控的，比toDataURL更省内存 - 对超大裁剪结果（如输出尺寸仍 > 2000px），可再加一层降采样：先 drawImage 到中等尺寸 canvas，再 toBlob
跨域与 DPR 兼容细节不能跳过
否则在 iOS Safari 或高清屏设备上会导出模糊图、黑图或静默失败。
- 加载图片时设置
img.crossOrigin = 'anonymous'，防止 canvas 污染 - 若目标设备
window.devicePixelRatio > 1，且需高清晰输出，应让临时 canvas 的width/height按 DPR 放大，但 CSS 显示尺寸保持不变（用style.width/style.height控制） - 导出前检查
tempCanvas.toBlob是否返回null；若失败，降质量至 0.6 并重试一次
