如何在 js 中将图像 URI 组合成 gif？
Posted
技术标签:
【中文标题】如何在 js 中将图像 URI 组合成 gif？【英文标题】：How do I combine Image URIs into a gif in js? 【发布时间】：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" ></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 方面不是最擅长的，我了解其中的一部分，但还有很多我不知道。
【问题讨论】：
【参考方案1】：我找到了 CCapture.js，但没有用，所以我在 git hub 上找到了 jsgif，如果其他人有同样的问题，链接是 https://github.com/antimatter15/jsgif。
【讨论】：
以上是关于如何在 js 中将图像 URI 组合成 gif？的主要内容，如果未能解决你的问题，请参考以下文章
如何在xamarin android中将位图图像转换为gif？