Sekeping gambar boleh menyebut seribu perkataan dan menyembunyikan kemahiran tutorial code_html5 program anda

Saya baru-baru ini membangunkan permainan web pertama saya: teka-teki video HTML5. Proses pembangunan adalah menarik Saya suka pengaturcaraan, tetapi selepas melaksanakan logik permainan, saya mempunyai idea yang menarik: Mengapa tidak mencari cara untuk menyembunyikan kod? Pada mulanya saya memikirkan sesuatu yang sangat mudah, seperti melumpuhkan menu konteks supaya kod sumber halaman boleh dilihat apabila mengklik kanan. Tetapi ini tidak masuk akal, menu klik kanan tidak berfungsi dan orang ramai masih boleh melihat kod sumber melalui pintasan papan kekunci atau "Lihat Sumber" dalam bar menu.

Sebuah gambar boleh menyebut seribu perkataan

Ia bergantung pada saiz gambar. Tetapi saya memutuskan untuk menyulitkan kod sumber dan menyimpannya dalam imej. Komponen kanvas HTML5 sangat sesuai untuk perkara seperti ini kerana ia menyokong operasi pada piksel imej. Satu piksel diwakili oleh empat nilai (saluran): saluran merah, hijau, biru dan alfa. Nilai mereka diedarkan dari 0 hingga 255. Kod Javascript saya ialah aksara, dan setiap aksara mempunyai nilai yang sepadan dengan ASCII. Julat nilai ASCII juga adalah 0-255, jadi apa yang saya mahu lakukan ialah melintasi setiap piksel pada kanvas dan menetapkan nilai ASCII bagi 3 aksara kod untuk setiap piksel sebagai nilai RGBnya. Anda boleh melakukannya dengan mudah fungsi charCodeAt keluarkan aksara ini.

Salin kod

Kod tersebut adalah seperti berikut:

.charCodeAt(0)

Apa yang dijana ialah gambar yang berwarna-warni dan kecil. Ia adalah kod program saya. mata, keluarkan aksara yang diwakili oleh nilai r, g, b:

Salin kodKod adalah seperti berikut :

String.fromCharCode(kod)

Sambungkan mereka menjadi satu rentetan besar, dan ini ialah kod anda - kod boleh laku.

Adakah ini melindungi kod sumber anda?
Sebenarnya tidak - pengaturcara yang berpengalaman (atau tidak berpengalaman) masih boleh memikirkan cara untuk menyahkod imej dan mengekstrak kod di dalamnya, tetapi saya fikir ini adalah untuk mengelakkan mereka yang mempunyai niat perniagaan yang buruk Langkah pertama untuk seseorang mencuri kod anda - dan pengaturcara yang boleh memikirkan cara menyahkodnya (kebanyakannya) tidak ada untuk mencuri


Kecacatan utama kaedah ini
Teknologi ini boleh hanya digunakan dalam pelayar moden yang menyokong teknologi kanvas HTML5 Ia pasti tidak akan berfungsi dalam IE6 dan IE8. Malah sesetengah penyemak imbas moden menghadapi masalah dengan pengekodan saluran alfa imej, jadi anda hanya boleh meletakkan 3 aksara setiap piksel - imej 100×100 boleh menyimpan 30,000 aksara teks.
Adakah anda mempunyai cara mudah lain untuk menghalang orang lain daripada menyalin kod anda? Sudah tentu kita boleh menyulitkan aksara, tetapi bagaimana untuk memastikan bahawa langkah penyahsulitan anda tidak boleh dipecahkan dengan mudah? Beritahu saya apa yang anda fikirkan!