标签：const gif ImageDecoder newImg GIF blob file res 动图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ImageDecoder</title>
</head>
<body>
<h3 id="frame"></h3>
<input type="file" onchange="selectImg(event)" />
<img src="http://localhost:14909/ji.gif" alt="" id="img" />
<script>
const img = document.getElementById('img');
// fetch('http://localhost:14909/ji.gif').then(async (res) => {
// // console.log("res => ", await res.body)
// // getFPS(res.body);
// const newImg = document.createElement('img');
// newImg.src = 'http://localhost:14909/ji.gif';
// newImg.crossOrigin = 'cors';
// newImg.onload = () => {
// const canvas = document.createElement('canvas');
// const ctx = canvas.getContext('2d');
// canvas.width = newImg.width;
// canvas.height = newImg.height;
// ctx.drawImage(newImg, 0, 0, newImg.width, newImg.height);
// // canvas.toBlob((blob) => {
// // console.log("blob => ", blob)
// // getFPS(blob.stream());
// // }, 'image/gif', 1);
// // canvas.toBlob((blob) => {
// // console.log("blob => ", blob)
// // }, 'image/gif', 1)
// canvas.toBlob(
// (blob) => {
// const file = new File([blob], 'ji.gif', { type: 'image/gif' });
// console.log(file);
// const img = new Image()
// img.src = URL.createObjectURL(file)
// img.onload = () => {
// document.body.appendChild(img)
// }
// // getFPS(file.stream());
// // 将file对象传递给需要使用它的函数
// },
// 'image/gif',
// 1
// );
// };
// // getFPS(file.stream());
// });
function selectImg(e) {
/** @type {File} file */
const file = e.target.files[0];
const blob = new Blob([file]);
// const url = URL.createObjectURL(blob);
// fetch(url).then((res) => {
// getFPS(res.body);
// URL.revokeObjectURL(url);
// });
// getFPS(blob.stream());
getFPS(file.stream())
}
async function getFPS(data) {
let isSupport = await ImageDecoder.isTypeSupported("image/gif");
if (!isSupport) throw new SyntaxError('暂不支持')
const imageDecoder = new ImageDecoder({
// data: buf,
// data: res.body,
data,
type: 'image/gif',
});
console.log('imageDecoder => ', imageDecoder);
// 获取GIF的第一帧图形数据
// imageDecoder.decode({ frameIndex: 1 }).then((res) => {
// console.log('res => ', res);
// });
await imageDecoder.decode();
await imageDecoder.completed;
const frameCount = imageDecoder.tracks[0].frameCount;
await imageDecoder.close()
document.getElementById('frame').textContent = `总帧数【${frameCount}】`;
console.log('总帧数 => ', frameCount);
}
</script>
</body>
</html>
标签：const,
gif,
ImageDecoder,
newImg,
GIF,
blob,
file,
res,
动图
From： https://www.cnblogs.com/chlai/p/18129082