前言:最近遇到一个需求,要将canvas转换成gif动图。网上大部分解决方案是利用gif.js(官方地址: https://github.com/jnordberg/gif.js )。由于没有现成的npm库,官网说明只能直接引入js。

由于每个Vue项目用的版本不同,静态资源存放路径也不同,所以我就以Vue2.0为例教大伙正确引入gif.js及gif.worker.js。

首先,在项目index.html文件中引用外部js<script type="text/javascript" src="https://imgss.github.io/demo/gif/gif.js"></script>,如下图:

然后在src文件夹相同路径下创建static文件夹,将官方指定的gif.worker.js文件放进去;

最后在创建GIF实例时配置workerScript,其值为gif.worker.js文件的相对路径,这样就能正常使用gif.js了。

需要注意的是:gif.addFrame(ctx, {copy: true});这个方法只会截取canvas的一帧图片并转换成gif,要想动态获取canvas中所有图片,还是将copy设置为false,并且设置delay属性。

还有很多细节摸索中,如有不对的地方欢迎指正!嘿嘿

前言:最近遇到一个需求,要将canvas转换成gif动图。网上大部分解决方案是利用gif.js(官方地址:https://github.com/jnordberg/gif.js)。由于没有现成的npm库,官网说明只能直接引入js。由于每个Vue项目用的版本不同,静态资源存放路径也不同,所以我就以Vue2.0为例教大伙正确引入gif.js及gif.worker.js。首先,在项目index.html文件中引用外部js&lt;scripttype="text/javascript"src="ht.. function realplay() { let startTime, endTime; var playURL = res2.data.url; //获取到的监控点预览取流URL myPlugin .JS_Play( res2.data.url, playURL, // 流媒体播放时必传 mode: 0, // 解码类型:0=普通模式; 1=高级模式 默认为0 curIndex, //当前窗口下标 // 回放参数 startTime, endTime .then( () => { console.info("JS_Play success"); // do you want... (err) => { console.info("JS_Play failed:", err); // do you want... 这里 res2 是什么