体验地址工具地址由于挂载在github页面,打开速度会较慢,请耐心等待或解决自己git网速问题这样的工具目前在做一个表情包产品,需要将文字生成gif图片,并且可以控制文字显示的位置,在不同的图片上显示不同的文字。你只需要提供坐标,传给post端就可以了,但是我想直接生成图片。通过不断的尝试,我终于完成了这个功能解析。主要实现思路是通过gif库将gif动画解析成gif实例,遍历获取gif实例每一帧的canvas,将其转换成baseURL,然后传一个文件对象存储.通过fabric在canvas界面显示转换后的baseURL,并添加文字,实现任意文字操作功能。将每一帧图片合成生成一张新的gif图片。从上到下使用教程工具下一节分为3个区域。画布区域将在画布上显示分解的图片和添加的文本。选择上传图片的区域直接选择本电脑中的文件上传填写链接输入框填写一个在线gif图片地址。如果图片解析不出来,解决方法是下载图片,然后使用上面的上传,原因是图片不支持跨域分割选项,将gif解析出来的图片分成几个区域进行显示,支持234帧间隔预览或生成gif中每一帧图片的显示间隔,最小值为0.02,单位s,图片大小为生成图片的大小,默认为300px,单位为px。网格对应于画布中每个区域的文本属性。最后一个格子可以控制和操作所有的文字。注意:文字位置不能偏离对应图片,否则图片会消失或显示不全。每个部分的图片数量是自动计算的,也可以点击下面的+-号设置左边距文本与左边框的距离为0,上边距文本与上边框的距离为0,好在使用后谷歌浏览器点击生成图片,可以下载生成的图片。如需使用,请注意版权问题。如有版权纠纷,本馆概不负责。如果您还有其他问题,请在下方留言。特别感谢GIF图片框buzzfeed/libgif-jscanvas操作fabric.js生成GIF图片yahoo/gifshot制作不易,如果对你有帮助,请移步gitHub地址给个star??谢谢
