本文详解在图像旋转时动态调整 canvas 尺寸、同步更新裁剪覆盖层（overlay）及坐标映射逻辑的关键技术，确保旋转后的图像完整显示、overlay 精准贴合、裁剪结果准确无误。
本文详解在图像旋转时动态调整 canvas 尺寸、同步更新裁剪覆盖层（overlay）及坐标映射逻辑的关键技术，确保旋转后的图像完整显示、overlay 精准贴合、裁剪结果准确无误。
在基于 Canvas 的图像编辑器中，常见需求是支持 90° 倍数旋转（如顺/逆时针旋转），但若仅对图像内容做 ctx.rotate() 变换，而 Canvas 元素自身宽高未响应式更新，则会导致：图像被裁剪、overlay 错位、裁剪坐标计算失准。根本解法是 让 Canvas 的逻辑尺寸（canvas.width/height）随旋转自动切换，并统一维护「原始图像 → Canvas 坐标 → 视口像素」的三层映射关系。
✅ 核心原理：Canvas 尺寸需匹配旋转后图像的外接矩形
当图像宽高为 W × H，绕中心旋转 90° 或 270° 后，其外接矩形尺寸变为 H × W；而 0°/180° 时仍为 W × H。因此，drawRotatedImage() 中必须重设 Canvas 的内在尺寸（非 CSS 样式）：
function drawRotatedImage() {
const { naturalWidth: w, naturalHeight: h } = imageObj;
const is90Or270 = Math.abs(rotation % 360) === 90 || Math.abs(rotation % 360) === 270;
// ✅ 关键：重置 canvas 内在尺寸（单位：CSS像素）
canvas.width = is90Or270 ? h : w;
canvas.height = is90Or270 ? w : h;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
// 以新 Canvas 中心为旋转原点
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rotation * Math.PI / 180);
// 绘制原始图像，居中填充（-w/2, -h/2 保证居中）
ctx.drawImage(imageObj, -w / 2, -h / 2, w, h);
ctx.restore();
initializeOverlay(); // ✅ 旋转后必须重初始化 overlay 尺寸与位置
}
⚠️ 注意：
canvas.width/height是 Canvas 的位图分辨率，直接影响drawImage的像素精度和toDataURL输出质量；而canvas.style.width/height仅控制 CSS 渲染缩放，二者需协同设置（见下文）。
? Overlay 同步适配：基于容器比例动态定位
initializeOverlay() 不再依赖固定宽高，而是根据当前 Canvas 实际渲染尺寸（由 getBoundingClientRect() 获取）与原始图像自然尺寸计算缩放比，从而精准设置 overlay 的 CSS 宽高与偏移：
function initializeOverlay() {
const container = document.querySelector('.image-container');
const canvasRect = canvas.getBoundingClientRect();
const { naturalWidth: w, naturalHeight: h } = imageObj;
// ✅ 使用 canvas 渲染尺寸（非 naturalSize）计算当前缩放比
const ratio = Math.min(canvasRect.width / w, canvasRect.height / h);
const overlayWidth = w * ratio - 4; // 微调避免边框溢出
const overlayHeight = h * ratio - 3;
overlay.style.width = `${overlayWidth}px`;
overlay.style.height = `${overlayHeight}px`;
// 居中 overlay（相对于 .image-container）
overlay.style.left = `${(container.clientWidth - overlayWidth) / 2}px`;
overlay.style.top = `${(container.clientHeight - overlayHeight) / 2}px`;
// ✅ 重新绑定 jQuery UI 事件（因 DOM 尺寸已变）
$(overlay).resizable({ /* ... */ }).draggable({ /* ... */ });
}
? 裁剪坐标映射：从视口像素到 Canvas 像素的精确转换
点击「Crop」时，overlay.getBoundingClientRect() 返回的是 overlay 在视口中的像素位置，而 Canvas 内部绘图需转换为 Canvas 坐标系。关键在于使用 canvas.width / canvasRect.width 和 canvas.height / canvasRect.height 作为 X/Y 方向独立缩放因子（支持非等比缩放场景）：
function cropImage() {
const canvasRect = canvas.getBoundingClientRect();
const bounds = overlay.getBoundingClientRect();
// ✅ 独立计算 X/Y 缩放比（处理 canvas.style 缩放）
const scaleX = canvas.width / canvasRect.width;
const scaleY = canvas.height / canvasRect.height;
// ✅ 将 overlay 的视口坐标转换为 Canvas 坐标
const cropX = (bounds.left - canvasRect.left) * scaleX;
const cropY = (bounds.top - canvasRect.top) * scaleY;
const cropWidth = bounds.width * scaleX;
const cropHeight = bounds.height * scaleY;
croppedCanvas.width = cropWidth;
croppedCanvas.height = cropHeight;
// ✅ 按 Canvas 坐标裁剪（此时 rotation 已体现在 canvas 内容中）
if (selectedShape === "rectangle") {
croppedCtx.drawImage(canvas, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
}
// ... circle 裁剪逻辑（同理）
}
? 补充说明与最佳实践
-
图像加载时机：务必在
imageObj.onload中初始化 Canvas 尺寸和首次绘制，避免naturalWidth/Height为 0； -
跨域问题：设置
imageObj.crossOrigin = "Anonymous"以支持toDataURL()导出； -
旋转状态持久化：
rotation变量需全局维护，每次旋转后取模归一化（如rotation = (rotation + 360) % 360）可提升健壮性； -
性能优化：频繁旋转时，可缓存
canvas.width/height上次值，避免重复设置； -
响应式增强：监听
window.resize并触发initializeOverlay()，确保窗口缩放后 overlay 仍精准贴合。
通过以上三步——Canvas 尺寸动态切换、Overlay 基于渲染尺寸重定位、裁剪坐标按缩放比精确映射——即可实现旋转后图像完整显示、覆盖层实时跟随、裁剪结果像素级准确的工业级图像编辑体验。
