Cómo agregar una imagen al lienzo

106

Estoy experimentando un poco con el nuevo elemento canvas en HTML.

Simplemente quiero agregar una imagen al lienzo, pero no funciona por alguna razón.

Tengo el siguiente 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);
}

La imagen existe y no obtengo errores de JavaScript. La imagen simplemente no se muestra.

Debe ser algo realmente simple que me he perdido ...

javascript html canvas PeeHaa
fuente

Respuestas:

219

Tal vez debas esperar hasta que se cargue la imagen antes de dibujarla. Prueba esto en su lugar:

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

Es decir, dibuje la imagen en la devolución de llamada onload de la imagen.

Thomas
fuente
6
@swogger prefiero agradecer preguntar cualquier cosa, probar. Eso funcionó perfectamente. Asegúrese de verificar primero el tamaño de imagen de la fuente; de ​​lo contrario, se recortará a menos que use la función completa context.drawImage(base_image, 0, 0, 200, 200);. Eso dibujaría base_img desde la posición 0px, con un área de dibujo de 200x200px.
m3nda
1
Este fue exactamente mi caso. Estaba cargando algunos datos de blobs en el lienzo new Imagey me preguntaba por qué siempre me mostraba una imagen anterior. Resulta que incluso si estoy cargando una imagen desde una variable, todavía tengo que esperar a onloadque suceda. ¡Gracias!
aexl
¿Cómo agregar estilo de imagen?
Sagar Rawal
6

aquí está el código de muestra para dibujar una imagen en el lienzo

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

En el código anterior, selectedImage es un control de entrada que se puede usar para buscar imágenes en el sistema. Para obtener más detalles del código de muestra para dibujar una imagen en el lienzo manteniendo la relación de aspecto:

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

nvivekgoyal
fuente
1

En mi caso, me equivoqué con los parámetros de la función, que son:

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

Si esperas que sean

context.drawImage(image, width, height);

colocará la imagen fuera del lienzo con los mismos efectos que se describen en la pregunta.

Bagazo
fuente
0

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

Este es el por qué

Si está cargando la imagen primero después de que el lienzo ya se haya creado, el lienzo no podrá pasar todos los datos de la imagen para dibujar la imagen. Por lo tanto, primero debe cargar todos los datos que vinieron con la imagen y luego puede usar drawImage ()

Anthony Gedeon
fuente