javascript - Bagaimana untuk menukar warna bahan menggunakan Kanvas?

Question

Saya melihat soalan dalam Zhihu tentang menggunakan roda warna untuk menukar warna aksara Berikut ialah pautan
Gambar yang memetik soalan

.

Watak-watak di dalamnya hanya mempunyai pakaian yang berbeza, tetapi warna kulit adalah sama Artikel asal menyebut bahawa palet warna digunakan untuk mencapainya, tetapi terlalu profesional untuk memahami dengan jelas palet untuk menukar warna tempatan bahan? Terima kasih banyak~

Supplement:
Gambar ini diproses dengan GameMaker Adakah Canvas mempunyai cara untuk memproses gambar sedemikian?

Answer 1

Oleh kerana ingatan kartrij awal adalah terhad, jika anda menyimpan gambar secara terus, kartrij boleh diisi dengan hanya gambar watak. Oleh kerana peta bit terdiri daripada peta bit, setiap titik (iaitu, setiap piksel) mempunyai warnanya sendiri. Pada mesin kaset awal, tidak banyak warna yang tersedia, jadi terdapat roda warna. (Mereka yang sering menggunakan PS harus tahu roda warna.) Iaitu, semua nombor warna yang digunakan dalam gambar disimpan ke dalam roda warna dengan kapasiti terkawal (seperti gambar kod QR tradisional, sebenarnya, asalkan Simpan sahaja dua warna). Kemudian apabila menyimpan gambar, storan asal dot matriks yang sepadan perlu merekodkan nilai saluran merah, hijau dan biru Selepas menggunakan roda warna, warna yang sepadan terus digantikan dengan nombor siri dalam roda warna. Ini kerana ruang penyimpanan nombor siri lebih besar daripada data merah, hijau dan biru Ia menggunakan lebih sedikit ruang, dan roda warna boleh digunakan semula (selagi warna yang sepadan wujud dalam roda warna. warna boleh digantikan dengan nombor siri), jadi ia secara tidak langsung menjimatkan ruang pada kaset.

Memandangkan hanya nombor siri dalam roda warna disimpan semasa penyimpanan, selagi warna nombor siri yang sepadan dalam roda warna ditukar, warna nombor siri yang sepadan dalam gambar boleh ditukar.

Memandangkan Kanvas penuh dengan warna sebenar, dan kerana perkembangan pesat storan komputer, ruang storan komputer kini jauh berkurangan berbanding sebelum ini pada kaset, jadi tiada roda warna dalam Kanvas. Walau bagaimanapun, selepas mengetahui prinsip roda warna, anda sebenarnya boleh memikirkan penyelesaian untuk mensimulasikan roda warna. Oleh kerana roda warna menggunakan nombor untuk menggantikan warna, maksudnya, menggantikan warna dalam roda warna menggantikan semua kawasan dalam gambar dengan nilai warna yang sama dengan warna itu. Jadi mengikut idea ini, apa yang anda perlu lakukan adalah untuk menggantikan semua warna dalam gambar yang nilai warnanya sama dengan nilai tertentu Saya tidak akan menulis kod secara terperinci Ini adalah pautan, dengan harapan mendapat inspirasi: http://www .deanhan.cn/canvas-...

Selain itu, penyelesaian penggantian cakera pengecatan agak mudah untuk imej 8-bit permainan kartrij sebelumnya kerana perbezaan warna yang besar; tetapi untuk bitmap warna sebenar yang sedia ada, ini adalah lebih sukar, kerana peta bit semasa Ia sangat berkemungkinan akan terdapat kecerunan warna dengan perbezaan yang sangat sedikit, seperti

, yang tidak sesuai untuk menggunakan idea cakera lukisan. #dedede和#dededd

Kemas kini

Mari kita bincangkan tentang perubahan warna untuk gambar warna sebenar semasa Secara amnya, nilai RGB​​ ditukar kepada nilai HSL/HSV, dan kemudian warna ditukar dengan melaraskan nilai H.

Akhirnya tukarkan kembali kepada nilai RGB Perbezaan antara ini dan di atas ialah warna jenis ini tidak boleh ditukar sahaja untuk keseluruhan imej (melainkan anda mengehadkan kawasan aplikasi transformasi mungkin berubah dalam nilai H. Sesuatu telah berubah.