无法在画布上加载图像（Javascript）答案

【问题标题】：can't load the image on canvas (Javascript)无法在画布上加载图像（Javascript）
【发布时间】：2021-08-04 06:23:12
【问题描述】：

我正在尝试将图像加载到画布上，但它不起作用:( 我检查了函数和变量很多时间，但我找不到任何错误。帮我找出无法加载的原因。当我在tomcat服务器上运行它时，只显示了aliceblue颜色的画布。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Print image and text</title>
<script>
function drawPicture(ctx) {
    var img = new Image();
    img.addEventListener('load', function() {
        ctx.drawImage(img, 20, 20, 100, 100);
        ctx.font = "50px forte";
        ctx.strokeStyle="blue";
        ctx.fillStyle = "violet";
        ctx.strokeText("Spongebob", 20, 100);
        ctx.fillText("Spongebob", 20, 100);
    }, false);
    img.src = "spongebob.png";
}

</script>
</head>
<body>
<h3>Print image and text</h3>
<hr>
<canvas id="myCanvas" width="300" height="130" 
        style="background-color:aliceblue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);
</script>
</body>
</html>

【问题讨论】：

检查您的开发工具的网络面板并验证您的资源是否正确获取。

标签： javascript html css canvas html5-canvas

【解决方案1】：

您的代码很好，这是一个带有不同图像的示例...

<!DOCTYPE html>
<html>

<body>
  <canvas id="myCanvas" width="300" height="130"></canvas>
  <script>
    function drawPicture(ctx) {
      var img = new Image();
      img.addEventListener('load', function() {
        ctx.drawImage(img, 20, 20, 100, 100);
        ctx.font = "50px forte";
        ctx.strokeStyle = "blue";
        ctx.fillStyle = "violet";
        ctx.strokeText("Spongebob", 20, 100);
        ctx.fillText("Spongebob", 20, 100);
      }, false);
      img.src = "http://i.stack.imgur.com/UFBxY.png";
    }
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    drawPicture(context);
  </script>
</body>

</html>

唯一可能是您尝试加载的图像不存在...
正如 @Kaiido 在 cmets 中提到的，您需要调试它，检查您的浏览器开发人员工具，看看图像是否正确加载。

您应该会看到如下内容：

【讨论】：

【解决方案2】：

代替image.addEventListener，试试image.onload？

【讨论】：

【解决方案3】：

您可以尝试直接在画布上添加图像，而不是使用图像中的加载事件。

function drawPicture(ctx) {
    var img = new Image();
    img.src = "spongebob.png";
    ctx.drawImage(img, 20, 20, 100, 100);
    ctx.font = "50px forte";
    ctx.strokeStyle="blue";
    ctx.fillStyle = "violet";
    ctx.strokeText("Spongebob", 20, 100);
    ctx.fillText("Spongebob", 20, 100);
}

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
drawPicture(context);

<h3>Print image and text</h3>
<hr>
<canvas id="myCanvas" width="300" height="130" 
        style="background-color:aliceblue"></canvas>

【讨论】：

这是不正确的！您需要加载事件，否则您可能会在图像未完全加载的情况下执行 drawImage，并且不会显示任何内容