Как загрузить изображение на холсте, используя Promise - PullRequest
Новая
       3

Как загрузить изображение на холсте, используя Promise

2 голосов
/ 05 апреля 2020

Я пытаюсь загрузить изображения на холст из моей локальной папки, это мой 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 / tileheet.png 404 (не найдено) и я не понимаю, почему.

1 Ответ

1 голос
/ 06 апреля 2020

Ваш код прекрасно загружается с известным хорошим изображением: 

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 (Не найдено)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...