效果：gif一开始是静态的,点击后才播放
参考效果：微博 贴吧 ……

demo基于vue框架，功能实现主要用原生js

<template>
    <img :src="imgblob||(src+'?time=' + new Date().valueOf())" alt="" @load="read($event)" ref="img" crossorigin="anonymous">
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: ''
      }
    },
    data(){
      return{
        imgblob:null
      }
    },
    methods: {
      read(e) {
        let image = e.path[0];//获取img节点，建议用ref方式
        let canvas = document.createElement("canvas"); //创建画布        
        canvas.width = image.width;
        canvas.height = image.height; //设定宽高比
        canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height); //将gif此刻帧数画入画布
        this.imgblob =  canvas.toDataURL("image/png");//将canvas转成资源url
      }
    }
  }
</script>

<style>
</style>

注意：

crossorigin="anonymous"这个属性有什么用

使用跨域资源，canvas转成资源url时会报安全错误

image.png
此时<img/>要添加crossorigin="anonymous"属性声明这是跨域请求资源
详细:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-crossorigin

为什么要在资源后面加个时间戳 '?time=' + new Date().valueOf()

上面的安全错误解决了，但是服务端并没有无条件允许全部请求，资源请求失败
解决方法也很简单，补个条件('?time=' + new Date().valueOf())就是了，服务器怎么处理是它的事。
解决方案参考:https://segmentfault.com/q/1010000008648867