介绍
这是一个很酷的jQuery插件,基于著名的电影《黑客帝国》。 好吧,这很简单。 该插件模仿影片本身中带有数字事物效果的果岭,选择将要变成它的图像并开始进行修改。 您应该尝试一下,这很有趣!
它是如何工作的?
将图像加载到画布中时,可以先读取像素,然后读取颜色:
data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data
令人兴奋的部分是,可以读取图像的矩形,jQuery使用它来计算图像每个部分的平均颜色。 然后,该颜色将由替换图像部分像素的字符使用。
//get a portion of image
data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data;
var r_avg = 0, g_avg = 0, b_avg = 0;
//sum all channels values
for (var i = 0; i < data.length; i += 4) {
r_avg += data[i];
g_avg += data[i + 1];
b_avg += data[i + 2];
}
//calculate average color for each channel
r_avg = Math.round(r_avg / (data.length / 4));
g_avg = Math.round(g_avg / (data.length / 4));
b_avg = Math.round(b_avg / (data.length / 4));
它将生成许多B标签,每个B标签中都包含字符:
var block = document.createElement("b");
jQuery(matrix_cont).append(block);
var r = image_colors[i].r;
var g = image_colors[i].g;
var b = image_colors[i].b;
block.innerHTML = getChar(r, g, b);
switch (settings.colors) {
case "bn":
var gray = Math.round((r + g + b) / 3);
jQuery(block).css("color", "rgb(" + gray + "," + gray + "," + gray + ")");
break;
case "green":
jQuery(block).css("color", "rgb(0," + g + ",0)");
break;
case "all":
default:
jQuery(block).css("color", "rgb(" + r + "," + g + "," + b + ")");
break;
}
认识角色
第一个字符代表深色,最后一个字符代表浅色。
chars: ['.', '¸', '¹', '`', '*', '_', '°', 'ª', '^', '+', '±', '¢', '®', '"', 'υ',
'»', '½', '¾', 'h', 'e', '8', 's', 'p', '=', '/', '$', '§', 'ξ', 'u', '6', '9',
'5', 'y', 'j', 'd', 'q', 'H', 'ç', 'B', 'V', '8', 'Z', 'W', 'S',
'%', 'e', 'n', 'm', '&', 'à', 'ω', 'Ψ', 'o', '#', 'k', '●', '♦', '♥']
如何使用
将这些代码包括在您的head标签中。
并使用此激活它。
$(function () { $("img").matrix(); });