Como adicionar imagem à tela

106

Estou experimentando um pouco com o novo elemento canvas em HTML.

Eu simplesmente quero adicionar uma imagem à tela, mas não funciona por algum motivo.

Eu tenho o seguinte código:

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

A imagem existe e não recebo erros de JavaScript. A imagem simplesmente não é exibida.

Deve ser algo muito simples que senti falta ...

javascript html canvas

— PeeHaa
fonte

219

Talvez você deva esperar até que a imagem seja carregada antes de desenhá-la. Em vez disso, tente isto:

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

Ou seja, desenhe a imagem no retorno de chamada onload da imagem.

— Thomas
fonte

6

@swogger antes, obrigado, pergunte qualquer coisa, experimente. Funcionou perfeitamente. Certifique-se de verificar primeiro o tamanho da imagem da fonte, caso contrário, será cortado, a menos que você use a função completa context.drawImage(base_image, 0, 0, 200, 200);. Isso tiraria base_img da posição 0px, com área de desenho de 200x200px.

— m3nda

1

Este foi exatamente o meu caso. Eu estava carregando alguns dados de blob no canvas usando new Imagee me perguntando por que sempre estava me mostrando uma imagem anterior. Acontece que mesmo que eu esteja carregando uma imagem de uma variável, ainda tenho que esperar onloadque aconteça. Obrigado!

— aexl

Como adicionar estilo de imagem?

— Sagar Rawal de

6

aqui está o código de amostra para desenhar a imagem na tela

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

No código acima, selectedImage é um controle de entrada que pode ser usado para navegar pela imagem no sistema. Para obter mais detalhes sobre o código de amostra para desenhar a imagem na tela, mantendo a proporção:

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

— nvivekgoyal
fonte

1

No meu caso, me enganei com os parâmetros da função, que são:

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

Se você espera que eles sejam

context.drawImage(image, width, height);

você colocará a imagem fora da tela com os mesmos efeitos descritos na pergunta.

— Marc
fonte

0

Você tem que usar .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)
    }
}

Aqui está o porquê

Se você estiver carregando a imagem primeiro depois que a tela já tiver sido criada, a tela não poderá passar todos os dados da imagem para desenhar a imagem. Então você precisa primeiro carregar todos os dados que vieram com a imagem e então você pode usar drawImage ()

— Anthony Gedeon
fonte