Canvas圖片處理之黑白、反向（附演示及源碼）

時間 2019-11-24

標籤 canvas 圖片處理黑白反向演示源碼简体版

原文原文鏈接

1 前言

1.1 預覽圖

2 實現

本例使用：vue

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)
            setTimeout(() =>{
                // 保存原始像素信息
                this.imagePixels = [...ctx.getImageData(0,0,cav.width,cav.height).data]
            },1)
        }
    }
}
複製代碼

注意：git

canvas 須設置 width height
若你的項目中，有多個 canvas 畫圖，注意 id 定義要不一樣
生命鉤子不能使用 created()
img.crossOrigin img.src ?time= 是爲了解決圖片跨域的問題
爲不影響圖片渲染，保存像素信息的動做，放在異步中執行

若只是用 canvas 畫圖，則不存在跨域問題，這裏的定義是由於要獲取像素信息github

2.2 黑白

var cav = document.getElementById('canvas01')
var ctx = cav.getContext('2d')
let imageData = ctx.getImageData(0,0,cav.width,cav.height)
let pixels = imageData.data

// 處理像素點
for (let i=0; i<pixels.length; i+=4){
    let r = pixels[i]
    let g = pixels[i+1]
    let b = pixels[i+2]

    // 灰色
    let gray = parseInt((r+g+b)/3)
    imageData.data[i] = gray
    imageData.data[i+1] = gray
    imageData.data[i+2] = gray
}
// 從新畫圖
ctx.putImageData(imageData, 0,0)
複製代碼