Así que he estado buscando en Internet y nadie parece tener las respuestas que necesito, así que vine aquí para preguntar cómo haría para crear un creador de gifs en js puro, sin bibliotecas, jquery o npm. Encontré un código que puede tomar datos de lienzo y convertirlos en un URI y descargarlos, pero parece que no puedo encontrar una manera de juntar los URI para hacer un gif. Creo que es posible con todos los generadores de imagen + imagen a gif, gif a URI e imagen a URI que existen. Y aquí está el código que tengo hasta ahora.
<!DOCTYPE html> <html> <body> <h2>Pixel Art Creator</h2> <Title>Pixel Art Creator</Title> <p id="txt"></p> <canvas id="download_canvas" width="10" height="10"></canvas><br> <button onclick="downloadCanvas()">Download Me!</button> <button onclick="getURL()">Get URL</button><br> <p>Size</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(); // draw a blue rectangle context.fillStyle = 'blue'; context.fillRect( 0, 0, 150, 100 ); // draw a red rectangle context.fillStyle = 'red'; context.fillRect( 60, 50, 150, 100 ); } function downloadCanvas(){ // get canvas data // var image = canvas.toDataURL(); // create temporary link // var tmpLink = document.createElement( 'a' ); // tmpLink.download = 'image.gif'; // set the name of the download file // tmpLink.href = image; // tmpLink.href = canvas.toDataURL(); // temporarily add link to body and initiate the download // document.body.appendChild( tmpLink ); // tmpLink.click(); // document.body.removeChild( tmpLink ); var tmpLink = document.createElement( 'a' ); tmpLink.download = 'image.gif'; // set the name of the download file 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?
No soy el mejor en js, entiendo una parte decente, pero hay muchas cosas que no sé.
Encontré CCapture.js pero no funcionó, así que encontré jsgif en git hub si alguien más tiene el mismo problema, el enlace es https://github.com/antimatter15/jsgif .