使用变量参数时JavaScript drawImage加载异常的原因及解决方法

嘿，你猜的完全没错！问题核心就是图像还没加载完成，你就提前计算了依赖于图像尺寸的变量，导致这些变量全是无效值，最后drawImage用错了参数才出问题。

咱们拆解下你原来代码的问题：

• 创建logoImg后，立刻就去拿logoImg.width，这时候图像连src都没设置，根本没开始加载，所以originalWidth其实是0
• 后续基于这个0计算出来的logoImg.width、logoImg.height，还有logo.x、logo.y全都是错误的数值
• 等onload触发时，你用的是这些早就算错的变量，自然画不出正确的图像

而你替换成ctx.drawImage(logoImg, 1, 1, 100, 100)能生效，是因为此时logoImg已经加载完成，直接用它本身+固定尺寸参数，绕开了之前错误计算的变量。

正确的做法：把所有依赖图像尺寸的逻辑，都放到onload回调里 #

这样能保证所有变量都是基于加载完成后的真实图像尺寸计算的，步骤如下：

1. 先创建Image对象
2. 先绑定onload回调（一定要在设置src之前，避免图像缓存时onload不触发）
3. 在onload里计算尺寸、创建logo对象，最后调用drawImage

修正后的完整代码：

var logoImg = new Image();
var canvas = document.querySelector('canvas'); // 假设你已获取canvas元素
var ctx = canvas.getContext('2d');

// 先绑定onload回调，再设置src
logoImg.onload = function () {
    // 此时图像已加载，width和height是真实的原始尺寸
    var originalWidth = logoImg.width;
    // 计算目标宽度（占浏览器窗口50%）
    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    // 按原比例计算目标高度
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);
    
    // 创建logo对象，此时坐标计算也是基于正确尺寸的
    var logo = {
        img: logoImg,
        x: (canvas.width/2) - (logoImg.width/2),
        y: (canvas.height/2) - (logoImg.height/2)
    };
    
    // 用正确的变量绘制图像
    ctx.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
};

// 最后设置src，触发图像加载
logoImg.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

另外补充个小细节：如果你的canvas尺寸是动态变化的（比如随窗口大小调整），最好在计算logo坐标前，确保canvas的width和height是当前的实际显示尺寸，避免出现坐标偏移的情况哦～

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