如何使用 Promise 在 canvas 上加载图像

Question

我正在尝试从本地文件夹中加载 canvas 上的图像，这是我的 js 脚本：

function loadElement(url) {
  return new Promise((resolve) => {
    const element = new Image();
    element.addEventListener("load", () => {
      resolve(element);
    });
    element.src = url;
  });
}

//canvas
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.fillRect(0, 0, 50, 50);

loadElement("./tilesheet.png").then((element) =>
  context.drawImage(element, 0, 0)
);

和我的 html 脚本：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Surface</title>
    <link rel="stylesheet" href="css/main.css" />
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

但我收到此错误： GET http://127.0.0.1:5500/public/tilesheet.png 404（未找到） ，我不明白为什么。

Answer 1

您的代码可以很好地加载已知良好的图像：

 function loadElement(url) { return new Promise((resolve) => { const e = new Image(); e.addEventListener("load", () => { resolve(e); }); e.src = url; }); } const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); context.fillRect(0, 0, 50, 50); loadElement("http://i.stack.imgur.com/UFBxY.png").then((e) => context.drawImage(e, 0, 0));

 <canvas id="canvas"></canvas>

我猜错误是正确的，您的图像不存在： 404（未找到）

如何使用 Promise 在 canvas 上加载图像

问题描述

1 个解决方案

解决方案1
1 2020-04-05 22:30:19

如何使用 Promise 在 canvas 上加载图像

问题描述

1 个解决方案

解决方案1 1 2020-04-05 22:30:19

解决方案1
1 2020-04-05 22:30:19