如何在 js 中将图像 URI 组合成 gif？答案

【问题标题】：How do I combine Image URIs into a gif in js?如何在 js 中将图像 URI 组合成 gif？
【发布时间】：2022-01-06 20:07:45
【问题描述】：

所以我一直在互联网上搜索，似乎没有人知道我需要的答案，所以我来这里问我如何在纯 js 中制作 gif 创建器，没有库、jquery 或 npm。我找到了一些可以获取画布数据并将其转换为 URI 并下载它的代码，但我似乎找不到将 URI 组合在一起以制作 gif 的方法。我认为所有图像 + 图像到 gif、gif 到 URI 和图像到 URI 生成器都是可能的。这是我目前得到的代码。

<!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>

那么有人可以帮我解决这三件事吗？

查找该代码的原始来源
告诉我如何将 URI 或图像组合在一起
为我指明正确的地方，帮助我一起学习。

我在 js 方面不是最擅长的，我了解其中的一部分，但还有很多我不知道。

【问题讨论】：

标签： javascript canvas uri gif

【解决方案1】：

我找到了 CCapture.js，但没有用，所以我在 git hub 上找到了 jsgif，如果其他人有同样的问题，链接是 https://github.com/antimatter15/jsgif。

【讨论】：