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

Question

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

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

Iиметь следующий код:

HTML

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

CSS

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

JS

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.Изображение просто не отображается.

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

Answer 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);
  }
}

Т.е. нарисуйте изображение в обратном вызове загрузки изображения.

Answer 2

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

$("#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

Answer 3

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

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

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

context.drawImage(image, width, height);

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