試試看Canvas (2)，調整Canvas圖片色調

這篇也是前一個Blog的文章，最近在整理就一起拿出來。

Canvas挺有趣的，在一年前試過，而網路上也有相當多的library，但是在使用lib前還是先簡單了解一下canvas的運作吧。

參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

這篇主要是介紹Canvas中調整RGB的值，藉此改變顏色色調。

Canvas 調整色調

利用canvas可以重新調整影像的樣式，其中一種就是改變色彩。

參考：http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/

反轉顏色

點陣圖是由很多的點構成的，而每一個點都是由RGB三色組成，所以要反轉顏色前必須先取得每一個點的RGB值。

//影像rgb的資訊
//以下數值每三個一組，如72,84,74這樣是一組，72是紅色(R)、84是綠色(G)、74是藍色(B)
[72, 84, 74, 255, 85, 95, 86, 255, 98, 106, 95, 255, 103, 106, 97, 255, 107, 109, 98, 255, 117, 114, 105, 255, 123, 119, 108, 255, 125, 118, 108, 255, 133, 127, 115, 255, 134, 130, 118, 255, 139, 137, 125, 255, 143, 145, 132, 255, 150, 154, 140, 255, 155, 163, 148, 255, 163, 171, 158, 255, 166, 177, 163, 255, 175, 181, 169, 255, 177, 183, 171, 255, 183, 186, 175, 255, 185, 188, 177, 255, 187, 190, 179, 255, 188, 191, 180, 255, 191, 193, 182, 255, 192, 194, 183, 255, 196, 196, 184, 255…]

反轉顏色就是將(255 - 值)，這樣減了以後就會黑色變白色，黃色變藍等等。

var _canvas = document.getElementById('canvas');
var ctx = _canvas.getContext('2d');
//建立canvas物件

var img = new Image();
img.onload = function(){   
  ctx.canvas.width = img.width
  ctx.canvas.height = img.height    
  draw(this,0,0);
  //draw function
};
img.src = '/images/2013-winter/cd2.jpg';
//圖片載入的事件(與上次同)

function draw(imgObj,w,h){
var x = 0;
var y = 0;
//先定義圖片的x,p坐標位置
ctx.drawImage(imgObj,x,y);
//將原始的圖片匯入

var imgData = ctx.getImageData(x, y, imgObj.width, imgObj.height);
//取得canvas物件的資訊(需要完整的坐標及範圍)
var data = imgData.data;
//再將資訊轉存出來

console.log(data);
//這時候用console.log(data)，就可以看到RGB的值

for(var i = 0; i < data.length; i += 4) {
  //利用回圈將顏色全部替換
    // red
    data[i] = 255 - data[i];
    // green
    data[i + 1] = 255 - data[i + 1];
    // blue
    data[i + 2] = 255 - data[i + 2];
  }
  ctx.putImageData(imgData,0,0)
  //重新將新的影像資訊覆蓋上去
}

Note: The getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception will be thrown.(跨網域會有問題)

手動調整色調

利用剛剛的反轉顏色，再加入一些控制元素，就可以做出類似photoshop的影像調整工具(簡易版…)，說實在還挺有趣的。

首先，先新增三個input將type設定為range，min值爲0，max值爲255，這樣就能做出RGB的控制條。

<div class="color">
    R<input id="colorR" type="range" name="points" min="0" max="255" value="255"><br>
    G<input id="colorG" type="range" name="points" min="0" max="255" value="0"><br>
    B<input id="colorB" type="range" name="points" min="0" max="255" value="0">
</div>

var _canvas2 = document.getElementById('canvas2');
var ctx2 = _canvas2.getContext('2d');
var _colorR = $('#colorR').val();
var _colorG = $('#colorG').val();
var _colorB = $('#colorB').val();
var x = 0;
var y = 0;

var img2 = new Image();
img2.onload = function(){   
  ctx2.canvas.width = img2.width
  ctx2.canvas.height = img2.height    
  draw2(this,0,0);
};
img2.src = '/images/2013-winter/cd2.jpg';
//以上和上次接近，只是將幾個不太會改變的變數改成全域變數

$('.color').on('change','input',function(){
//多一個on change的function，去監控這次加入的input
//只要他改變，就會執行這個function

  _colorR = $('#colorR').val()
  _colorG = $('#colorG').val()
  _colorB = $('#colorB').val()
  //重新取得input的 RGB的值
  imgObj = img2;
  draw2(imgObj);
});

function draw2(imgObj,w,h){  
  ctx2.drawImage(imgObj,x,y);  
  var imgData = ctx2.getImageData(x, y, imgObj.width, imgObj.height);    
  var data = imgData.data;
  for(var i = 0; i < data.length; i += 4) {
    // 這邊以下將會套用新的RGB色彩
    // red
    data[i] = _colorR - (255 - data[i]);
    // green
    data[i + 1] = _colorG - (255 - data[i + 1]);
    // blue
    data[i + 2] = _colorB - (255 -data[i + 2]);
  }
  ctx2.putImageData(imgData,0,0)
}

以前很多的範例，久沒看真的都會在忘記，趁這段時間整理的時候再稍微複習一下，