已获取正确图片但ctx.drawImage无法在Canvas上绘制的问题

核心问题是图片加载是异步过程，你在给img.src赋值后立刻调用ctx.drawImage，此时图片还没加载完成，自然无法绘制到画布上。另外代码里还有个细节错误：JPG图片的标准MIME类型是image/jpeg，不是image/jpg，用后者会漏掉部分合法的JPG文件。

修复后的代码 #

fileselect.addEventListener("change", () => {
  const selectedFile = fileselect.files[0];
  // 修正MIME类型判断，同时兼容大小写
  if (selectedFile && /^image\/(png|jpeg)$/i.test(selectedFile.type)) {
    reader.readAsDataURL(selectedFile);
  }
});

reader.onload = () => {
  img.src = reader.result;
  // 等待图片加载完成后再执行绘制
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    // 可选：如果需要让画布匹配图片尺寸
    // canvas.width = img.width;
    // canvas.height = img.height;
    // ctx.drawImage(img, 0, 0);
  };
  // 可选：处理图片加载失败的情况
  img.onerror = () => {
    console.error("图片加载失败，请检查文件是否损坏");
  };
};

关键改动说明 #

• 将drawImage放到img.onload回调中，确保只有图片完全加载完成后才执行绘制
• 修正MIME类型判断逻辑，用正则兼容标准的image/jpeg，同时忽略大小写避免判断遗漏
• 增加选中文件的存在性校验，防止未选文件时触发报错
• 补充了图片加载失败的错误处理，便于排查异常情况

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