gifshot.js：demo(多张图片合成GIF图片；VIDEO生成的GIF)

共22个文件

png：9个

jpg：9个

js：2个

需积分: 44 150 浏览量 2022-07-11 11:19:09 上传评论 1 收藏 3.18MB ZIP 举报

**正文** `gifshot.js` 是一个非常实用的JavaScript库，专为开发人员设计，用于从各种媒体资源，包括媒体流、视频或静态图像，创建动态的GIF动画。这个库的强大之处在于它允许用户轻松地将多张图片或者视频帧合并成一个连续播放的GIF图像，从而在网页上实现丰富的互动体验。在JavaScript环境中，`gifshot.js` 提供了一套完整的API，可以方便地集成到任何Web项目中。这个库不仅支持从单个图像文件生成GIF，还能够处理视频数据，将其转换为GIF格式，这在社交媒体分享、在线教育、游戏截图等领域有着广泛的应用。 **多张图片合成GIF图片** 在`gifshot.js`中，你可以指定一个包含多张图片的数组，并通过API将这些图片合成为GIF。这个过程涉及到的主要步骤有： 1. **图片加载**：你需要获取到每张图片的URL或者Blob对象，并确保它们已经加载完成。 2. **配置参数**：你可以设置一系列参数，如帧速率（frames per second, fps）、GIF的宽度和高度等。 3. **调用`createGIF`方法**：使用`gifshot.createGIF`函数，传入图片数组和配置参数，库会自动处理图片顺序和合成工作。 4. **处理结果**：`createGIF`方法会返回一个Promise，成功后会提供一个包含GIF数据的Blob对象，你可以将其保存到服务器或者直接在页面上展示。 **VIDEO生成的GIF** 对于视频生成的GIF，`gifshot.js`同样提供了便捷的解决方案。以下是基本步骤： 1. **视频准备**：获取到`<video>`元素的引用，确保视频已加载并可以播放。 2. **设置截取范围**：你可以选择截取视频的特定部分，比如通过设置开始时间和结束时间。 3. **调用`createGIFFromVideo`方法**：利用`gifshot.createGIFFromVideo`，传入`<video>`元素和配置选项，库会自动抓取指定范围内的帧并合成GIF。 4. **处理结果**：同上，处理返回的Promise，获取并处理GIF数据。在`gifshot.js合成GIF.html`示例中，我们可以看到如何在实际项目中应用这些功能。`gifshot.min.js`是库的压缩版本，适用于生产环境，以减少页面加载时间。 `gifshot.js`是一个强大的工具，它使得在浏览器端生成GIF动画变得更加简单和高效。无论是从图片集合还是视频流中提取帧，都能轻松实现动态GIF的创建，极大地扩展了Web应用的交互性和表现力。开发者可以根据项目需求，灵活调整参数，创建出满足各种需求的高质量GIF。

资源详情

资源评论

资源推荐

收起资源包目录

gifshot.js合成GIF.zip （22个子文件）

img

png

base.png 27KB

5.png 59KB

1.png 59KB

6.png 59KB

2.png 59KB

7.png 61KB

4.png 59KB

8.png 62KB

3.png 59KB

jpg

8.jpg 90KB

2.jpg 87KB

1.jpg 86KB

6.jpg 87KB

3.jpg 88KB

5.jpg 86KB

4.jpg 87KB

base.jpg 99KB

7.jpg 90KB

video.mp4 1.9MB

gifshot.js 86KB

gifshot.js合成GIF.html 20KB

gifshot.min.js 26KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>gifshot.js合成GIF</title> <style type="text/css"> body{ background-color: #ddd;} </style> </head> <body> <div class=""> <p>gifshot.js：可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。</p> <p><a href="https://github.com/yahoo/gifshot">https://github.com/yahoo/gifshot</a></p> <p>经测试：</p> <p>text配置项：<br>生成的GIF每一帧所覆盖的文本；</p> <p>images配置项（数组）：<br>首个设置的图片会一直显示；<br>如设置text，则优先级最高，当前（帧）图片覆盖文本替换text配置项全局文本；</p> <p>demo：多张图片合成GIF图片；VIDEO生成的GIF；</p> </div> <div style="text-align: center;display: flex; justify-content: center; align-items: flex-start;"> <div id="img1" style="width: 30%;"> <p>所有图片PNG生成的GIF <span></span></p> </div> <div id="img2" style="width: 30%;"> <p>所有图片JPG生成的GIF <span></span></p> </div> <div id="img3" style="width: 30%;"> <p>VIDEO生成的GIF <span></span></p> </div> </div>  <script src="gifshot.min.js"></script>  <script type="text/javascript"> gifshot.createGIF({ // 图片的宽度 'gifWidth' : 300, // 图片的高度 'gifHeight' : 300, // 如果使用此选项，则将使用这些图片创建 GIF // 注意：确保这些图像资源启用了 CORS 以防止任何跨域 JavaScript 错误 // 注意：您还可以传递页面上现有图像元素的 NodeList 'images' : [ { src:'img/png/base.png',text:'我是第 1 张图片（所有图片PNG）'}, { src:'img/png/1.png',text:'第 2 张'}, { src:'img/png/2.png',text:'第 3 张'}, { src:'img/png/3.png',text:'第 4 张'}, { src:'img/png/4.png',text:'第 5 张'}, { src:'img/png/5.png',text:'第 6 张'}, { src:'img/png/6.png',text:'第 7 张'}, { src:'img/png/7.png',text:'第 8 张'}, { src:'img/png/8.png',text:'第 9 张'}, ], // 如果使用此选项，则将使用适当的视频创建 gif // 您想从中创建动画 GIF 的 HTML5 视频 // 注意：已检查浏览器对某些视频编解码器的支持，并选择了适当的视频 // 注意：您还可以传递页面上现有视频元素的 NodeList // 例如 'video': ['example.mp4', 'example.ogv'], 'video' : null, // 你可以传递一个现有的 video 元素用于网络摄像头 GIF 创建过程， // 和这个视频元素不会被隐藏（与 keepCameraOn 选项一起使用时很有用） // 专业提示：将视频元素的高度和宽度设置为与您未来的 GIF 相同的值 // 另一个专业提示：如果您使用此选项，视频不会被暂停，对象 url 不会被撤销，并且 // 视频不会从 DOM 中删除。您需要自己处理。 'webcamVideoElement' : null, // 您是否希望在创建 GIF 后用户的相机保持开启 // 注意：cameraStream Media 对象在 createGIF() 回调函数中传回给您 'keepCameraOn' : false, // 需要一个 cameraStream 媒体对象 // 注意：如果您不使用 SSL // 传递现有的相机流将允许您创建另一个 GIF 和/或快照，而无需请求用户再次访问相机的权限 'cameraStream':null, // 将应用于图像的 CSS 过滤器（例如 blur(5px)） 'filter' : '', // 每帧捕获之间等待的时间（以秒为单位） 'interval' : 0.1, //开始捕获 GIF 的时间（以秒为单位）（仅适用于 HTML5 视频） 'offset' : null, // 用于创建动画 GIF 的帧数 // 注意：每帧每 100 毫秒捕获一次现有图像的视频和每毫秒 'numFrames' : 10, //视频中捕获的生成GIF的帧数 // 每帧停留的时间 (10 = 1s) 'frameDuration' : 1, // 覆盖动画 GIF的文本 'text' : '生成的GIF每一帧所覆盖的文本', // 覆盖动画 GIF 的文本的字体粗细 'fontWeight' : 'normal', // 覆盖动画 GIF 的文本的字体大小 'fontSize' : '16px', // 覆盖动画 GIF 的文本的最小字体大小 // 注意：该选项仅在正在应用的文本被截断时应用 'minFontSize' : '10px', // 是否动画 GIF 文本是否会调整大小以适应 GIF 容器 'resizeFont' : false, // 覆盖动画 GIF 的文本的字体系列 'fontFamily' : 'sans-serif', // 覆盖动画 GIF 的文本的字体颜色 // 'fontColor' : '#dd0000', 'fontColor' : 'green', // 水平文本覆盖动画 GIF的文本对齐方式 'textAlign' : 'center', // 覆盖动画 GIF 的文本的垂直文本对齐方式 'textBaseline' : 'bottom', // 文本的 X（水平）坐标涵盖动画 GIF（仅在默认 textAlign 和 textBaseline 选项不适合您时使用） 'textXCoordinate':null, // 覆盖动画 GIF 的文本的 Y（垂直）坐标（仅在默认的 textAlign 和 textBaseline 选项不适合您时使用） 'textYCoordinate' : null, // 提供当前进度的回调函数当前图像的 'progressCallback' : function (captureProgress){ // console.log(captureProgress); document.getElementById('img1').getElementsByTagName('span')[0].innerHTML = parseInt(captureProgress * 100) + '%'; }, // 当前图像完成时调用的回调函数 'completeCallback' : function (){ console.log('当前图像完成时调用的回调函数') }, // 创建调色板时要跳过多少像素。默认值为 10。越少越好，但更慢。 // 注意：通过调整采样间隔，既可以慢慢产生极高质量的图像，也可以在合理的时间内产生好的图像。 // sampleInterval 为 1，整个图像用于学习阶段，而间隔为 10， // 1/10 像素的伪随机子集用于学习阶段。10 的采样因子给出了 // 显着的加速，但质量损失很小。 'sampleInterval' : 10, // 使用多少网络工作者来处理动画 GIF 帧。默认为 2。 'numWorkers' : 2, // 您是否希望从创建的 GIF 中保存所有画布图像二进制数据 // 注意：当您想重新使用 GIF 将文本添加到以后的 'saveRenderingContexts':false, // 需要一个画布图像数据数组 // 注意：如果您将 saveRenderingContexts 选项设置为 true,然后在 createGIF 回调函数'savedRenderingContexts'中获得 "savedRenderingContexts": [], // 当请求使用现有图像或视频时，我们在请求上设置 CORS 属性。 // 选项是 'Anonymous'、'use-credentials' 或虚假值（如 ''）以不设置 CORS 属性。 'showFrameText':true, // 如果图像数组提供了特定于框架的文本，则可以通过将此选项设置为“false”来强制不显示特定于框架的文本。 'crossOrigin' : 'Anonymous', // 水印图像如果这里给出了图像，它将被标记在 GIF 帧的顶部 "waterMark" : null, // 水印图像的高度 "waterMarkHeight" : null, // 水印图像的宽度 "waterMarkWidth" : null, // 水印图像的 X（水平）坐标 "waterMarkXCoordinate" : 1, //水印图像的Y（垂直）坐标 "waterMarkYCoordinate" : 1 },function(obj) { if(!obj.error) { var image = obj.image, animatedImage = document.createElement('img'); animatedImage.src = image; // document.body.appendChild(animatedImage); document.getElementById('img1').appendChild(animatedImage); } }); </script>  <script type="text/javascript"> gifshot.createGIF({ // 图片的宽度 'gifWidth' : 300, // 图片的高度 'gifHeight' : 300, // 如果使用此选项，则将使用这些图片创建 GIF // 注意：确保这些图像资源启用了