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属性。