做網(wǎng)站運(yùn)營(yíng)的女生多嗎百度公司簡(jiǎn)介
前言
要將mp4視頻轉(zhuǎn)換為gif動(dòng)態(tài)圖像，可以使用JavaScript庫中的FFmpeg.js。這個(gè)庫可以使用JavaScript讀取和寫入文件，也可以使用canvas和WebGL在瀏覽器中進(jìn)行視頻處理。
步驟如下：
1.在網(wǎng)站中引入FFmpeg.js庫
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
2.創(chuàng)建FFmpeg.js實(shí)例
const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
3.將mp4視頻讀入FFmpeg.js中
await ffmpeg.FS('writeFile', 'test.mp4', await fetchFile('test.mp4'));
4.使用FFmpeg.js將mp4視頻轉(zhuǎn)換為gif動(dòng)態(tài)圖像
await ffmpeg.run('-i', 'test.mp4', 'test.gif');
5.將轉(zhuǎn)換后的gif圖像從FFmpeg.js中讀取出來，并在網(wǎng)頁中顯示
const gifData = await ffmpeg.FS('readFile', 'test.gif');
const gifUrl = URL.createObjectURL(new Blob([gifData.buffer], { type: 'image/gif' }));
const imgEl = document.createElement('img');
imgEl.src = gifUrl;
document.body.appendChild(imgEl);
完整的JavaScript代碼示例如下：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>轉(zhuǎn)換mp4視頻為gif動(dòng)態(tài)圖像</title><script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
</head>
<body><input type="file" onchange="onUpload(event)"><script>async function onUpload(event) {const inputFile = event.target.files[0];const inputFileData = await inputFile.arrayBuffer();const ffmpeg = createFFmpeg({ log: true });await ffmpeg.load();ffmpeg.FS('writeFile', inputFile.name, new Uint8Array(inputFileData));await ffmpeg.run('-i', inputFile.name, 'output.gif');const outputData = ffmpeg.FS('readFile', 'output.gif');const outputUrl = URL.createObjectURL(new Blob([outputData.buffer], { type: 'image/gif' }));const outputEl = document.createElement('img');outputEl.src = outputUrl;document.body.appendChild(outputEl);
}</script></body>
</html>