多张图片转化成视频

gqkmiss 2020-08-24 04:29:09
有多张图片,通过js或者node后台,可以使多张图片转化为视频播放。
类似于淘宝商品的主图视频。
...全文
26650 点赞 收藏 9
写回复
9 条回复
yinxu 2020年09月22日
引用 7 楼 gqkmiss 的回复:
能生成.mp4文件吗? 多张图片绘制动画可以不?比如我两张图片通过放大缩小绘制一个10秒的动画。
建议: 1、用canvas来进行动画绘制控制,比如每张图片5秒,2.5秒放大,2.5秒缩小。可以使用requestAnimationFrame然后加上逝去的时间来控制。 2、用MediaRecorder进行录制,伪代码如下:
const mediaStream = canvas.captureStream();

            const options = {
                mimeType: 'video/webm;codecs=vp9',
                videoBitsPerSecond: 3000000,
            };
            const mediaRecord = new MediaRecorder(mediaStream, options);
3、挂接ondataavailable、stop事件:mediaRecord.ondataavailable = this.onDataAvailable;mediaRecord.onstop = this.onStop; 4、启动录制:mediaRecord.start(100); // 100毫秒触发一次ondataavailable事件 5、在ondataavailable事件中缓存视频数据:this.chunks.push(e.data); 6、录制结束后,将缓存的视频转成Blob: const videoBlob = new Blob(this.chunks, { type: 'video/webm' }); const videoUrl = window.URL.createObjectURL(videoBlob); this.download(owner.title, videoUrl); private download = (name: string, url: string) => { const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = `${ name }.webm`; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100); };
回复 点赞
Rimifon 2020年09月08日
captureStream出来的是直播流,浏览器好像没有提供保存的方法,需要保存的话只能推服务器录制。
回复 点赞
gqkmiss 2020年09月07日
能生成.mp4文件吗? 多张图片绘制动画可以不?比如我两张图片通过放大缩小绘制一个10秒的动画。
回复 点赞
Rimifon 2020年09月05日
用 canvas 绘制动画,并使用 canvas 的 captureStream 转换成视频流,可以使用 video 标签播放。
回复 点赞
阿狸贝贝 2020年09月03日
做成视频还是蛮简单的,把图片发几张过来,我帮你实现下。
回复 点赞
gqkmiss 2020年08月27日
是需要后端支持的,但是得前端能展示,前端实现对应的效果
回复 点赞
gqkmiss 2020年08月25日
要做的是视频,多张图片转化成视频。(类似于淘宝商品,多张主图轮播,第一张是视频,要的是这个视频,可以把多张图生成视频) 轮播图的话,那太简单了。
回复 点赞
前端_小菜鸟 2020年08月25日
那叫做轮播图,多张图片循环播放,网上插件很多,自己实现就是相对定位,然后定时器,在多少秒后对当前的div左移或者右移,就可以实现
回复 点赞
程老师2088 2020年08月25日
这个要后端支持了。用ffmpeg可以做
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告