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

Question

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

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

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

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

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

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

518 3

javascript html5 canvas

3 ответов:

Comments

Ничего не найдено.

Thomas · Accepted Answer · 2018-02-15 23:38:29

Возможно, вам придется подождать, пока изображение не будет загружено, прежде чем рисовать его. Попробуйте вместо этого:
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);
  }
}
т. е. нарисуйте изображение в обратном вызове onload изображения.

nvivekgoyal · Accepted Answer · 2016-11-03 11:29:46

вот пример кода для рисования изображения на холсте -
$("#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

Marc · Accepted Answer · 2017-11-07 12:08:27

в моем случае я ошибся параметрами функции, которые являются:
context.drawImage(image, left, top);
context.drawImage(image, left, top, width, height);
Если вы ожидаете, что они будут
context.drawImage(image, width, height);
вы разместите изображение только за пределами холста с теми же эффектами, как описано в вопросе.