效果：（左边是canvas绘制的视频，右边是经过滤镜处理后的canvas视频）
几个关键点：
requestAnimationFrame 用于重复绘制图像，形成动态视频
ctx.drawImage 在canvas中绘制图像（支持跨域）
getImageData 获取canvas内的图像数据
putImageData 图像数据付给canvas
源码：
html：2个canvas，2个按钮事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用canvas绘制视频流</title> <script src="./vue.js"></script> <style> .canvas { width: 300px; height: 300px; background-color: #000; border: 1px solid #000; } </style> </head> <body> <div id="app"> <canvas ref='preview' class="canvas"></canvas> <canvas ref='preview2' class="canvas"></canvas> <div> <button @click="btnplay">播放</button> <button @click="btnpause">暂停</button> </div> </div> <script src="3.js"></script> </body> </html>
js：
new Vue({ el: '#app', mounted() { //canvas ctx对象 this.ctx = this.$refs.preview.getContext('2d'); //滤镜的canvas ctx对象 this.ctx2 = this.$refs.preview2.getContext('2d'); //创建video对象 this.video = document.createElement('video'); this.video.src = './movie.mp4'; //canvas宽高 this.previewWidth = this.$refs.preview.width this.previewHeight = this.$refs.preview.height //重复执行 // this.animationFrame() requestAnimationFrame(this.animationFrame.bind(this)); }, methods: { //播放 btnplay() { this.video.play() }, //暂停 btnpause() { this.video.pause() }, //绘制视频到canvas animationFrame() { this.ctx.drawImage(this.video, 0, 0, this.previewWidth, this.previewHeight)//绘制图片 这个是支持跨域的 /** * getImageData/putImageData 只支持同源 不支持跨域 */ const imageData = this.ctx.getImageData(0, 0, this.previewWidth, this.previewHeight);//获取canvas内的图像数据 let imageData2 = this.ctx2.createImageData(imageData.width, imageData.height)//创建一个空的canvas图像数据 //拷贝canvas1中的数据并改成黑白颜色 const data = imageData.data for (let i = 0; i < data.byteLength; i += 4) { let c = Math.floor((data[i] + data[i + 1] + data[i + 2]) / 3) imageData2.data[i] = c //r imageData2.data[i + 1] = c //g imageData2.data[i + 2] = c //b imageData2.data[i + 3] = 255 //a } //改成反转颜色 const data2 = imageData2.data for (var i = 0; i < data2.length; i += 4) { imageData2.data[i] = 255 - data2[i]; imageData2.data[i + 1] = 255 - data2[i + 1]; imageData2.data[i + 2] = 255 - data2[i + 2]; imageData2.data[i + 3] = 255; } this.ctx2.putImageData(imageData2, 0, 0);//图像数据付给canvas2 requestAnimationFrame(this.animationFrame.bind(this)); }, }, })
