Cómo agregar imágenes al lienzo

Estoy experimentando un poco con el nuevo elemento canvas en HTML.Cómo agregar imágenes al lienzo

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

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 aparece ningún error de JavaScript. La imagen simplemente no se muestra.

Debe ser algo muy simple que he perdido ...

Fuente

2011-05-15 PeeHaa

149

tal vez debería tener que esperar hasta que la imagen se carga antes de que lo dibuja. Pruebe 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); 
    } 
}

I.e. dibujar la imagen en la devolución de llamada de la imagen.

Fuente

2011-05-15 21:32:19 Thomas

¿Funcionará eso con imágenes obtenidas a través de URL? – swogger

@swogger en lugar de agradecer preguntar cualquier cosa, probar. Eso funcionó perfectamente. Asegúrese de verificar primero el tamaño de img 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. – erm3nda

Este fue exactamente mi caso. Estaba cargando algunos datos de blobs en el lienzo usando 'nueva imagen' y preguntándome por qué siempre me estaba mostrando una imagen anterior. Resulta que incluso si estoy cargando una imagen de una variable, todavía tengo que esperar a que ocurra el 'onload'. ¡Gracias! –

Consulte este .. esperan que ayude a u ..

var erase_image = new Image(); 
erase_image.src = '../images/erazer.gif';   
erase_image.onload = function() 
{ 
    context.drawImage(erase_image, 78, 19); 
}

Fuente

2014-03-15 07:10:38

¿En qué se diferencia esto de la respuesta ya aceptada? –

Espero que haya sido cortado y pegado de la misma fuente @TheSexiestManinJamaica – JasTonAChair

-1

aquí es el código de ejemplo para dibujar la imagen en Canvas-

$("#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 SelectedImage código anterior es un control de entrada, que se puede utilizar para navegar por la imagen en el sistema. Para más detalles de código de ejemplo para dibujar la imagen sobre lienzo mientras se mantiene la relación de aspecto:

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

Fuente

2016-11-03 08:48:41 nvivekgoyal

En mi caso, me había equivocado los parámetros de la función, que son:

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

Si esperar que sean

context.drawImage(image, width, height);

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

Fuente

2017-11-07 10:08:27 Marc

Respuesta

Cuestiones relacionadas