¿Como cambian el color de una imagen?

SrTrp · 2 Mayo 2020, 07:54 AM

Hola que tal estoy pensando hacer una sección como de avatar quisiera saber como es que algunas paginas logran eso, por ejemplo esta imagen que les dejo abajo hacer 3 colores para cada cabello osea solo se podrian elegir 3 meter 3 imagenes(color el original, blanco y amarillo) y de igual forma para la playera, pero estas paginas que les menciono tienen una paleta de colores y se crea una imagen a decision de la tonalidad y eso, como es que esto es posible? se puede jugar con la sataración de cada imagen? para lograr eso.

Tengo pensado dividir así cada personaje
1.-Rostro
2.-Cabello
3.-Playera

@XSStringManolo · 2 Mayo 2020, 09:08 AM

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 (javascript) [Seleccionar]

<!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>

[u]nsigned · 2 Mayo 2020, 19:08 PM

Otra forma, de ser posible, seria usando SVG para las imágenes, que es manipulable desde js como de la misma forma que el DOM.

Dicho a groso modo, SVG es a la imágenes lo que HTML es al texto.

https://maismedia.com/blog/tutoriales/guia-practica-svg-web/

Test Foro de elhacker.net SMF 2.1

¿Como cambian el color de una imagen?

SrTrp

@XSStringManolo

[u]nsigned