Canvas滚轮缩放裁剪的核心是保持裁剪框与原始图像像素映射关系不变：1.动态更新缩放比并重绘；2.鼠标坐标需转为canvas像素坐标；3.裁剪区域须反算回原始像素，导出时用新canvas干净绘制。
Canvas 裁剪本身不直接“缩放”，它处理的是像素坐标；所谓“滚轮缩放裁剪”，其实是：在缩放图片显示的同时，保持裁剪框与原始图像像素区域的映射关系不变。关键不是让裁剪框跟着变大，而是让鼠标坐标能正确反算回原始像素位置。
核心逻辑：缩放 ≠ 裁剪框放大
用户看到的图片在 canvas 上被放大了，但裁剪操作必须作用于原始图片的真实像素。否则——
- 滚轮放大 2 倍后拖拽裁剪框，导出图会只截到原图 1/4 区域（错位）
- 缩放后直接用
event.clientX计算裁剪坐标，滚动页面或加 margin 就失效 - 没重置 canvas 绘图状态就连续缩放，图像会模糊、偏移、重影
实现三步关键动作
1. 滚轮事件中动态更新缩放比，并重绘
- 监听
canvas.addEventListener('wheel', e => { ... }) - 用
e.deltaY判断方向，按比例调整scale（如每次 ±0.1），并限制范围（如 0.5–4.0） - 调用
ctx.clearRect()清空画布，再用drawImage(img, 0, 0, img.width * scale, img.height * scale)重绘缩放后图像
2. 所有鼠标坐标必须映射到 canvas 像素坐标系
- 每次获取
event.clientX/Y前，先调const rect = canvas.getBoundingClientRect() - 计算：
const x = event.clientX - rect.left，const y = event.clientY - rect.top - 这个
x/y才是真正落在 canvas 像素网格里的点，后续所有拖拽起点、裁剪框边界都基于它
3. 裁剪框坐标必须反向换算回原始像素
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 假设原始图宽高为
img.naturalWidth / naturalHeight，当前 canvas 显示宽高为canvas.width / height - 缩放比
scale = canvas.width / img.naturalWidth（等比缩放时） - 鼠标在 canvas 上选中左上角
(x1, y1)、右下角(x2, y2)，则原始裁剪区域为： -
sx = Math.round(x1 / scale)，sy = Math.round(y1 / scale) -
sw = Math.round((x2 - x1) / scale)，sh = Math.round((y2 - y1) / scale) - 导出时用
tempCtx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh)
别漏掉的细节
缩放中心要对齐光标位置：单纯用 scale 放大会以 canvas 左上角为基点，导致图片“跑偏”。需结合 transform-origin 或 canvas 平移补偿——更稳妥的做法是：
- 记录滚轮触发时的
clientX/clientY - 换算成 canvas 像素坐标
cx/cy - 重绘前平移画布：
ctx.translate(cx, cy); ctx.scale(scale, scale); ctx.translate(-cx, -cy)
裁剪框绘制要独立于缩放状态：裁剪框是覆盖层，应始终绘制在未缩放的 canvas 坐标系上（即用当前 x/y 值直接画矩形），而不是用原始像素值去画——否则你会看到一个极小的、几乎看不见的框。
导出前务必用新 canvas 重绘：不能从主 canvas 直接 toDataURL()，因为上面可能有辅助线、蒙版、甚至多次叠加的 drawImage。必须新建 canvas，仅用原始图片 + 原始像素裁剪参数，干净输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
