So I've been searching around the internet and nobody seems to have the answers I need so I have come here to ask how would I go about making a gif creator in pure js, no libraries or jquery or npm. I've found some code that can take canvas data and turn it into a URI and download it but I can't seem to find a way to piece URIs together to make a gif. I think it's possible with all the image + image to gif, gif to URI, and image to URI generators out there. And here is the code I've got so far.
<!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>
So can anyone help me with these three things?
I'm not the best at js, I understand a decent portion of it but there is a lot I don't know.
I found CCapture.js but that didn't work so I found jsgif on git hub if anyone else has the same problem, the link is https://github.com/antimatter15/jsgif.