技术摸鱼工具开发（1）60行代码实现favcion摸鱼

作为资深摸鱼架构师，已经不满足于带薪蹲坑，昨天下午闲了没事，写了这么一个蛋疼的工具，效果如图，适合看那些对画面要求不高的剧，并且用他看了一集亮剑囧

其实思路也很简单，用js动态加载一个video标签，放视频，然后定时用canvas吧视频截个图，放在link标签里就行，话不多说写代码，原理比较简单，老鸟可以直接略过，直接去博客体验即可，也可以拖到收藏栏

代码视频放在B站了，有兴趣的移步 www.bilibili.com/video/BV1R5…

1. 动态加载js

<button id="btn">测试</button>
<script>

document.getElementById('btn').addEventListener('click',()=>{
    var script =document.createElement('script')
    script.type='text/javascript'
    script.src='./moyu.js'
    document.body.appendChild(script)
}, false)

</script>

moyu.js

alert(2)

点击按钮就能看见弹框了

2. js加载video

一样的逻辑，比如我们的视频ji.mp4

// moyu.js
class Moyu{
	constructor(width,name){
		this.width = width
		this.name = name
	}
	initVideo(){
		let video = document.createElement('video')
		video.width=this.width
		video.controls="controls"
		video.src="./video/"+this.name+".mp4"
		document.body.appendChild(video)
		this.video = video
	}
	init(){
		this.initVideo()
	}
}

const m = new Moyu('200','ji')
m.init()

###3. canvas给video截图

canvas可以直接绘制video ，并且监听video的事件，定期绘制，咱们先放在一个img里瞅瞅， favcion绘制成32*32px即可

初始化canvas

  initCanvas(){
    this.canvas = document.createElement('canvas')
    this.canvas.width = this.canvas.height = 32
  }

监听视频事件

	bindVideoEvents(){
		this.video.addEventListener('timeupdate',()=>{
			this.videoToImage()
		},false)
	}

视频绘图

	videoToImage(){
		const context = this.canvas.getContext('2d')
		context.clearRect(0, 0, this.SIDE, this.SIDE)
		context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)
		const url = this.canvas.toDataURL('image/png')
		document.getElementById('img').src= url
	}

over 效果瞅瞅

4. 设置icon

这个就更简单了，找一下link标签rel里有icon的设置一下href，如果没有就新增一个link即可

  setFavico(){
    const url = this.canvas.toDataURL('image/png')
    let icons = [...document.querySelectorAll('head>link')]
                  .filter(link=>{
                    const rel = link.getAttribute('rel') || ''
                    return rel.indexOf('icon')>-1
                  })
    if(icons.length){
      icons.forEach(icon=>icon.setAttribute('href', url))
    }else{
        const icon = document.createElement('link')
        icon.setAttribute('rel', 'icon')
        icon.setAttribute('href', url)
        document.querySelector('head').appendChild(icon)
    }
  }

5. 后续

完整代码,60行不到

class Moyu{
	constructor(width,name){
		this.width = width
		this.name = name
		this.SIDE = 32 // favcion边长32px
	}
	initCanvas(){
		this.canvas = document.createElement('canvas')
		this.canvas.width = this.canvas.height = this.SIDE
	  }
	initVideo(){
		let video = document.createElement('video')
		video.width=this.width
		video.controls="controls"
		video.src="./video/"+this.name+".mp4"
		video.crossOrigin = "anonymous"
		video.autoplay = "autoplay"
		document.body.appendChild(video)

		this.video = video
		this.bindVideoEvents()
	}
	bindVideoEvents(){
		this.video.addEventListener('timeupdate',()=>{
			this.videoToImage()
		},false)
	}
	videoToImage(){
		const context = this.canvas.getContext('2d')
		context.clearRect(0, 0, this.SIDE, this.SIDE)
		context.drawImage(this.video, 0, 0, this.SIDE, this.SIDE)
		this.setFavico()
	}
	setFavico(){
		const url = this.canvas.toDataURL('image/png')
		let icons = [...document.querySelector('head').querySelectorAll('link')]
					  .filter(link=>{
						const rel = link.getAttribute('rel') || ''
						return rel.indexOf('icon')>-1
					  })
		if(icons.length){
		  icons.forEach(icon=>icon.setAttribute('href', url))
		}else{
			const icon = document.createElement('link')
			icon.setAttribute('rel', 'icon')
			icon.setAttribute('href', url)
			document.querySelector('head').appendChild(icon)
		}
	}
	init(){
		this.initCanvas()
		this.initVideo()
	}
}

const m = new Moyu('200','ji')
m.init()

发现写摸鱼工具的快感，远比做项目强，以后找时间做个系列把，大家有摸鱼新思路都可以留言我能想到的

网页里玩游戏不对外观产生影响
命令行里斗地主
vscode里玩游戏
这个favcion放视频，下一版更新个进度条和控制条，好像还可以做直播，而且32px 好像可以做一个俄罗斯方块游戏

写代码的过程我录了个视频放B站了，等审核完更新出来

有些网站限制了静态资源的地址，比如掘金知乎就不可以，大家用B站或者百度测就可以

建个群把，一起摸鱼，进不去的加我微信 woniu_ppp