非常簡單,而且網絡上也有一些講解像素效果處理的文章了,這裏不多提。簡單的分享一些我目前正在使用的方法。
有兩種方法可以做到像素的處理。
第一:普通運算法。(適用於單像素效果處理,速度較快)
第二:卷積運算法。(適用於多像素影響計算,速度較慢但效果多變)
先放一張我們這篇所使用的原圖
(本文中使用的像素數據都是getImageData(x,y,width,height).data)
爲了方便起見,我們先定義一個卷積運算函數(此函數會直接更改傳入的ImageData像素數據)。
function convolutionMatrix(id, w, h, matrix, divisor, offset) {
/// <summary>計算卷積矩陣</summary>
/// <param name="input" type="ImageData">像素數據</param>
/// <param name="w" type="Number">圖像區域寬度</param>
/// <param name="h" type="Number">圖像區域高度</param>
/// <param name="matrix" type="Array">矩陣</param>
/// <param name="divisor" type="Number">除數</param>
/// <param name="offset" type="Number">偏移量</param>
// 拷貝一份源數據
var bd = new Uint8Array(id);
var m = matrix;
var cp = 0;
var wb = (w << 2);
// 對除了邊緣的點之外的內部點的 RGB 進行操作
for (var y = 1; y < h - 1; y += 1) {
for (var x = 1; x < w - 1; x += 1) {
cp = ((y * w + x) << 2);
// 如果爲全透明則跳過該像素
if (id[cp + 3] == 0) continue;
// 進行計算
for (var c = 0; c < 3; c += 1) {
var i = cp + c;
id[i] = offset
+ (m[0] * bd[i - wb - 4] + m[1] * bd[i - wb] + m[2] * bd[i - wb + 4]
+ m[3] * bd[i - 4] + m[4] * bd[i] + m[5] * bd[i + 4]
+ m[6] * bd[i + wb - 4] + m[7] * bd[i + wb] + m[8] * bd[i + wb + 4])
/ divisor;
}
id[cp + 3] = bd[cp + 3];
}
}
}
黑白效果濾鏡,這個效果有很多種寫法,這裏列舉2個,請你自己體會一下……:
function desaturate(data) {
/// <summary>黑白效果(權值法)</summary>
/// <param name="data" type="ImageData">像素數據</param>
var i = data.length;
while ((i -= 4) > 0) {
data[i] = data[i + 1] = data[i + 2] = (data[i] * 0.299 + data[i + i] * 0.587 +data[i + 2] * 0.114);
}
}
function desaturate(data) {
/// <summary>黑白效果(平均值法)</summary>
/// <param name="data" type="ImageData">像素數據</param>
var i = data.length;
while ((i -= 4) > 0) {
data[i] = data[i + 1] = data[i + 2] = (data[i] + data[i + i] +data[i + 2]) / 3;
}
}
效果(求權值法):反色效果濾鏡:
function inverse(data) {
/// <summary>反色效果</summary>
/// <param name="data" type="ImageData">像素數據</param>
var i = data.length;
var ff = 0xff;
while ((i -= 4) > 0) {
data[i] ^= ff;
data[i + 1] ^= ff;
data[i + 2] ^= ff;
}
}
以上代碼中的 data[i] ^= ff; 也就是 data[i] ^= 0xff; 可以翻譯爲 data[i] ^= 255; 繼續翻譯 data[i] = 255 - data[i];。請自己體會……
效果:
接下來的方法就要使用卷積矩陣了,因此我只寫矩陣、除數和偏移量三個參數。
模糊效果濾鏡:
[0, 1, 0,
1, 1, 1,
0, 1, 0]
除數:5
偏移量:0
效果:
增加對比度濾鏡:
[0, 0, 0,
0, 2, 0,
0, 0, 0]
除數:1
偏移量:-255
效果:
浮雕效果濾鏡:
[1, 1, 1,
1, .9, -1,
-1, -1, -1]
除數:1
偏移量:0
效果:
銳化效果濾鏡:
[0, -1, 0,
-1, 5, -1,
0, -1, 0]
除數:1
偏移量:0
效果:
嘛~很簡單吧。
有什麼問題的話~請評論留言吧!