Tải và khởi tạo hoạt ảnh

const animationConfig = {
   container: document.getElementById('animation_container'),
   renderer: 'svg',
   loop: true,
   autoplay: true,
   path: 'path/to/animation.json'
};

const myAnimation = lottie.loadAnimation(animationConfig);

1. Lấy thông tin về khung hình và thời lượng hoạt ảnh

// Trả về tổng số khung hình
myAnimation.totalFrames

// Lấy tốc độ khung hình
myAnimation.frameRate

// Trả về thời lượng tính bằng giây
myAnimation.duration

2. Chuyển đổi hoạt ảnh AE thành hình ảnh (hoặc tạo hình thu nhỏ)

a) Chuyển hoạt ảnh thành định dạng SVG

const svgString = 'data:image/svg+xml,' + encodeURIComponent(myAnimation.renderer.elements[0].wrapper.outerHTML);

b) Sử dụng canvas để vẽ SVG và chuyển đổi sang base64

// Tạo canvas để vẽ hình ảnh
const drawingCanvas = document.createElement('canvas');
const context = drawingCanvas.getContext('2d');

// Tạo đối tượng hình ảnh để tải SVG
const svgImage = new Image();

svgImage.onload = function() {
    // Thiết lập kích thước canvas
    drawingCanvas.width = svgImage.width;
    drawingCanvas.height = svgImage.height;
    
    // Vẽ hình ảnh SVG lên canvas
    context.drawImage(svgImage, 0, 0);
    
    // Chuyển canvas thành chuỗi dữ liệu hình ảnh
    const imageData = drawingCanvas.toDataURL('image/png');
    
    // Hiển thị hình ảnh
    const imgElement = document.createElement('img');
    imgElement.src = imageData;
    document.body.appendChild(imgElement);
};

svgImage.src = svgString;

3. Upload hình ảnh ở định dạng base64

a) Lấy base64 từ canvas

// Tạo canvas để vẽ hình ảnh
const renderCanvas = document.createElement('canvas');
const renderContext = renderCanvas.getContext('2d');

// Tạo đối tượng hình ảnh để tải SVG
const sourceImage = new Image();

sourceImage.onload = function() {
    // Thiết lập kích thước canvas
    renderCanvas.width = sourceImage.width;
    renderCanvas.height = sourceImage.height;
    
    // Vẽ hình ảnh SVG lên canvas
    renderContext.drawImage(sourceImage, 0, 0);
    
    // Chuyển canvas thành chuỗi dữ liệu hình ảnh
    const imageBase64 = renderCanvas.toDataURL('image/png');
    
    // Chuyển base64 sang đối tượng file
    const fileObject = convertBase64ToFile(imageBase64, 'thumbnail.png');
};

sourceImage.src = svgString;

b) Chuyển đổi sang định dạng File để upload

// Hàm chuyển đổi base64 sang File
function convertBase64ToFile(base64String, filename) {
    // Tách phần dữ liệu base64
    const dataParts = base64String.split(';base64,');
    const mimeType = dataParts[0].split(':')[1];
    const binaryString = atob(dataParts[1]);
    const byteNumbers = new Array(binaryString.length);
    
    for (let i = 0; i < binaryString.length; i++) {
        byteNumbers[i] = binaryString.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    const blobObject = new Blob([byteArray], { type: mimeType });
    const fileObject = new File([blobObject], filename, { type: mimeType });
    
    return fileObject;
}

c) Upload file

// Tạo đối tượng FormData
const uploadData = new FormData();
uploadData.append("uploadFile", fileObject);

fetch(uploadUrl, {
    method: 'POST',
    body: uploadData
})
.then(response => response.json())
.then(result => {
    console.log('Upload thành công:', result);
});