Как добавить изображение в холст

Я немного экспериментирую с новым элементом canvas в HTML.

Я просто хочу добавить изображение на холст, но по какой-то причине он не работает.

У меня есть следующий код:

HTML

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

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);
}

Изображение существует, и я не вижу ошибок JavaScript. Изображение просто не отображается.

Это должно быть что-то действительно простое, что я пропустил...

Ответ 1

Возможно, вам придется подождать, пока изображение не будет загружено, прежде чем рисовать его. Попробуйте это вместо этого:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

Т.е. нарисуйте изображение в обратном обратном направлении изображения.

Ответ 2

Обратите внимание на это. Надеюсь, это поможет вам...

var erase_image = new Image();
erase_image.src = '../images/erazer.gif';           
erase_image.onload = function()
{
     context.drawImage(erase_image, 78, 19);
}

Ответ 3

вот пример кода для рисования изображения на холсте -

$("#selectedImage").change(function(e) {

var URL = window.URL;
var url = URL.createObjectURL(e.target.files[0]);
img.src = url;

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

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);
}});

В приведенном выше коде selectedImage - это элемент управления, который можно использовать для просмотра изображения в системе. Для получения дополнительной информации о примере кода для рисования изображения на холсте при сохранении соотношения сторон:

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html

Ответ 4

В моем случае я ошибся в параметрах функции, которые:

context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);

Если вы ожидаете, что они будут

context.drawImage(image, width, height);

вы поместите изображение прямо за холст с теми же эффектами, что и в вопросе.

Ответ 5

Привет, пожалуйста, найдите решение для добавления изображения:

HTML

 <img src="../images/svg/Fault.svg"  style="display: none;" id="fault-img"/>
  <canvas class="some-class" id="some-id"  height="100"></canvas>

  <script>
 var c = document.getElementById("some-id");
 var ctx = c.getContext("2d");
  var img = document.getElementById("alert-img");
  ctx.drawImage(img, 30, 15, 16, 16);


 </script>