Canvas绘制的图像点击后缩小，如何实现点击后不缩放？

核心问题分析 #

你当前的代码仅完成了图像的初始绘制，但点击后出现图像缩放，大概率是点击事件触发了错误的尺寸修改逻辑，或是你直接修改了Image元素本身的宽高，导致后续绘制时使用了被篡改的尺寸参数。另外要注意：Canvas的实际画布尺寸（width/height属性）和CSS样式尺寸是两个独立概念，若两者不匹配也会引发视觉缩放，但你明确Canvas尺寸未变，所以重点聚焦在点击逻辑和图像尺寸的处理上。

具体修复方案 #

1. 禁止修改原始Image元素的尺寸 #

你代码里直接修改this.image.width = 794和this.image.height = 1123的操作会改变图像本身的固有尺寸，后续任何基于该Image的绘制都会沿用这个被修改的值，极易引发缩放问题。正确做法是保留图像原始尺寸，仅通过drawImage参数控制Canvas上的显示大小：

ngAfterViewInit() {
    this.image = new Image();
    this.image.src = './assets/images/A4.png';
    this.image.onload = () => {
        const canvas = this.canvas.nativeElement;
        // 仅设置Canvas的实际画布尺寸，不修改Image元素本身的宽高
        canvas.width = 794;
        canvas.height = 1123;
        const context = canvas.getContext('2d');
        // 用Canvas尺寸作为绘制目标大小，图像原始尺寸作为源素材尺寸
        context.drawImage(this.image, 0, 0, canvas.width, canvas.height);
        this.imageWidth = canvas.width;
        this.imageHeight = canvas.height;
    }
}

2. 阻止点击事件的默认行为 #

如果点击时触发了浏览器的默认缩放行为（比如误触了Ctrl+点击组合键），可以给Canvas添加点击事件监听，阻止默认行为：

@ViewChild('canvas') canvas: ElementRef<HTMLCanvasElement>;

ngAfterViewInit() {
    // ... 原有图像加载绘制代码 ...
    
    const canvasEl = this.canvas.nativeElement;
    canvasEl.addEventListener('click', (e) => {
        e.preventDefault();
        // 如需自定义点击逻辑，此处绝对不要修改Canvas或Image的尺寸参数
    });
}

3. 确保重绘时使用固定尺寸 #

如果点击后存在重绘逻辑，必须保证重绘时drawImage的目标尺寸严格使用Canvas的实际宽高，而非动态变化的值：

// 示例重绘函数
redrawImage() {
    const canvas = this.canvas.nativeElement;
    const context = canvas.getContext('2d');
    // 先清空画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 始终以Canvas实际尺寸作为绘制目标
    context.drawImage(this.image, 0, 0, canvas.width, canvas.height);
}

关键注意事项 #

• 严格区分Canvas实际画布尺寸（width/height属性，决定绘图精度）和CSS样式尺寸（控制Canvas在页面上的显示大小），两者保持一致可避免视觉上的缩放偏差。
• 永远不要随意修改Image元素的width/height属性，所有在Canvas上的显示大小控制都通过drawImage的参数实现。

内容的提问来源于stack exchange，提问作者Quyền Nguyễn