HTML Canvas指定宽高绘制上传图片失效问题咨询

你遇到的问题核心是Canvas的CSS尺寸和绘图缓冲区尺寸不匹配：

• 你只给Canvas设置了style="width: 1200px; height: 500px;"，这只是它在页面上的显示大小，但Canvas内部的绘图画布（像素缓冲区）默认是300x150。
• 当你调用drawImage(image, 0, 0, 400, 200)时，这个400x200是相对于300x150的缓冲区尺寸的，浏览器会自动把这个缓冲区的内容拉伸到CSS设置的1200x500显示，导致图片看起来铺满了整个Canvas。

修复步骤 #

1. 给Canvas元素添加width和height属性 #

让绘图缓冲区尺寸和你想要的显示尺寸匹配：

<canvas id="canvas" style="width: 1200px; height: 500px;" width="1200" height="500"></canvas>

2. 确保正确获取Canvas上下文 #

补充你原代码中缺失的上下文获取逻辑（否则canvasCtx会是undefined）：

// 获取Canvas元素和2D上下文
const canvas = document.getElementById('canvas');
const canvasCtx = canvas.getContext('2d');

// 文件读取与绘制逻辑
var fileReader = new FileReader();

fileReader.onload = function( event ){
    var image = new Image();

    image.onload = function() {
        // 现在400x200就是Canvas上的实际像素大小，不会被拉伸
        canvasCtx.drawImage( image, 0, 0, 400, 200 );
    };

    image.src = event.target.result;
}

fileReader.readAsDataURL( file );

额外说明 #

如果需要让Canvas的显示尺寸和绘图缓冲区尺寸不同（比如适配不同屏幕），可以通过计算缩放比例来调整绘图逻辑，但大部分场景下让两者保持一致是最直观的做法。

内容的提问来源于stack exchange，提问作者William Troup