Canvas 实现多功能图片查看器（二）

前言

在 Web 开发中，图片查看是高频场景，但原生<img>标签的交互能力十分有限，无法满足用户自由拖拽、精准缩放、旋转查看等需求。Canvas 作为 HTML5 的核心绘图技术，能够让我们完全掌控图像的绘制逻辑和交互行为，轻松实现更灵活的图片查看体验。

本文将分享一个功能完整、交互流畅的 Canvas 图片查看器实现方案，整合了图片居中、鼠标拖拽、滚轮缩放、左右旋转（按钮 + 右键）、窗口自适应等核心功能，无任何第三方依赖，纯原生开发，可直接集成到项目中使用。 Canvas 实现多功能图片查看器（二）

功能亮点

✅ 精准居中：图片加载后自动显示在画布正中心，窗口大小变化时同步重新居中，适配任意尺寸图片（横图 / 竖图 / 大图 / 小图）✅ 流畅拖拽：鼠标按住图片即可自由拖动，松开或移出画布自动停止，光标样式实时切换（grab→grabbing），交互自然✅ 智能缩放：围绕鼠标位置滚轮缩放（体验更直观），缩放范围限制在 0.1~10 倍，避免过度缩放导致的异常✅ 多方式旋转：支持左旋转（逆时针）、右旋转（顺时针）按钮，同时保留右键旋转快捷操作，每次旋转 15°，旋转中心始终为画布中心✅ 状态控制：未加载图片时旋转按钮自动禁用（灰色不可点击），避免无效操作，提升用户体验✅ UI 美化：简洁布局搭配柔和阴影，按钮 hover 效果细腻，操作说明清晰易懂✅ 窗口自适应：画布尺寸跟随窗口变化自动调整，图片位置同步适配，兼容不同设备和屏幕尺寸

实现思路拆解

一、整体架构设计

整个查看器分为 3 个核心模块：

UI 布局层：文件选择框、Canvas 画布、旋转按钮、操作说明，采用 Flex 布局确保居中对齐状态管理层：维护图片对象、缩放比例、旋转角度、偏移量、拖拽状态等全局变量交互逻辑层：图片加载、拖拽、缩放、旋转、绘制、窗口自适应等核心功能实现

二、核心功能实现详解

1. 图片加载与初始化

图片加载是基础，通过FileReader读取本地图片文件，转换为 DataURL 格式后赋值给Image对象，避免跨域问题：



// 图片加载逻辑
fileInput.addEventListener('change', function(e) {
    if (e.target.files && e.target.files[0]) {
        const reader = new FileReader();
        reader.onload = function(event) {
            img.src = event.target.result; // 赋值DataURL
        };
        reader.readAsDataURL(e.target.files[0]); // 以DataURL格式读取
    }
});

图片加载完成后，重置缩放比例、旋转角度，调用居中函数，触发首次绘制，并启用旋转按钮：



img.onload = function() {
    imgLoaded = true;
    scale = 1; // 重置缩放
    rotation = 0; // 重置旋转
    resetImagePosition(); // 居中图片
    draw(); // 首次绘制
    rotateLeftBtn.disabled = false; // 启用旋转按钮
    rotateRightBtn.disabled = false;
};

2. 图片居中核心逻辑

居中是用户体验的关键，核心思路是计算图片左上角的偏移量，让图片中心与画布中心重合：



function resetImagePosition() {
    if (!imgLoaded) return;
    // 画布中心 - 图片半宽（考虑缩放）= 图片左上角X偏移
    offsetX = (canvas.width / 2) - (img.width * scale / 2);
    // 画布中心 - 图片半高（考虑缩放）= 图片左上角Y偏移
    offsetY = (canvas.height / 2) - (img.height * scale / 2);
}

窗口大小变化时，重新计算画布尺寸并调用该函数，确保图片始终居中：



window.addEventListener('resize', function() {
    canvas.width = window.innerWidth * 0.8; // 画布宽度为窗口80%
    canvas.height = window.innerHeight * 0.8; // 画布高度为窗口80%
    if (imgLoaded) {
        resetImagePosition();
        draw();
    }
});

3. 拖拽交互实现

拖拽功能的核心是跟踪鼠标位置变化，更新图片偏移量，关键在于修正鼠标坐标（避免画布在页面中的偏移影响计算）：

鼠标按下（mousedown）：标记拖拽状态，记录鼠标相对于画布的初始坐标鼠标移动（mousemove）：计算鼠标移动距离，累加至图片偏移量，实时绘制鼠标抬起 / 移出（mouseup/mouseleave）：重置拖拽状态，恢复光标样式



canvas.addEventListener('mousedown', function(e) {
    if (!imgLoaded) return;
    isDragging = true;
    const rect = canvas.getBoundingClientRect(); // 获取画布在页面中的位置
    lastX = e.clientX - rect.left; // 鼠标相对于画布的X坐标
    lastY = e.clientY - rect.top; // 鼠标相对于画布的Y坐标
    canvas.style.cursor = 'grabbing';
});
 
canvas.addEventListener('mousemove', function(e) {
    if (!isDragging || !imgLoaded) return;
    const rect = canvas.getBoundingClientRect();
    const currentX = e.clientX - rect.left;
    const currentY = e.clientY - rect.top;
    // 累加移动距离到偏移量
    offsetX += currentX - lastX;
    offsetY += currentY - lastY;
    lastX = currentX;
    lastY = currentY;
    draw(); // 实时绘制
});

4. 围绕鼠标缩放（提升体验）

普通缩放以固定点为中心，体验不佳，围绕鼠标缩放让操作更直观，实现步骤：

获取鼠标在画布上的坐标计算缩放前鼠标相对于图片的位置（转换为图片坐标系）更新缩放比例（限制范围 0.1~10 倍）调整偏移量，确保缩放后鼠标位置与原图片位置对应



canvas.addEventListener('wheel', function(e) {
    if (!imgLoaded) return;
    e.preventDefault(); // 阻止页面滚动
    const zoomSpeed = 0.1;
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
 
    // 计算鼠标在图片坐标系中的位置
    const imgX = (mouseX - offsetX) / scale;
    const imgY = (mouseY - offsetY) / scale;
 
    // 更新缩放比例
    const delta = e.deltaY > 0 ? -1 : 1; // 滚轮向下=缩小，向上=放大
    scale = Math.max(0.1, Math.min(10, scale + delta * zoomSpeed));
 
    // 调整偏移量，实现围绕鼠标缩放
    offsetX = mouseX - imgX * scale;
    offsetY = mouseY - imgY * scale;
 
    draw();
});

5. 旋转功能（按钮 + 右键）

旋转基于 Canvas 的rotate方法，关键是将旋转中心设置为画布中心，同时保证按钮和右键操作同步：

左旋转：旋转角度递减 15°（转为弧度）右旋转 / 右键：旋转角度递增 15°（转为弧度）旋转前需通过translate将 Canvas 原点移动到画布中心，旋转后恢复状态



// 左旋转按钮
rotateLeftBtn.addEventListener('click', function() {
    if (!imgLoaded) return;
    rotation -= 15 * Math.PI / 180; // 逆时针15°
    draw();
});
 
// 右旋转按钮
rotateRightBtn.addEventListener('click', function() {
    if (!imgLoaded) return;
    rotation += 15 * Math.PI / 180; // 顺时针15°
    draw();
});
 
// 右键旋转（兼容）
canvas.addEventListener('contextmenu', function(e) {
    if (!imgLoaded) return;
    e.preventDefault(); // 阻止默认右键菜单
    rotation += 15 * Math.PI / 180;
    draw();
});

6. 核心绘制函数

Canvas 绘制需遵循「状态保存 – 变换 – 绘制 – 恢复」的流程，确保每次绘制不影响后续操作：



function draw() {
    if (!imgLoaded) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ctx.save(); // 保存当前绘图状态
 
    // 1. 平移原点到画布中心（旋转中心）
    ctx.translate(canvas.width / 2, canvas.height / 2);
    // 2. 应用旋转
    ctx.rotate(rotation);
    // 3. 应用缩放
    ctx.scale(scale, scale);
    // 4. 计算绘制位置（修正偏移量）
    const drawX = (offsetX - canvas.width / 2) / scale;
    const drawY = (offsetY - canvas.height / 2) / scale;
    // 5. 绘制图片
    ctx.drawImage(img, drawX, drawY);
 
    ctx.restore(); // 恢复绘图状态
}

三、UI 样式优化

为提升用户体验，样式设计遵循「简洁、直观、交互反馈清晰」的原则：

按钮默认禁用状态为灰色，启用后变为主题色（#409eff），hover 时添加背景色和阴影画布添加白色背景和柔和阴影，模拟图片查看器的真实效果操作说明使用高亮色标注核心操作，提升可读性



/* 旋转按钮样式 */
.rotate-buttons {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}
#rotateLeft:not(:disabled), #rotateRight:not(:disabled) {
    border-color: #409eff;
    color: #409eff;
}
#rotateLeft:not(:disabled):hover, #rotateRight:not(:disabled):hover {
    background-color: #f0f9ff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
#rotateLeft:disabled, #rotateRight:disabled {
    cursor: not-allowed;
    color: #ccc;
    border-color: #eee;
    background-color: #fafafa;
}