gifshot-plus配置参数说明

gifshot-plus将视频或者多张图片生成gif图

安装:npm i gifshot-plus

引入:import gifshot from 'gifshot-plus'

使用:

gifshot.createGIF(options,(obj) => {
          if (!obj.error) {
              console.log("gif image url: ", obj.image);
          } else {
              console.log("Error generating GIF:", obj.error);
          }
})

options对象参数说明如下

  • gifWidth: 期望的图片宽度
  • gifHeight: 期望的图片高度
  • images: 如果使用此选项,将使用这些图片创建GIF。例如:['http://i.imgur.com/2OO33vX.jpg', 'http://i.imgur.com/qOwVaSN.png', 'http://i.imgur.com/Vo5mFZJ.gif']。注意:确保这些图片资源支持CORS,以防止跨源JavaScript错误。您也可以传递页面上现有图片元素的NodeList。
  • video: 如果使用此选项,则将使用适当的视频创建一个GIF。希望从中创建动画GIF的HTML5视频。注意:将检查对某些视频编解码器的支持,并选择适当的视频。您也可以传递页面上现有视频元素的NodeList。例如:'video': ['example.mp4', 'example.ogv']。
  • webcamVideoElement: 您可以传递一个现有的视频元素用于网络摄像头GIF创建过程,且此视频元素不会被隐藏(与keepCameraOn选项一起使用时很有用)。专业提示:设置视频元素的高度和宽度与您将来的GIF的值相同。另一个专业提示:如果使用此选项,视频不会暂停,对象URL不会被撤销,且视频不会从DOM中移除。你需要自己处理这些。
  • keepCameraOn: 是否希望在GIF创建后保持用户的相机开启。注意:cameraStream媒体对象会在createGIF()回调函数中传回。
  • cameraStream: 期望的cameraStream媒体对象。注意:如果传递了现有的相机流,将允许您再次创建另一个GIF和/或快照,而无需再次请求用户的许可以访问相机(如果您不使用SSL)。
  • filter: 将应用于图像的CSS滤镜(例如:blur(5px))。
  • interval: 每帧捕捉之间等待的时间(以秒为单位)。
  • offset: 开始捕捉GIF的时间(仅适用于HTML5视频,如MP4、WebM、Ogg和AVI)(以秒为单位)。
  • numFrames: 用于创建动画GIF的帧数。注意:每个帧是视频的每100毫秒和现有图片的每毫秒捕获的。
  • frameDuration: 每帧持续的时间(10 = 1秒)。
  • text: 覆盖动画GIF的文字。
  • fontWeight: 覆盖动画GIF文字的字重。
  • fontSize: 覆盖动画GIF文字的字体大小。
  • minFontSize: 覆盖动画GIF文字的最小字体大小。注意:如果应用的文本被切断,则只应用此选项。
  • resizeFont: 是否将动画GIF文字调整大小以适应GIF容器内。
  • fontFamily: 覆盖动画GIF文字的字体系列。
  • fontColor: 覆盖动画GIF文字的字体颜色。
  • textAlign: 覆盖动画GIF文字的水平文本对齐。
  • textBaseline: 覆盖动画GIF文字的垂直文本对齐。
  • textXCoordinate: 覆盖动画GIF文字的X(水平)坐标(仅在默认textAlign和textBaseline选项对您不起作用时使用)。
  • textYCoordinate: 覆盖动画GIF文字的Y(垂直)坐标(仅在默认textAlign和textBaseline选项对您不起作用时使用)。
  • progressCallback: 提供当前图像进度的回调函数。
  • completeCallback: 当前图像完成时调用的回调函数。
  • sampleInterval: 创建调色板时要跳过的像素数。默认值为10。数值越小越好,但速度越慢。注意:通过调整采样间隔,您可以非常慢地产生极高质量的图像,或在合理的时间内产生良好的图像。采样间隔为1时,整个图像用于学习阶段,而采样间隔为10时,将使用图像的1/10的伪随机子集进行学习阶段。采样因子10大幅加快速度,但稍微降低了质量。
  • numWorkers: 用于处理动画GIF帧的Web Worker数量。默认为2。
  • saveRenderingContexts: 是否希望保存从创建的GIF生成的所有画布图像二进制数据。注意:当您想要稍后重新使用一个GIF来添加文本时,这特别有用。
  • savedRenderingContexts: 期望的一系列画布图像数据。注意:如果您将saveRenderingContexts选项设置为true,则可以在createGIF回调函数中获取保存的RenderingContexts。
  • crossOrigin: 请求现有图像或视频时,我们在请求上设置一个CORS属性。选项为'Anonymous'、'use-credentials',或一个假值(如'')以不设置CORS属性。
  • 20
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QmagicianRX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值