Pues hay bastantes formas. La más cutre y trabajosa posiblemente sea editar las fotos a mano y cambiarlas cada vez que pinchan en un color.
Yo personalmente cambiaría el color de los píxeles usando el canvas y javascript. Te dejo un código en el que uso los colores para recrear la imagen con etiquetas a las que aplico css en base a los propios colores de cada pixel. En vez de eso puedes editar los colores directamente en la imagen que está sobre el canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OCR</title>
<script>
/* SHORTCUTJS lib by StringManolo.
Use of the global Scope to code faster, reduce file sizes, reduce memory usage and make some code more readable/compact. Readable Version */
(function (){
DEFINE=function(constant, value) {
if(window[constant]===undefined) {
window[constant] = value
} else {
throw new ReferenceError(constant + " is already a property of the global/window Object.\nRedefinition not allowed.");
}
}
wrapQS=function(selector) {
return d.querySelector(selector)
}
wrapQSA=function(selector) {
return d.querySelectorAll(selector)
}
wrapAEL=function(elemnt, event, value) {
elemnt.addEventListener(event, value);
}
wrapDCE=function(element) {
return d.createElement(element);
}
wrapUCOU=function(url) {
return URL.createObjectURL(url)
}
DEFINE("d", window.document);
DEFINE("w", window);
DEFINE("$", wrapQS);
DEFINE("$$", wrapQSA);
DEFINE("dw", d.write);
DEFINE("_", window.alert);
DEFINE("ael", wrapAEL);
DEFINE("dce", wrapDCE);
DEFINE("ucou", URL.createObjectURL);
})();
</script>
</head>
<body>
<canvas id="canv" width="300" height="300"></canvas>
<div id="output"></div>
<!-- <a href="" id="a">click here to download your file</a> -->
<style>
canvas {
background-color: blue;
}
body {
background-color: #000;
font-size: 2px;
}
span {
padding: 0;
letter-spacing: -1;
}
</style>
<script>
/* DOWNLOAD IMAGE CROSSORIGEN: (to avoid tainted canvas) */
const request = fetch("https://cors-anywhere.herokuapp.com/" + prompt("Introduce URL de imagen. Ej: google.com/favicon.ico"));
request.then(function(resp) {
return resp.blob();
}).then(function(blob) {
let img = dce("img");
const blobURL = ucou(blob);
img.src = blobURL;
img.id = "imagen";
d.body.append(img);
_("Imagen añadida");
}).then(function(){
ael($("#imagen"), "load", function(){LIIC()});
}).catch(function(error) {
_("Error: " + error);
})
/* LOAD IMAGE INTO CANVAS */
function LIIC() {
let canvas = $("#canv");
let contexto = canvas.getContext("2d");
let imagen = $("#imagen");
canvas.width = imagen.width;
canvas.height = imagen.height;
contexto.drawImage(imagen,0,0);
SacarPixeles();
/* GET PIXELS IMAGE COLOR AND DRAW A IMAGE */
function SacarPixeles(){
let dataImagen = contexto.getImageData(0,0, canvas.width, canvas.height);
_("Tamaño imagen data: " + dataImagen.data.length);
let pixR =[], pixG =[], pixB =[], pixA =[];
let k = "";
for(var i =0, j =0; i < dataImagen.data.length; i +=4, ++j) {
k += "Colores pixel" +(j+1)+ ": Rojo=" +dataImagen.data[i]+" \nVerde=" +dataImagen.data[i+1]+" \nAzul=" +dataImagen.data[i+2]+" \nAlfa=" +dataImagen.data[i+3]+"\n\n\n";
pixR[j] = dataImagen.data[i].toString(16);
pixG[j] = dataImagen.data[1+i].toString(16);
pixB[j] = dataImagen.data[2+i].toString(16);
pixA[j] = dataImagen.data[3+i].toString(16);
}
performance = d.createDocumentFragment();
for(var i=0; i < pixR.length; ++i) {
var tdiv=dce("b");
var tbr=dce("br");
if(i % canvas.width == 0) {
performance.appendChild(tbr);
}
/*
░▒▓█
*/
tdiv.innerHTML = "▓";
tdiv.style.color = "#"+pixR[i]+""+pixG[i]+""+pixB[i]+""+pixA[i]+"";
performance.appendChild(tdiv);
}
_("Escribiendo...");
$("#output").appendChild(performance);
_("Imagen percorrida");
_(k);
k = "";
}
}
</script>
</body>
</html>