javascript - CSS生成GIF，为什么获取的都是同一帧？
我使用html2canvas库截取页面元素，为什么生成的图片全是最后一帧的？
以下代码可直接复制运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.index {
width: 300px;
height: 200px;
background-color: #eee;
}
.box {
width: 100px;
height: 50px;
background-color: #bbb;
}
.box2 {
width: 300px;
height: 200px;
background-color: #ccc;
}
.animate {
transform: translateX(200px);
transition: all 3s ease;
}
</style>
<body>
<div class="index">
<button class="btn">do</button>
<button class="btn2">transform</button>
<div class="box"></div>
</div>
<div class="box2"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gifshot/build/gifshot.min.js"></script>
<script>
const btn = document.querySelector('.btn')
const btn2 = document.querySelector('.btn2')
const ele = document.querySelector('.index')
const box = document.querySelector('.box')
const box2 = document.querySelector('.box2')
let frameArr = []
btn.addEventListener('click', () => {
box.classList.add('animate')
const dur = 3000 // 动画持续时间
frameArr = [] // 存储每一帧
const now = Date.now()
const captureFrame = async () => {
const canvas = await html2canvas(ele, {
useCORS: true, // 【重要】开启跨域配置
scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
allowTaint: true, // 允许跨域图片
})
const url = canvas.toDataURL("image/png", 1.0)
console.log('url', url)
frameArr.push(url)
if (Date.now() - now < dur) {
requestAnimationFrame(captureFrame)
} else {
console.log('frameArr---22', frameArr)
// 获取完所有截图后，可以进行下一步操作
}
}
captureFrame()
})
btn2.addEventListener('click', () => {
console.log('btn2 click', frameArr)
gifshot.createGIF({
images: frameArr,
gifWidth: 300,
gifHeight: 200,
interval: 0.15,
numWorkers: 2,
progressCallback: function (progress) {
// 显示 GIF 转换进度
console.log('GIF 转换进度：' + progress * 100 + '%');
},
completeCallback: function (gifUrl) {
// 在页面上显示 GIF 图像
console.log('GIF 转换完成：' + gifUrl);
}
}, (obj) => {
console.log('obj', obj);
if (!obj.error) {
const animatedImage = document.createElement('img');
animatedImage.src = obj.image
box2.appendChild(animatedImage);
}
});
})
</script>
</html>共有1个答案
因为 html2canvas，顾名思义，它是自己画的界面，不是直接从浏览器获取的画面截图，那么自然每次 GIF 都是第一帧。
要解决的话，可能必须在截图的时候手动替换成按时间换算出来的那一帧截图。
-
当使用JavaScript读取API从服务器请求时，您必须执行以下操作 这里，
-
我正试图根据OpenGL SuperBible第六版绘制一个纹理平面。但由于某些原因，我失败了。 这是我的纹理初始化代码。 这是平面对象。对象本身是绘制的，只是没有纹理。 这些是我的顶点和片段着色器。 我这样画 但我刚买了一架黑色的飞机。如果我通过在后面添加另一行来覆盖赋值，如下所示 它可以工作，也就是说，我得到了一个白色平面，所以着色器似乎工作正常。 我没有从中得到任何错误。 兼容性： 数组包含
-
主要内容：生成森林在学习 连通图的基础上，本节学习什么是 生成树，以及什么是 生成森林。 对连通图进行遍历，过程中所经过的边和顶点的组合可看做是一棵普通树，通常称为 生成树 。 图 1 连通图及其对应的生成树 如图 1 所示，图 1a) 是一张连通图，图 1b) 是其对应的 2 种生成树。 连通图中，由于任意两顶点之间可能含有多条通路，遍历连通图的方式有多种，往往一张连通图可能有多种不同的生成树与之对应。 连通图中
-
本文向大家介绍什么是python的生成器?相关面试题，主要包含被问及什么是python的生成器?时的应答技巧和注意事项，需要的朋友参考一下 参考回答： python生成器是一个返回可以迭代对象的函数,可以被用作控制循环的迭代行为。生成器类似于返回值为数组的一个函数,这个函数可以接受参数,可以被调用,一般的函数会返回包括所有数值的数组,生成器一次只能返回一个值,这样消耗的内存将会大大减小。
-
嗨，我试图从动画视图生成gif 简而言之，我在FrameLayout中有了ImageView和动画视图，现在我想生成主FrameLayout的gif，最低sdk级别19。getDrawingCache位图并将它们按顺序排列成gif可能会导致内存越界问题。 当我点击“开始录制”时，我想要特定视图的gif或视频。
-
我正在创建使用Facebook登录SDK的Android应用程序。 我想生成调试密钥哈希。在Facebook网站上我发现了这样的命令： keytool-exportcert-alias androiddebugkey-keystore c:\users\redio\.android\debug.keystore“c:\openssl\bin\openssl”sha1-binary“c:\opens