Imágenes en canvas
Una de las características del elemento <canvas> es la posibilidad de usar imágenes. Estas pueden utilizarse para distintos fines. Puedes usar imágenes externas en cualquier formato compatible con el navegador (por ejemplo, PNG, GIF o JPEG). Como fuente, también puedes usar la imagen creada por otros elementos canvas.
Importar imágenes en un canvas es un proceso de dos pasos:
- Obtener una referencia a otro elemento canvas o a un objeto HTMLImageElement como fuente.
- Dibujar una imagen en el canvas con la función drawImage().
Como fuente de imagen, la API de canvas puede usar cualquiera de los siguientes tipos de datos:
| Data Type | Description |
|---|---|
| HTMLImageElement | Estas son imágenes creadas con el constructor Image(), o cualquier elemento <img>. |
| SVGImageElement | Estas son imágenes incrustadas con el elemento <image>. |
| HTMLVideoElement | Un elemento HTML <video> como fuente de imagen toma el fotograma actual del video y lo usa como imagen. |
| HTMLCanvasElement | Como fuente de imagen, puedes usar otro elemento <canvas>. |
A estas fuentes, en conjunto, se les denomina CanvasImageSource.
Hay muchas formas de obtener imágenes para usarlas en canvas.
Uso de imágenes de la misma página
Puedes obtener una referencia a imágenes de la misma página con el canvas usando una de las siguientes opciones:
- La colección document.images
- El método document.getElementsByTagName()
- El método document.getElementById() si conoces el ID de la imagen que quieres usar
Uso de imágenes de otros dominios
Usando el elemento <img> con el atributo crossorigin="anonymous", puedes solicitar permiso para cargar una imagen desde otro dominio. Si el dominio que la aloja permite el acceso entre dominios mediante encabezados CORS, puedes usar la imagen en tu canvas sin contaminarlo.
Nota Si dibujas una imagen de origen cruzado sin una configuración CORS adecuada, el canvas se vuelve "tainted". Un canvas contaminado restringe el acceso a sus datos (por ejemplo,
toDataURL()lanzará un error).
Uso de otros elementos canvas
Se puede acceder a otros elementos canvas usando el método document.getElementById() o document.getElementsByTagName().
Incrustar una imagen mediante una URL data:
Las URL de datos permiten especificar una imagen como una cadena de caracteres codificada en Base64 directamente en el código. La ventaja de la URL de datos es que la imagen resultante está disponible de inmediato. También es posible agrupar todo tu CSS, HTML, JavaScript e imágenes en un solo archivo.
Sin embargo, también hay una desventaja: la imagen no se almacena en caché, y la URL codificada puede ser demasiado larga para imágenes grandes.
Crear una imagen desde cero
También puedes crear un nuevo objeto HTMLImageElement en tu script. Para ello, usa el constructor Image():
Crear una imagen desde cero
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'myImage.png';La imagen comienza a cargarse cuando se establece src. Para asegurarte de que drawImage() se llame solo después de que la imagen esté lista, usa el controlador de eventos onload.
La función drawImage()
Una vez que hay disponible una referencia al objeto fuente de la imagen, puedes usar el método drawImage(). Este método tiene las siguientes variantes:
- drawImage(image, x, y),
- drawImage(image, x, y, width, height),
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight).
La forma básica es drawImage(image, x, y).
En el siguiente ejemplo, usamos el método document.getElementById() para obtener una referencia a la imagen y luego usamos la función drawImage() para dibujar la imagen.
Ejemplo de dibujo de una imagen con la función drawImage():
Ejemplo de dibujo de una imagen con la función drawImage()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Image</h2>
<img id="photo" src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" />
<h2>Image with canvas:</h2>
<canvas id="exampleCanvas" width="240" height="225" style="border:2px solid #cccccc;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("photo");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>DANGER
Las imágenes SVG deben definir el ancho y el alto en el elemento raíz <svg>.
Uso de fotogramas de un video
También es posible usar fotogramas de un video presentado por un elemento <video>, incluso cuando el video no es visible. Por ejemplo, si tienes un elemento <video> con el ID "videoCanvas", haz lo siguiente:
Ejemplo de dibujar un video con canvas:
Canvas Images
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var animId;
function drawFrame() {
ctx.drawImage(v, 5, 5, 300, 180);
animId = requestAnimationFrame(drawFrame);
}
v.addEventListener("play", function() {
animId = requestAnimationFrame(drawFrame);
}, false);
v.addEventListener("pause", function() {
cancelAnimationFrame(animId);
}, false);
v.addEventListener("ended", function() {
cancelAnimationFrame(animId);
}, false);
</script>
</body>
</html>Práctica
What are the essential steps for drawing an image onto the Canvas in HTML?