利用gifshot插件，前端生成GIF

最新推荐文章于 2024-09-28 19:02:04 发布

qq_50949240

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量115

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_50949240/article/details/142128726

版权

一、前端生成gif

利用gifshot插件

//imgsList：图片数组
export function createGif(imgsList, times = 0.5, gifWidth = 960, gifHeight = 720) {
    gifshot.createGIF(
        {
            gifWidth: gifWidth, // GIF宽度
            gifHeight: gifHeight, // GIF高度
            images: imgsList, // 需要的图片数组
            interval: times, // 每帧捕获之间等待的时间（以秒为单位）
            numFrames: imgsList.length, // 用于创建GIF的帧数
            frameDuration: 1, // 每帧停留的时间（10=1s）
            fontWeight: "normal", // 覆盖动画GIF的文本字体粗细
            fontSize: "16px", // 覆盖动画GIF的文本字体大小
            fontFamily: "sans-serif", // 字体类型
            fontColor: "#ffffff", // 字体颜色
            textAlign: "center", // 文本的水平对齐方式
            textBaseline: "bottom", // 文本的垂直对齐方式
            sampleInterval: 10, // 创建调色板时要跳过多少像素。默认值为10。“少”为佳，但较慢。
            numWorkers: 2, // 要使用多少个网络工作者来处理GIF动画帧。默认值为2。
            // text: "标题字体" // 添加标题文本
        },
        function (obj) {
            if (!obj.error) {
                var image = obj.image;
                //下载导出gif动图
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = image;
                a.download = 'GIF动图.gif'; // 设置下载文件的名称
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(image);
                document.body.removeChild(a);
            }
        }
    )
}

二、静态帧：利用canvas画布生成图片，将静态元素添加到切换帧上。

export async function handleGifImages(imgsList, targetUrl, style, gifWidth = 960, gifHeight = 720) {
    // 创建 canvas 并绘制dom元素
    function addLogoToFrame(frameDataUrl, callback) {
        const img = new Image();
        const logo = new Image();
        img.crossOrigin = 'anonymous';
        logo.crossOrigin = 'anonymous';
        img.src = frameDataUrl;
        logo.src = targetUrl;
        img.onload = () => {
            logo.onload = () => {
                // console.log("logo", logo)
                const canvas = document.createElement('canvas');
                canvas.width = gifWidth;
                canvas.height = gifHeight;
                const ctx = canvas.getContext('2d');
                // 清除画布背景
                ctx.clearRect(0, 0, gifWidth, gifHeight);
                ctx.fillStyle = '#ffffff';  // 设置文本颜色

                // 绘制背景图片
                ctx.drawImage(img, 0, 0, gifWidth, gifHeight);

                // 绘制 目标元素
                ctx.drawImage(logo, style.offsetX, style.offsetY, style.width, style.height); // 调整 logo 的位置和大小

                // 获取新的帧数据 URL
                callback(canvas.toDataURL('image/png'));
            };
        };
    }

    // 对每一帧添加 目标元素
    if (targetUrl) {
        let framesWithLogo = await Promise.all(imgsList.map(frame => {
            return new Promise((resolve) => {
                addLogoToFrame(frame, (newFrameDataUrl) => {
                    resolve(newFrameDataUrl);
                });
            });
        }))
        return framesWithLogo
    }
}