Как я могу использовать изображение на холсте HTML5 без предварительного изображения на странице? - PullRequest
Новая
       29

Как я могу использовать изображение на холсте HTML5 без предварительного изображения на странице?

1 голос
/ 06 января 2020

На странице W3 Schools HTML5 Изображение холста они используют тег <img> на странице перед загрузкой своего холста. Их код приведен ниже. 

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
}
</script>

У меня есть карта (в виде изображения), которую я загрузил на сервер, который мне нужно использовать, но я не могу найти способ иметь только одно изображение на холст. Например ... enter image description here Слева - изображение, которое я использую, но оно мне нужно, чтобы сработало изображение справа (это холст).

Любые советы?

1 Ответ

1 голос
/ 06 января 2020

Используйте JS для создания изображения

Если вы знаете путь к изображению или можете предоставить его, вы можете использовать следующее для создания изображения. Важно отметить, что загрузка изображения занимает некоторое время, и вы не можете успешно использовать изображение до его загрузки. 

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  var img = document.createElement("img");

  img.onload = function() {
    ctx.drawImage(img, 10, 10);
  }

  // triggers onload event (after it loads of course)
  img.src = "//via.placeholder.com/350x150";

}
<p>Canvas:</p>
<canvas id="myCanvas" width="370" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
...