前端播放AE动画库 bodymovin.js的一些使用方法

标签：canvas AE img base64 Canvas js file var bodymovin

加载动画

var animData = {
   wrapper: $("#ae_privewdiv")[0],
   animType: 'svg',
   loop: true,
   prerender: true,
   autoplay: true,
   path: src,
};
let anim = bodymovin.loadAnimation(animData);

 

一、获取动画总帧数、帧率、时长

//true 为获取总帧数
anim.getDuration(true)

//获取帧率
anim.frameRate

//false 为获取时长
anim.getDuration(false)

二、将AE动画转换成图片（或者生成一张缩略图）

1、将AE动画转换成svg

let path = 'data:image/svg+xml,' + encodeURIComponent(anim.renderer.svgElement.outerHTML);

 

2、用canvas来绘制svg，然后转换为base64显示图片

　　　// 创建一个用于绘制图像的Canvas元素
　　var canvas = document.createElement('canvas');
　　var ctx = canvas.getContext('2d');

　　// 创建一个Image元素来加载SVG
　　var img = new Image();
　　img.onload = function() {
　　　　// 设置Canvas的大小
　　　　canvas.width = img.width;
　　　　canvas.height = img.height;
　　　　// 在Canvas上绘制SVG图像
　　　　ctx.drawImage(img, 0, 0);
　　　　// 将Canvas转换为图片
　　　　let dataURL = canvas.toDataURL('image/png');

　　　　var imageElement = document.createElement('img'); 　　　　imageElement.src = dataURL; 　　　　document.body.appendChild(imageElement) 　　}

　　img.src = path;

三、上传base64图片格式

1、用canvas获取base64

　// 创建一个用于绘制图像的Canvas元素
　　var canvas = document.createElement('canvas');
　　var ctx = canvas.getContext('2d');

　　// 创建一个Image元素来加载SVG
　　var img = new Image();
　　img.onload = function() {
　　　　// 设置Canvas的大小
　　　　canvas.width = img.width;
　　　　canvas.height = img.height;
　　　　// 在Canvas上绘制SVG图像
　　　　ctx.drawImage(img, 0, 0);
　　　　// 将Canvas转换为图片
　　　　let dataURL = canvas.toDataURL('image/png');
　　　　//base64转file对象
　　　　dataURLtoFile(dataURL, '图片')
　　}
　　img.src = path;

 

2、转换为file格式进行上传

//base64转file
function dataURLtoFile(dataURL, fileName) {
　　// 将base64的数据部分提取出来
　　const parts = dataURL.split(';base64,');
　　const contentType = parts[0].split(':')[1];
　　const raw = window.atob(parts[1]);
　　const rawLength = raw.length;
　　const uInt8Array = new Uint8Array(rawLength);
　　for (let i = 0; i < rawLength; ++i) {
　　uInt8Array[i] = raw.charCodeAt(i);
　　}

　　// 创建Blob对象
　　const blob = new Blob([uInt8Array], { type: contentType });
　　// 创建File对象
　　const file = new File([blob], fileName, { type: contentType });
　　return file;
}

 3、上传file文件

　　// 创建FormData对象
      var formData = new FormData();
      // 将file对象添加到FormData中
      formData.append("file", file);
      
      $.ajax({
            url: url,
            type: 'post',
            data: formData,
            contentType : false, //文件上传时为false
            processData : false,  //文件上传时为false
　　　　　　　　success: function (res) { } 
　　　　})

 

标签：canvas,AE,img,base64,Canvas,js,file,var,bodymovin
From： https://www.cnblogs.com/wangguihui/p/18617623