ความคิดเห็น: นี่เป็นผลของการจำลองผลกระทบของอนุภาคสปอตเมื่อถ่ายภาพหน้าจอทีวีด้วยกล้อง เพื่อนที่มีความสนใจในการวิจัยสามารถลองใช้ผลมากขึ้น รหัสไม่ได้รับการปรับให้เหมาะสมมันเป็นเพียงการสาธิตคร่าวๆ เพื่อนที่ชอบมันสามารถศึกษาได้
นี่เป็นเอฟเฟกต์พิเศษที่น่าสนใจมากซึ่งจำลองเอฟเฟกต์ของอนุภาคเหมือนจุดที่ปรากฏขึ้นเมื่อกล้องถ่ายภาพหน้าจอทีวี ขนาดของอนุภาคถูกรับรู้ผ่านเมทริกซ์การเปลี่ยนแปลงและสามารถปรับได้โดยพลการ เพื่อนที่มีความสนใจในการวิจัยสามารถลองใช้ผลมากขึ้น รหัสไม่ได้รับการปรับให้เหมาะสมมันเป็นเพียงการสาธิตคร่าวๆซึ่งทุกคนสามารถปรับปรุงได้ด้วยตนเอง1. รับข้อมูลภาพ
img.src = '';
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext (2d);
Context.DrawImage (IMG, 0, 0);
var canvasdata = context.getimagedata (0, 0, Canvas.width, Canvas.height);
2. ตั้งเมทริกซ์ตัวกรอง
var m_videotype = 0;
รูปแบบ var = new Array ();
สวิตช์ (m_videotype)
-
case0: //video_type.video_staggered:
-
รูปแบบ = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
ยี่สิบเอ็ด
-
หยุดพัก;
-
CASE1: //VIDEO_TYPE.VIDEO_TRIPED:
-
รูปแบบ = [
0,
1,
2,
-
หยุดพัก;
-
CASE2: //VIDEO_TYPE.VIDEO_3X3:
-
รูปแบบ =
-
0, 1, 2,
2, 0, 1,
1, 2, 0,
-
หยุดพัก;
-
ค่าเริ่มต้น:
-
รูปแบบ =
-
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1, 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1,
1, 2, 2, 2, 0,
-
หยุดพัก;
-
-
var pattern_width = [2, 1, 3, 5];
var pattern_height = [6, 3, 3, 15];
3. รับข้อมูลที่กรอง
สำหรับ (var x = 0; x <canvasdata.width; x ++) {
สำหรับ (var y = 0; y <canvasdata.height; y ++) {
// ดัชนีของพิกเซลในอาร์เรย์
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
var nwidth = pattern_width [m_videotype];
var nheight = pattern_height [m_videotype];
ดัชนี var = nwidth * (y % nheight) + (x % nwidth);
ดัชนี = รูปแบบ [ดัชนี];
ถ้า (ดัชนี == 0)
var r = fclamp0255 (2 * r);
ถ้า (ดัชนี == 1)
var g = fclamp0255 (2 * g);
ถ้า (ดัชนี == 2)
var b = fclamp0255 (2 * b);
// กำหนดค่าสเกลสีเทา
canvasdata.data [idx + 0] = r; // ช่องสีแดง
canvasdata.data [idx + 1] = g; // ช่องสีเขียว
canvasdata.data [idx + 2] = b; // ช่องสีน้ำเงิน
canvasdata.data [idx + 3] = 255; // Alpha Channel
// เพิ่มเส้นขอบสีดำ
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
-
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
-
-
-
4. เขียนข้อมูลที่กรอง
Context.putimagedata (Canvasdata, 0, 0);
5. วัสดุอ้างอิง
Dai Zhenjun ImageFilter Open Source Project