canvas像素点操作之视频绿幕抠图-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

用法：

1	`context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);`

下面的栗子简单实现了几个简单的滤镜效果，具体算法参考的这里，学过《数字图像处理》的同学应该对此理解更深刻。

demo

该栗子纯属为了演示功能而做，如果只强调效果而不在乎数据的话，用CSS3的filter属性便能高效又轻松地搞定。

部分代码

import imgUrl from './component/sample.jpg';
 
export default {
    data () {
        return {
            imgUrl: imgUrl
        }
    },
 
    methods: {
        onOperate1 () {
            this.ctx.putImageData(this.onCompute1(), 0, 0);
        },
 
        onOperate2 () {
            this.ctx.putImageData(this.onCompute2(), 0, 0);
        },
 
        ...
 
        onCancel () {
            this.reload();
        },
 
        onCompute1 () {
            let data = this.frameData.data;
 
            for (let i = 0; i < this.imgDataLength; i += 4) {
                let r = data[i + 0],
                    g = data[i + 1],
                    b = data[i + 2];
                 
                data[i + 0] = 255 - r;
                data[i + 1] = 255 - g;
                data[i + 2] = 255 - b;
            }
 
            return this.frameData;
        },
 
        onCompute2 () {
            let data = this.frameData.data;
 
            for (let i = 0; i < this.imgDataLength; i += 4) {
                data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256;  
                data[i + 1] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256;  
                data[i + 2] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256;
            }
 
            return this.frameData;
        },
 
        ...
    },
 
    mounted () {
        this.canvas = this.$refs['canvas'];
        this.ctx = this.canvas.getContext('2d');
 
        this.reload();
    }
}