javascript - HTML Canvas 不显示图像

Question

我确信这一定是我忽略的简单事情，但我似乎无法让我的 Canvas 显示存储在服务器上的 jpg。

<img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/>
<canvas id="user_photo" style="position:relative;"></canvas>
<script type="text/javascript"> 
    var image = new Image();
    image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg";
    var pic = document.getElementById("user_photo");
    pic.getContext('2d').drawImage(image, 0, 0);
</script>

<img>按预期显示，但是 Canvas 是空白的，尽管它似乎具有正确的尺寸。有人看到我做错了什么吗？

我疲倦的眼睛会感激任何帮助。

谢谢

Answer 1

你可能想使用下面的方法

image.onload = function() {
    pic.getContext('2d').drawImage(image, 0,0);
}

因此您确保在尝试绘制图像时已加载图像。