Imprimir Página - ¿Como cambian el color de una imagen?

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.

Código

<!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);
 }
/*
&#9617;&#9618;&#9619;&#9608;
*/
 tdiv.innerHTML = "&#9619;";
 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>

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: SrTrp en 2 Mayo 2020, 07:54 am