gifshot.js合成GIF

最新推荐文章于 2024-05-02 12:51:04 发布
最新推荐文章于 2024-05-02 12:51:04 发布
阅读量921 收藏 1
点赞数 1
分类专栏： JS 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16494241/article/details/125717405
版权

gifshot.js：可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。

https://github.com/yahoo/gifshot

经测试：

text配置项：
生成的GIF每一帧所覆盖的文本；

images配置项（数组）：
首个设置的图片会一直显示；
如设置text，则优先级最高，当前（帧）图片覆盖文本替换text配置项全局文本；

demo：多张图片合成GIF图片；VIDEO生成的GIF；
demo资源下载

<!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.js"></script> -->
  <script src="gifshot.min.js"></script>
  
  
  <!-- 所有图片PNG生成的GIF -->
  <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>
  
  
  <!-- 所有图片JPG生成的GIF -->
  <script type="text/javascript">
    gifshot.createGIF({
      // 图片的宽度
      'gifWidth' : 300,
      // 图片的高度
      'gifHeight' : 300,
      // 如果使用此选项，则将使用这些图片创建 GIF 
      // 注意：确保这些图像资源启用了 CORS 以防止任何跨域 JavaScript 错误
      // 注意：您还可以传递页面上现有图像元素的 NodeList 
      'images' : [
        { src:'img/jpg/base.jpg',text:'我是第 1 张图片（所有图片JPG）'},
        { src:'img/jpg/1.jpg',text:'第 2 张'},
        { src:'img/jpg/2.jpg',text:'第 3 张'},
        { src:'img/jpg/3.jpg',text:'第 4 张'},
        { src:'img/jpg/4.jpg',text:'第 5 张'},
        { src:'img/jpg/5.jpg',text:'第 6 张'},
        { src:'img/jpg/6.jpg',text:'第 7 张'},
        { src:'img/jpg/7.jpg',text:'第 8 张'},
        { src:'img/jpg/8.jpg',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('img2').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('img2').appendChild(animatedImage);
      }
    });
  </script>
  
  
  <!-- VIDEO生成的GIF -->
  <script type="text/javascript">
    gifshot.createGIF({
      // 图片的宽度
      'gifWidth' : 300,
      // 图片的高度
      'gifHeight' : 300,
      // 如果使用此选项，则将使用这些图片创建 GIF 
      // 注意：确保这些图像资源启用了 CORS 以防止任何跨域 JavaScript 错误
      // 注意：您还可以传递页面上现有图像元素的 NodeList 
      // 'images' : ,
      // 如果使用此选项，则将使用适当的视频创建 gif
      // 您想从中创建动画 GIF 的 HTML5 视频
      // 注意：已检查浏览器对某些视频编解码器的支持，并选择了适当的视频
      // 注意：您还可以传递页面上现有视频元素的 NodeList 
      // 例如 'video': ['example.mp4', 'example.ogv'], 
      'video' : ['img/video.mp4'],
      // 你可以传递一个现有的 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' : 50, //视频中捕获的生成GIF的帧数
      // 每帧停留的时间 (10 = 1s) 
      'frameDuration' : 1,
      // 覆盖动画 GIF的文本
      'text' : '生成的GIF每一帧所覆盖的文本（VIDEO生成的GIF）',
      // 覆盖动画 GIF 的文本的字体粗细
      'fontWeight' : 'normal',
      // 覆盖动画 GIF 的文本的字体大小
      'fontSize' : '12px',
      // 覆盖动画 GIF 的文本的最小字体大小
      // 注意：该选项仅在正在应用的文本被截断时应用
      'minFontSize' : '10px',
      // 是否动画 GIF 文本是否会调整大小以适应 GIF 容器
      'resizeFont' : false,
      // 覆盖动画 GIF 的文本的字体系列
      'fontFamily' : 'sans-serif',
      // 覆盖动画 GIF 的文本的字体颜色
      // 'fontColor' : '#dd0000',
      'fontColor' : 'white',
      // 水平文本覆盖动画 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('img3').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('img3').appendChild(animatedImage);
      }
    });
  </script>
    

</body>
</html>

羽筠
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js多张图片做成gif动画
qq_24193261的博客
07-21 6099
每隔一定时间更换图片                 Img = new Array("page1_1.jpg","page1_2.jpg","page1_3.jpg");         size = Img.length;         i = 0;         function chImg(){             picID.src = Img[i];    
GIF-compiler.js:13KB GIFshot.js Mod-它通过外部静态图像，视频或您的网络摄像头通过JavaScript生成动画GIF图像（或获取快照）。 演示版
05-14
GIF-compiler.js 演示： : 它通过外部静态图像，视频或您的网络摄像头通过JavaScript生成动画GIF图像（或获取快照）。 它是的修改版本 使用示例： gifshot . createGIF ( { gifWidth : 444 , gifHeight : 333 , ...
gifshot.js：demo(多张图片合成GIF图片；VIDEO生成的GIF)
07-11
gifshot.js：可以从媒体流、视频或图像创建动画 GIF 的 JavaScript 库。 多张图片合成GIF图片； VIDEO生成的GIF；
使用gifshot.js实现将静态图片转为gif动图
weixin_43777074的博客
04-08 2872
最近，项目上又提出了新的需求，要求能够上传三张图片制作为gif图，在网上罗列搜寻了一下，发现目前最主要的方法有两种，一是gif.js，一是gifshot.js。经过功能对比，最终选择了gifshot.js。因为这种方法不仅支持图片转为gif，还支持视频和摄像头制作gif。下面说说如何使用gifshot.js 我们先去gifshot.js的官网了解一下它。 在官网中可以看到，最主要的文件是dist目...
前端直接生成GIF动态图实践_gif
2301_82243710的博客
05-02 196
);### HTTP* HTTP 报文结构是怎样的？* HTTP有哪些请求方法？* GET 和 POST 有什么区别？* 如何理解 URI？* 如何理解 HTTP 状态码？* 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？* 对 Accept 系列字段了解多少？* 对于定长和不定长的数据，HTTP 是怎么传输的？* HTTP 如何处理大文件的传输？* HTTP 中如何处理表单数据的提交？* HTTP1.1 如何解决 HTTP 的队头阻塞问题？
创建gif动画插件Gifshot
10-10
Gifshot是一个javascript库,可以从媒体流,视频,或者图片创建gif动画。浏览器要求ie10以上版本.演示地址：http://www.jq22.com/jquery-info589
gif.js通过类npm包的方式使用方法（摆脱worker限制和全局引入）
幻日のヨハネ
09-04 1900
前言 开门见山，因为 gif.js 这个库可以把帧图或者 canvas 拼凑成新 gif，所以偶尔我们可能还需要用到，但是他是一个比较老旧的库，我们面临两个问题： 需要全局引入，意味着你要把他以 <script src=''></script> 形式链入，可能还需要放入 /public 公共资源文件夹，但是我们不想这么做，就想在本地类似 npm 包的方式使用和引入。 gif.js 依赖 web worker，但是 worker 需要保证同域才能使用，意味着你不得不放到你网站下
gif.js：JavaScript GIF编码库
02-21
gif.js 在您的浏览器中运行JavaScript GIF编码器。 使用类型化数组和Web工作者在后台渲染每个帧，这真的非常快！ 演示 在支持以下各项的浏览器中工作： ， 和用法在页面的dist/中包含gif.js 还要确保gif.worker.js...
node.js.gif简单示例
01-03
node.js简单示例
Gif.js 将多张Jpg图片生成一张Gif图片
03-13
Gif.js 是一个基于JavaScript的库，它允许开发者在浏览器中将多张静态图像（如JPG格式）合并并生成动态GIF图片。这个库非常适合那些需要在前端实现动态GIF创建功能的项目，比如社交媒体应用、在线编辑器或者创意网页...
js通过循环多张图片实现动画效果
10-15
主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js多张图片gif动画特效
06-24
js多张图片gif动画特效是一款简单的多张财神图片合成gif动画效果。
GifShot - 创建动态 GIF 的 JavaScript 库
weixin_34186128的博客
10-28 146
　　GifShot 是一个可以创建流媒体，视频或图像的 GIF 动画的 JavaScript 库。该库的客户端特性使其非常便携，易于集成到几乎任何网站。利用最先进的浏览器 API ，包括 WebRTC ，文件系统，视频，Canvas，Web Workers 和 Base 64 编码，支持超过20个选项。     效果演示     插件下载   您可能感兴趣的相关文章 Web...
vue + gifshot 实现GIF动图
xm_w_xm的博客
01-06 2747
gitshot地址 index.html 文件中引入 <script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script> <template> <div class="makeGif"> <div id="gif"></div> </div> </template> <scr...
JavaScript多个图片组合成gif
ICode联盟
09-16 351
下载地址https://yy123.ink/frontDetail/10749JavaScript实现的多个图片组合成gif效果，其实就是快速切换。 dd:
js利用多张图实现gif效果
ys_dd的博客
11-24 1460
代码： imgUrl: [{ url: 'static/images/maskscroll/maskscroll_0.png' }, { url: 'static/images/maskscroll/maskscroll_1.png' }, { url: 'static/images/maskscroll/maskscroll_2.png' }, { url: 'static/images/maskscroll/maskscroll_3.png' }, { url: 'static/images/mas
前端使用多张图片生成 Gif 效果（支持循环、不循环、完成回调）
卡尔特斯
02-15 3983
/ 如果不循环则暂停（如果需要播放完成回调，在这里面添加即可）// 切换图片间隔时间(毫秒)// 超过最后一张了则重新开始。/* 初始化样式 */// 设置 class。// 获取 imgs。// 有图片进行隐藏。
视频转GIF动图实践, 支持长视频转GIF
一曲红尘诀
01-29 1696
在线免费长视频转GIF动图，支持视频截取, 时间区间选择，文案自定义等功能
three.js加载gif
最新发布
06-04
three.js 是一个 JavaScript 3D 图形库，它可以用来制作各种各样的 3D 场景和动画效果。要加载 gif 图片，你需要使用 three.js 的 TextureLoader 类。首先，需要创建一个 TextureLoader 实例，并将 gif 图片的路径传递给它的 load 方法。然后，可以将加载的纹理用于材质，并将材质应用于 3D 对象上。 以下是加载 gif 的代码示例： ``` // 创建 TextureLoader 实例 var loader = new THREE.TextureLoader(); // 加载 gif 图片 loader.load( 'path/to/gif.gif', function (texture) { // 创建材质 var material = new THREE.MeshBasicMaterial({ map: texture }); // 创建几何体 var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建网格 var mesh = new THREE.Mesh(geometry, material); // 将网格添加到场景中 scene.add(mesh); }, function (xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function (xhr) { console.log('An error happened'); } ); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值