프로젝트에서
gif.js를 이용해 GIF파일을 만들어야 하는 상황이 있었다.
하지만 시작 프레임이 검은화면으로 채워져버리는 이슈가 있었고,
나와같은 이슈를 겪는 사람이 없나 해서 깃헙 이슈를 찾아보다가
해결한 방법을 공유하고자 한다. (한국에서는 gif.js를 쓰는사람이 많이없나보다)
원인은 이미지가 로드되기전에 GIF를 만들어버려서 생기는 이슈였고,
콜백함수를 이용해 비동기 처리를 해주었다.
아래코드는 해결한 코드이며,
이미지들을 Array에 다 담고 그 해당 Array를 Gif로 만들어
result-image라는 id의 img태그에 gif를 지정하는 방식이다.
import GIF from "gif.js.optimized";
import workerStr from "./gifWorker";
export default async function makeGif(imgArray) {
const workerBlob = new Blob([workerStr], {
type: "application/javascript",
});
const gif = new GIF({
workers: 2,
workerScript: URL.createObjectURL(workerBlob),
quality: 10,
});
async function waitForImagesLoaded(imageURLs, callback) {
var imageElements = [];
var remaining = imageURLs.length;
var onEachImageLoad = function () {
if (--remaining === 0 && callback) {
callback(imageElements);
}
};
for await (const elem of imageURLs) {
var img = new Image();
img.onload = onEachImageLoad;
img.src = elem;
imageElements.push(img);
}
}
waitForImagesLoaded(imgArray, async function (images) {
for await (const i of images) {
gif.addFrame(i, { delay: 250 });
}
gif.render();
});
await gif.on("finished", (blob) => {
const url = URL.createObjectURL(blob);
document.getElementById("result-image").src = url;
});
}Reference
