前端canvas动画如何转成mp4视频的方法

const { createCanvas, loadImage } = require("canvas"); const pages = { imageZoomOut: require('./image_zoom_inout.js'), //缩放 imageArt: require('./image_art.js'), //擦除 imageGrid: require('./image_grid.js'), //网格 imageRotate: require('./image_rotate.js'), //开合 imageFlash: require('./image_flash.js'), //图文快闪 imageVerticalArt: require('./image_vertical_art.js'), //竖版擦除 imageVerticalGrid: require('./image_vertical_grid.js'), //竖版网格 imageVerticalRotate: require('./image_vertical_rotate.js'), //竖版开合 imageVerticalFlash: require('./image_vertical_flash.js'), //竖版图文快闪 imageVerticalZoomOut: require('./image_vertical_zoom_inout.js'), //竖版缩放 imageVertical: require('./image_vertical.js'), //竖版通用 }; const fs = require("fs"); const querystring = require('querystring'); let args = process.argv && process.argv[2] let parse = querystring.parse(args) let vh = parse.templateType == 1 ? 720 : 1280 //canvas 高 let vw = parse.templateType == 1 ? 1280 : 720 //canvas 宽 let imgSrcArray = parse.images //图片数组 let effectTag = parse.tid //动画效果 let saveImgPath = process.argv && process.argv[3] let loadArr = [] imgSrcArray.forEach(element => { if (/.(jpg|jpeg|png|JPG|PNG)$/.test(element)) { loadArr.push(loadImage(element)) } else { loadArr.push(element) } }); const canvas = createCanvas(vw, vh); const ctx = canvas.getContext("2d"); Promise.all(loadArr) .then((images) => { //初始化动画 console.log('开始动画') let oldDate = new Date().getTime() pages[effectTag].render(null, { canvas: canvas, images: images }, function() { clearInterval(interval) let now = new Date().getTime() console.log(now - oldDate, '动画结束') }) const interval = setInterval( (function() { let x = 0; return () => { x += 1; ctx.canvas.toDataURL('image/jpeg', function(err, png) { if (err) { console.log(err); return; } let data = png.replace(/^data:image/w+;base64,/, ''); let buf = new Buffer(data, 'base64'); fs.writeFile(`${saveImgPath}${x}.jpg`, buf, {}, (err) => { console.log(x, err); return; }); }); }; })(), 1000 / 60 ); }) .catch(e => { console.log(e); });

在iterm下执行下面命令

node testCanvas.js 'tid=imageArt&templateType=1&images=../assets/imgs/8.png&images=../assets/imgs/6.png&images=../assets/imgs/7.png&images=../assets/imgs/6.png&images=../assets/imgs/8.png&images=../assets/imgs/7.png&images=../assets/imgs/4.png&images=../assets/imgs/6.png&images=../assets/imgs/8.png&images=../assets/imgs/7.png' './images/'

参数说明：
1）tid 是动画名称
2）templateType是尺寸："1":1280*720；"2":720*1280
3) images是图片地址
4）变量'./images/'是截图保存的地址，

NODE环境下运行的弊端

参数图片地址只能是相对地址

动画过于复杂时，运行时间长，如下：当页面的图形数量达到一定时，动画每一帧就要大量调用canvas的API，要进行大量的计算，再加上图片体积很大，就会慢

每隔13秒循环一次下面的画图：   

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!