kesan matriks jQuery

Bawa Kesan Khas Movie Matrix ke laman web anda! Ini adalah plugin jQuery yang sejuk berdasarkan filem terkenal "The Matrix". Plugin mensimulasikan kesan aksara hijau klasik dalam filem, dan hanya pilih gambar dan plugin akan mengubahnya menjadi gambar gaya matriks yang diisi dengan aksara angka. Datang dan cuba, sangat menarik!

Prinsip kerja

plugin memuat gambar ke kanvas dan membaca nilai piksel dan warna:

data =  ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data

Plugin dengan bijak membaca kawasan segi empat tepat gambar dan menggunakan jQuery untuk mengira warna purata setiap kawasan. Kemudian, gantikan piksel kawasan imej dengan aksara untuk mencapai kesan matriks.

// 获取图片的一部分
data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data;
var r_avg = 0, g_avg = 0, b_avg = 0;

// 计算每个通道的总和
for (var i = 0; i < data.length; i += 4) {
    r_avg += data[i];
    g_avg += data[i + 1];
    b_avg += data[i + 2];
}

// 计算每个通道的平均颜色
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));

plugin menghasilkan banyak

tag, masing -masing mengandungi watak: <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;
}

Pemilihan aksara:

Warna gelap menggunakan watak depan, dan warna yang lebih cerah menggunakan aksara belakang.

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', '●', '♦', '♥']

Cara menggunakan

tambahkan kod berikut ke dalam

tag:

Aktifkan plugin dengan kod berikut:

$(function () { $("img").matrix(); });

Sumber Kod:

https://www.php.cn/link/90e2217cd253377081205243ac24b03a

Atas ialah kandungan terperinci kesan matriks jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!