這篇也是前一個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>
G
B
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)
}
以前很多的範例,久沒看真的都會在忘記,趁這段時間整理的時候再稍微複習一下,