التعليق: هذا تأثير لمحاكاة تأثير جزيئات البقعة عند تصوير شاشات التلفزيون بواسطة الكاميرا. يمكن للأصدقاء المهتمين بالبحث تجربة المزيد من الآثار. لم يتم تحسين الكود ، إنه مجرد عرض تقريبي. يمكن للأصدقاء الذين يحبون ذلك دراستها.
هذا تأثير خاص مثير للاهتمام للغاية ، والذي يحاكي تأثير الجسيمات التي تشبه النقطة التي تظهر عندما تطلق الكاميرا شاشة التلفزيون. يتم تحقيق حجم الجسيمات من خلال مصفوفة التحول ويمكن تعديلها بشكل تعسفي. يمكن للأصدقاء المهتمين بالبحث تجربة المزيد من الآثار. لم يتم تحسين الكود ، إنه مجرد عرض تقريبي ، يمكن للجميع تحسينه بمفردهم.1. الحصول على بيانات الصورة
img.src = '' ؛
canvas.width = img.width ؛
canvas.height = img.hight ؛
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 pattern = 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 index = 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 ؛ // قناة ألفا
// إضافة الحدود السوداء
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