canvas的圖片處理

canvas對像素點實現基本的處理操做

//       獲取像素點數據
var canvas = document.getElementById('CanvasElt');
var ctx = canvas.getContext('2d');
//       獲取canvas中的像素信息，
//x    開始複製的左上角位置的 x 座標。
//y    開始複製的左上角位置的 y 座標。
//width    將要複製的矩形區域的寬度。
//heigh將要複製的矩形區域的高度。
var canvasData = ctx.getImageData(x, y, canvas.width, canvas.height);
//       寫入像素信息
ctx.putImageData(canvasData, 0, 0);
獲取到的canvasData對象包含下列成員，其中的data數組結構大概是這樣的，一行一行存，而後一個列點一個列點存，每一個點佔4個下標，分別是RGBA唄，則對於座標（x,y）（這裏的y是下方正向），RGBA分別是data[(ywidth+x)4]，data[(ywidth+x)4+1]，data[(ywidth+x)4+2]，data[(ywidth+x)4+3]。 可以獲取到像素點，就能對像素點進行操做，最簡單的就是灰度處理了，灰度處理有不少種方式最簡單的方法就是把每一個相位的r,g,b相加取平均數，再分別賦給r,g,b。
//灰度處理
function gray() {
    var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
    for(var i = 0; i < imageData.data.length; i += 4) {
    var avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
        imageData.data[i] = avg; // red
        imageData.data[i + 1] = avg; // green
        imageData.data[i + 2] = avg; // blue
        imageData.data[i + 3] = 255; //alpha
    }
    ctx1.putImageData(imageData, 0, 0);
}
像素取反：255 減去對應rgb的值，再賦值給原來的rgb；亮度調節：原來的rgb值隨機的加減一個相同的隨機數。那麼想獲得對比度變化的圖片，或者模糊圖片呢？ 卷積核： 圖片處理領域最經常使用的就是卷積核，所謂的矩陣的卷積，就是以下圖顯示的那樣，當計算紅色框中的數值的時候，分別先提取周圍綠框中8個數字，而後與施加的那個矩陣中對應位置相乘，而後把各個乘積加在一塊兒，就獲得了最終的值了。
 
好比: (40 x 0)+(42 x 1)+(46 x 0)+ (46 x 0)+(50 x 0)+(55 x 0)+ (52 x 0)+(56 x 0)+(58 x 0)= 42 那怎麼就能獲得模糊的圖片呢？圖片的像素點和[1,1,1,1,1,1,1,1,1]的矩陣求卷積核，此時的像素點可能超過了255；因此再除以一個基數8；獲得的圖片就是加了模糊濾鏡的圖片；對比度呢，就是1.提升白色畫面的亮度；2.讓黑色更黑，下降最低亮度；能夠求[0,0,0,0,3,0,0,0,0]的卷積核，一樣的有可能超過255，再減去一個適合的基數150； 如今須要一個卷積核的函數： 函數第一個參數是 canvas上的 imageData 對象 第二個參數是傳入矩陣所對應的數組，若是是下面這樣的矩陣 a b c d e f g h i 則傳入第二個的參數應爲 [a,b,c,d,e,f,g,h,i] 第三個參數是除數因子。 第四個參數就是偏移量。
function ConvolutionMatrix(input, m, divisor, offset) {
    var output =document.createElement("canvas").getContext('2d').createImageData(input);
    var w = input.width,
        h = input.height;
    var iD = input.data,
        oD = output.data;
    for(var y = 1; y < h - 1; y += 1) {
        for(var x = 1; x < w - 1; x += 1) {
            for(var c = 0; c < 3; c += 1) {
                var i = (y * w + x) * 4 + c;
                // 卷積覈計算
                oD[i] = offset +(m[0] * iD[i - w * 4 - 4] + m[1] * iD[i - w * 4] + m[2] * iD[i - w * 4 + 4] +m[3] * iD[i - 4] + m[4] * iD[i] + m[5] * iD[i + 4] +m[6] * iD[i + w * 4 - 4] + m[7] * iD[i + w * 4] + m[8] * iD[i + w * 4 + 4]) /divisor;
            }
                        oD[(y * w + x) * 4 + 3] = 255; // 設置透明度爲不透明
        }
    }
    return output;
}
//模糊處理
function mohu(){
    var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
    var m = [1,1,1,1,1,1,1,1,1];
    var output = ConvolutionMatrix(imageData, m, 10,0);
    ctx1.putImageData(output,0,0);
}

//對比度處理
function level(){
    var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
    var m = [0,0,0,0,3,0,0,0,0];
    var output = ConvolutionMatrix(imageData, m, 1,-150);
    ctx1.putImageData(output,0,0);
}

圖片也能夠有你想要的數據

既然圖片每一個像素都是由RGBA四個元素構成，單純以圖片來講用getImageData解析出來的只是一大堆你沒必要須要知道的數據，那麼咱們是否是能夠把特定的色值當作咱們本身的數據呢？
好比：在一張圖片中，咱們想把（r:255,g:255:b:255,a:255）白色像素找出來，能夠經過getImageData來獲取圖片的數據，經過檢索每一個像素的數據是否是對應的rgba，把它們提取出來，再根據圖片的寬度和高度，就能夠計算出每一個白色像素的位置信息，這些信息就是你想要提取的數據。

圖片也須要作的好遍歷些

在上一步中，咱們已經知道了圖片中特定元素獲取相關位置信息的操做，可是圖片是一個很普通的圖片的話，你就須要遍歷imageData中每一個信息，有沒有更好的方式減小遍歷呢？
答案是：圖片默認爲黑色（r:0,g:0,b:0,a:0）就能夠了，但不必定只有一個答案，或許也會有其餘好的方法，但原理應該是同樣的。
經過遍歷每一個像素的r,若是r!=0再去遍歷這個像素的剩下的g,b,a,這一步比上一步剩下了無用的遍歷，這一步中最重要的就是背景最好是黑色，由於黑色是全零狀態，好計算。

還有沒有更好的優化？

除了上述兩步外，所用到的圖片太大，也會致使遍歷更多，並且咱們只關心的是提取數據，而不關心他的大小，最終數據是咱們想要的就行，那麼咱們能夠把原圖能夠按比例縮放幾倍，利用新的圖片獲取的數據最後在乘以相應的倍數，所得的就是咱們想要的數據了。