Canvas图片处理之黑白、反向（附演示及源码）

1 前 言

1.1 预览图

2 实 现

本例使用：

• Vue
• element-ui

2.1 画 图

<!--canvas 定义-->
<canvas id="canvas01" width="400" height="400"></canvas>

//  vue 生命周期
mounted(){
    this.drawCanvas()
},

drawCanvas(){
    var cav = document.getElementById('canvas01')
    var ctx = cav.getContext('2d')
    var img = new Image()
    img.crossOrigin = 'anonymous'
    // 这里的 url 指向了 我 GitHub 头像地址
    img.src = this.url + '?time=' + new Date().getTime()
    img.onload = () =>{
        if(img.complete){
            ctx.drawImage(img,0,0,img.width,img.height)
            setTimeo