多张图片转化成视频

[gqkmiss]

有多张图片，通过js或者node后台，可以使多张图片转化为视频播放。
类似于淘宝商品的主图视频。

[程老师2088]

这个要后端支持了。用ffmpeg可以做

[前端_小菜鸟]

那叫做轮播图，多张图片循环播放，网上插件很多，自己实现就是相对定位，然后定时器，在多少秒后对当前的div左移或者右移，就可以实现

[gqkmiss]

要做的是视频，多张图片转化成视频。（类似于淘宝商品，多张主图轮播，第一张是视频，要的是这个视频，可以把多张图生成视频） 轮播图的话，那太简单了。

[gqkmiss]

是需要后端支持的，但是得前端能展示，前端实现对应的效果

[阿狸贝贝]

做成视频还是蛮简单的，把图片发几张过来，我帮你实现下。

[Rimifon]

用 canvas 绘制动画，并使用 canvas 的 captureStream 转换成视频流，可以使用 video 标签播放。

[gqkmiss]

能生成.mp4文件吗？ 多张图片绘制动画可以不？比如我两张图片通过放大缩小绘制一个10秒的动画。

[Rimifon]

captureStream出来的是直播流，浏览器好像没有提供保存的方法，需要保存的话只能推服务器录制。

[yinxu]

引用 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); };

[越过山丘枯木逢春]

最后楼主使用的什么方案呢