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

106

Я немного экспериментирую с новым элементом холста в 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. Изображение просто не отображается.

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

javascript html canvas

— PeeHaa
источник

218

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

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

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

— Томас
источник

6

@swogger скорее спасибо, спросите что-нибудь, попробуйте. Это сработало отлично. Убедитесь, что вы сначала проверили размер изображения исходного файла, иначе он будет обрезан, если вы не используете полную функцию context.drawImage(base_image, 0, 0, 200, 200);. Это будет рисовать base_img из позиции 0px с областью рисования 200x200px.

— m3nda

1

Это был именно мой случай. Я загружал данные blob на холст, используя new Imageи задаваясь вопросом, почему он всегда показывал мне предыдущее изображение. Оказывается, даже если я загружаю изображение из переменной, мне все равно приходится ждать, пока это onloadпроизойдет. Спасибо!

— aexl

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

— Сагар Равал,

6

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

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

— Nvivekgoyal
источник

1

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

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

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

context.drawImage(image, width, height);

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

— Марк
источник

0

Вы должны использовать .onload

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d"); 

const drawImage = (url) => {
    const image = new Image();
    image.src = url;
    image.onload = () => {
       ctx.drawImage(image, 0, 0)
    }
}

Вот почему

Если вы загружаете изображение сначала после того, как холст уже был создан, холст не сможет передать все данные изображения для рисования изображения. Итак, вам нужно сначала загрузить все данные, которые поставляются с изображением, а затем вы можете использовать drawImage ()

— Энтони Гедеон
источник