เกริ่นนำ
องค์ประกอบ Canvas ของ HTML5 สามารถใช้ในการเขียนตัวกรองรูปภาพได้ สิ่งที่คุณต้องทำคือการวาดภาพบนผืนผ้าใบ อ่านพิกเซลของ Canvas อีกครั้ง และเรียกใช้ตัวกรองบนรูปภาพเหล่านั้น จากนั้น คุณสามารถเขียนผลลัพธ์ลงในผืนผ้าใบใหม่ (หรือจะใช้ของเก่าก็ได้)
ฟังดูง่ายใช่ไหม เก่งจัง เริ่มต้นแคร็ก!
กำลังประมวลผลพิกเซล
ก่อนอื่น ให้ดึงพิกเซลรูปภาพโดยทำดังนี้
Filters = {};
Filters.getPixels = function(img) {
var c = this.getCanvas(img.width, img.height);
var ctx = c.getContext('2d');
ctx.drawImage(img);
return ctx.getImageData(0,0,c.width,c.height);
};
Filters.getCanvas = function(w,h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
};
ต่อไปเราต้องมีวิธีกรองรูปภาพ ลองใช้เมธอด filterImage
ที่นำตัวกรองและรูปภาพมาคืนค่าพิกเซลที่กรองแล้วไหม
Filters.filterImage = function(filter, image, var_args) {
var args = [this.getPixels(image)];
for (var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
return filter.apply(null, args);
};
การเรียกใช้ตัวกรองแบบง่าย
ตอนนี้เราได้รวมไปป์ไลน์การประมวลผลพิกเซลไว้ด้วยกันแล้ว ต่อไปก็ถึงเวลาเขียนตัวกรองง่ายๆ ก่อนอื่น เรามาแปลงรูปภาพเป็นโทนสีเทากัน
Filters.grayscale = function(pixels, args) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
การปรับความสว่างนั้นทำได้โดยการเพิ่มค่าคงที่ลงในพิกเซล ดังนี้
Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};
การกำหนดเกณฑ์รูปภาพก็ทำได้ง่ายดายเช่นกัน เพียงเปรียบเทียบค่าโทนสีเทาของพิกเซลกับค่าเกณฑ์ แล้วกำหนดสีตามค่าที่ระบุ
Filters.threshold = function(pixels, threshold) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};
การแปลงรูปภาพ
ตัวกรองคอนโวลูชันเป็นตัวกรองทั่วไปที่มีประโยชน์อย่างยิ่งสำหรับการประมวลผลรูปภาพ แนวคิดพื้นฐานคือคุณนำผลรวมถ่วงน้ำหนักของสี่เหลี่ยมผืนผ้าของพิกเซลจากรูปภาพต้นฉบับมาใช้เป็นค่าเอาต์พุต ฟิลเตอร์คอนโวลูชันสามารถใช้ในการเบลอ เพิ่มความคมชัด ทำให้นูนขึ้น ตรวจจับขอบ และอื่นๆ อีกมากมาย
Filters.tmpCanvas = document.createElement('canvas');
Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
Filters.createImageData = function(w,h) {
return this.tmpCtx.createImageData(w,h);
};
Filters.convolute = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
// pad output by the convolution matrix
var w = sw;
var h = sh;
var output = Filters.createImageData(w, h);
var dst = output.data;
// go through the destination image pixels
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
var sy = y;
var sx = x;
var dstOff = (y*w+x)*4;
// calculate the weighed sum of the source image pixels that
// fall under the convolution matrix
var r=0, g=0, b=0, a=0;
for (var cy=0; cy<side; cy++) {
for (var cx=0; cx<side; cx++) {
var scy = sy + cy - halfSide;
var scx = sx + cx - halfSide;
if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
var srcOff = (scy*sw+scx)*4;
var wt = weights[cy*side+cx];
r += src[srcOff] * wt;
g += src[srcOff+1] * wt;
b += src[srcOff+2] * wt;
a += src[srcOff+3] * wt;
}
}
}
dst[dstOff] = r;
dst[dstOff+1] = g;
dst[dstOff+2] = b;
dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};
นี่คือฟิลเตอร์คมชัดขนาด 3x3 ดูว่ากล้องโฟกัสที่พิกเซลตรงกลางอย่างไร เพื่อรักษาความสว่างของรูปภาพ ผลรวมของค่าเมทริกซ์ควรเป็น 1
Filters.filterImage(Filters.convolute, image,
[ 0, -1, 0,
-1, 5, -1,
0, -1, 0 ]
);
นี่เป็นอีกตัวอย่างหนึ่งของฟิลเตอร์ Convolution ซึ่งก็คือการเบลอกล่อง การเบลอกล่องจะแสดงผลค่าเฉลี่ยของค่าพิกเซลภายในเมทริกซ์คอนโวลูชัน วิธีการคือสร้างเมทริกซ์คอนโวลูชันขนาด NxN โดยที่น้ำหนักแต่ละค่ามีค่าเป็น 1 / (NxN) วิธีนี้จะช่วยให้พิกเซลแต่ละพิกเซลในเมทริกซ์มีสัดส่วนเท่ากับรูปภาพเอาต์พุต และผลรวมของน้ำหนักจะเท่ากับ 1
Filters.filterImage(Filters.convolute, image,
[ 1/9, 1/9, 1/9,
1/9, 1/9, 1/9,
1/9, 1/9, 1/9 ]
);
เราสามารถสร้างตัวกรองรูปภาพที่ซับซ้อนยิ่งขึ้นได้โดยรวมตัวกรองที่มีอยู่แล้วเข้าด้วยกัน ตัวอย่างเช่น ลองเขียนตัวกรอง Sobel ฟิลเตอร์ Sobel จะคำนวณการไล่ระดับสีในแนวตั้งและแนวนอนของรูปภาพและรวมรูปภาพที่คำนวณแล้วเพื่อค้นหาขอบในรูปภาพ วิธีที่เราใช้ฟิลเตอร์ Sobel ที่นี่คือโดยการปรับสเกลภาพให้เป็นสีเทาก่อน จากนั้นจึงนำการไล่ระดับสีแนวนอนและแนวตั้งมารวมภาพแบบไล่ระดับสีให้เป็นภาพสุดท้าย
สำหรับคำศัพท์ "การไล่ระดับสี" ในที่นี้หมายถึงการเปลี่ยนแปลงค่าพิกเซลที่ตำแหน่งรูปภาพ หากพิกเซลมีข้างเคียงด้านซ้ายที่มีค่า 20 และเพื่อนบ้านด้านขวาที่มีค่า 50 การไล่ระดับสีในแนวนอนที่พิกเซลจะเท่ากับ 30 การไล่ระดับสีแนวตั้งมีแนวคิดแบบเดียวกัน แต่ใช้สีข้างบนและด้านล่าง
var grayscale = Filters.filterImage(Filter.grayscale, image);
// Note that ImageData values are clamped between 0 and 255, so we need
// to use a Float32Array for the gradient values because they
// range between -255 and 255.
var vertical = Filters.convoluteFloat32(grayscale,
[ -1, 0, 1,
-2, 0, 2,
-1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
[ -1, -2, -1,
0, 0, 0,
1, 2, 1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4) {
// make the vertical gradient red
var v = Math.abs(vertical.data[i]);
final_image.data[i] = v;
// make the horizontal gradient green
var h = Math.abs(horizontal.data[i]);
final_image.data[i+1] = h;
// and mix in some blue for aesthetics
final_image.data[i+2] = (v+h)/4;
final_image.data[i+3] = 255; // opaque alpha
}
และยังมีตัวกรองคอนโวลูชันสุดเจ๋งอื่นๆ อีกมากมาย ที่รอให้คุณค้นพบ เช่น ลองใช้ตัวกรอง Laplace ในของเล่น Convolution ด้านบนแล้วดูว่าใช้ทำอะไร
บทสรุป
หวังว่าบทความเล็กๆ นี้จะเป็นประโยชน์ในการแนะนำแนวคิดเบื้องต้น ในการเขียนตัวกรองรูปภาพใน JavaScript โดยใช้แท็ก Canvas HTML ขอแนะนำให้ ใช้ตัวกรองรูปภาพเพิ่มเติม สนุกสุดๆ ไปเลย!
หากคุณต้องการประสิทธิภาพที่ดีขึ้นจากตัวกรอง คุณมักจะส่ง ให้ตัวกรองเหล่านั้นใช้ตัวปรับแสงเงาส่วน WebGL เพื่อประมวลผลรูปภาพได้ ตัวปรับเฉดสีช่วยให้คุณสามารถเรียกใช้ตัวกรองพื้นฐานส่วนใหญ่ได้ในแบบเรียลไทม์ ซึ่งทำให้สามารถใช้ฟิลเตอร์เหล่านั้นสำหรับวิดีโอและภาพเคลื่อนไหวหลังการประมวลผล