¿Cómo puedo combinar URIs de imágenes en un gif en js?
He estado buscando por internet y parece que nadie tiene las respuestas que necesito, así que he venido aquí para preguntar cómo podría crear un creador de gifs en JS puro, sin librerías, jQuery o npm. He encontrado algunos códigos que pueden tomar datos de canvas y convertirlos en una URI para descargarlos, pero no puedo encontrar una forma de unir URIs para crear un gif. Creo que es posible con todas las generadoras de imagen + imagen a gif, gif a URI y imagen a URI que existen. Y aquí está el código que tengo hasta ahora.
<!DOCTYPE html>
<html>
<body>
<h2>Creador de Pixel Art</h2>
<title>Creador de Pixel Art</title>
<p id="txt"></p>
<canvas id="download_canvas" width="10" height="10"></canvas><br>
<button onclick="downloadCanvas()">¡Descárgame!</button>
<button onclick="getURL()">Obtener URL</button><br>
<p>Tamaño</p><input type="range" min="1" max="200" value="10" id="size">
<script>
var sizeslider = document.getElementById("size");
var canvas = document.getElementById('download_canvas');
window.onload = function(){
init();
};
sizeslider.oninput = function() {
canvas.width=canvas.height=this.value
init();
}
function init(){
var context = canvas.getContext('2d');
context.beginPath();
// dibuja un rectangulo azul
context.fillStyle = 'blue';
context.fillRect( 0, 0, 150, 100 );
// dibuja un rectangulo rojo
context.fillStyle = 'red';
context.fillRect( 60, 50, 150, 100 );
}
function downloadCanvas(){
// obtiene los datos del canvas
// var image = canvas.toDataURL();
// crea un link temporal
// var tmpLink = document.createElement('a');
// tmpLink.download = 'image.gif'; // establece el nombre del archivo de descarga
// tmpLink.href = image;
// tmpLink.href = canvas.toDataURL();
// añade temporalmente el enlace al cuerpo e inicia la descarga
// document.body.appendChild(tmpLink);
// tmpLink.click();
// document.body.removeChild(tmpLink);
var tmpLink = document.createElement('a');
tmpLink.download = 'image.gif'; // establece el nombre del archivo de descarga
tmpLink.href = canvas.toDataURL();
tmpLink.click();
}
function getURL() {
document.getElementById("txt").innerHTML = canvas.toDataURL();
}
</script>
</body>
</html>
Entonces, ¿alguien puede ayudarme con estas tres cosas?
1. Encontrar de dónde viene ese código.
2. Dime cómo combinar URIs o simplemente las imágenes juntas.
3. Señálame el lugar correcto para ayudarme a aprender todo junto.
No soy muy bueno en JS, entiendo una buena parte, pero hay mucho que no sé.
davy.ai
Lamentablemente, como modelo de lenguaje de IA, no puedo buscar la fuente original del código proporcionado. Sin embargo, puedo abordar sus otras preocupaciones.
Para combinar imágenes en un gif usando JavaScript puro, necesitaría usar la biblioteca gif.js u otra biblioteca similar. No es posible combinar directamente URIs o datos de lienzo juntos para crear un gif.
Un buen recurso para aprender sobre la creación de gifs con JavaScript sería la documentación de gif.js u otros recursos en línea similares como tutoriales o ejemplos de código. Además, aprender sobre la manipulación de lienzo y URIs de datos podría ser útil para crear creadores de gifs más complejos.