elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Como cambian el color de una imagen?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Como cambian el color de una imagen?  (Leído 863 veces)
SrTrp

Desconectado Desconectado

Mensajes: 282


Script/C#


Ver Perfil
¿Como cambian el color de una imagen?
« en: 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



En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: ¿Como cambian el color de una imagen?
« Respuesta #1 en: 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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>OCR</title>
  6. <script>
  7. /* SHORTCUTJS lib by StringManolo.
  8. Use of the global Scope to code faster, reduce file sizes, reduce memory usage and make some code more readable/compact. Readable Version */
  9. (function (){
  10. DEFINE=function(constant, value) {
  11. if(window[constant]===undefined) {
  12. window[constant] = value
  13. } else {
  14. throw new ReferenceError(constant + " is already a property of the global/window Object.\nRedefinition not allowed.");
  15. }
  16. }
  17.  
  18.  
  19. wrapQS=function(selector) {
  20. return d.querySelector(selector)
  21. }
  22.  
  23.  
  24. wrapQSA=function(selector) {
  25. return d.querySelectorAll(selector)
  26. }
  27.  
  28.  
  29. wrapAEL=function(elemnt, event, value) {
  30. elemnt.addEventListener(event, value);
  31. }
  32.  
  33.  
  34. wrapDCE=function(element) {
  35. return d.createElement(element);
  36. }
  37.  
  38.  
  39. wrapUCOU=function(url) {
  40. return URL.createObjectURL(url)
  41. }
  42.  
  43.  
  44.  
  45.  
  46. DEFINE("d", window.document);
  47. DEFINE("w", window);
  48. DEFINE("$", wrapQS);
  49. DEFINE("$$", wrapQSA);
  50. DEFINE("dw", d.write);
  51. DEFINE("_", window.alert);
  52. DEFINE("ael", wrapAEL);
  53. DEFINE("dce", wrapDCE);
  54. DEFINE("ucou", URL.createObjectURL);
  55.  
  56.  
  57. })();
  58. </script>
  59. </head>
  60. <body>
  61. <canvas id="canv" width="300" height="300"></canvas>
  62. <div id="output"></div>
  63. <!-- <a href="" id="a">click here to download your file</a> -->
  64. <style>
  65. canvas {
  66. background-color: blue;
  67. }
  68.  
  69.  
  70. body {
  71. background-color: #000;
  72. font-size: 2px;
  73. }
  74.  
  75.  
  76. span {
  77. padding: 0;
  78. letter-spacing: -1;
  79. }
  80.  
  81.  
  82. </style>
  83. <script>
  84. /* DOWNLOAD IMAGE CROSSORIGEN: (to avoid tainted canvas) */
  85. const request = fetch("https://cors-anywhere.herokuapp.com/" + prompt("Introduce URL de imagen. Ej: google.com/favicon.ico"));
  86. request.then(function(resp) {
  87. return resp.blob();
  88. }).then(function(blob) {
  89. let img = dce("img");
  90. const blobURL = ucou(blob);
  91. img.src = blobURL;
  92. img.id = "imagen";
  93. d.body.append(img);
  94. _("Imagen añadida");
  95. }).then(function(){
  96. ael($("#imagen"), "load", function(){LIIC()});
  97. }).catch(function(error) {
  98. _("Error: " + error);
  99. })
  100.  
  101.  
  102.  
  103.  
  104. /* LOAD IMAGE INTO CANVAS */
  105. function LIIC() {
  106. let canvas = $("#canv");
  107.  
  108.  
  109. let contexto = canvas.getContext("2d");
  110. let imagen = $("#imagen");
  111. canvas.width = imagen.width;
  112. canvas.height = imagen.height;
  113. contexto.drawImage(imagen,0,0);
  114.  
  115.  
  116. SacarPixeles();
  117.  
  118.  
  119. /* GET PIXELS IMAGE COLOR AND DRAW A IMAGE */
  120. function SacarPixeles(){
  121. let dataImagen = contexto.getImageData(0,0, canvas.width, canvas.height);
  122. _("Tamaño imagen data: " + dataImagen.data.length);
  123.  
  124.  
  125. let pixR =[], pixG =[], pixB =[], pixA =[];
  126.  
  127.  
  128.  
  129.  
  130. let k = "";
  131. for(var i =0, j =0; i < dataImagen.data.length; i +=4, ++j) {
  132. 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";
  133. pixR[j] = dataImagen.data[i].toString(16);
  134. pixG[j] = dataImagen.data[1+i].toString(16);
  135. pixB[j] = dataImagen.data[2+i].toString(16);
  136. pixA[j] = dataImagen.data[3+i].toString(16);
  137. }
  138.  
  139.  
  140. performance = d.createDocumentFragment();
  141. for(var i=0; i < pixR.length; ++i) {
  142. var tdiv=dce("b");
  143. var tbr=dce("br");
  144. if(i % canvas.width == 0) {
  145. performance.appendChild(tbr);
  146. }
  147. /*
  148. &#9617;&#9618;&#9619;&#9608;
  149. */
  150. tdiv.innerHTML = "&#9619;";
  151. tdiv.style.color = "#"+pixR[i]+""+pixG[i]+""+pixB[i]+""+pixA[i]+"";
  152. performance.appendChild(tdiv);
  153. }
  154. _("Escribiendo...");
  155. $("#output").appendChild(performance);
  156.  
  157.  
  158. _("Imagen percorrida");
  159. _(k);
  160. k = "";
  161. }
  162.  
  163.  
  164.  
  165.  
  166. }
  167.  
  168.  
  169. </script>
  170. </body>
  171. </html>


En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.379

Vue SSr


Ver Perfil WWW
Re: ¿Como cambian el color de una imagen?
« Respuesta #2 en: 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/
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Saber el color de una imagen
Diseño Gráfico
V18s 3 6,577 Último mensaje 15 Enero 2005, 16:56 pm
por Libransser
Buscar un texto o color en una imagen
Programación Visual Basic
demoniox12 3 1,450 Último mensaje 15 Febrero 2008, 01:56 am
por Chefito
COmo pongo de color rojo una parte de imagen sin dañar lo demas.
Diseño Gráfico
Hadess_inf 2 2,118 Último mensaje 10 Marzo 2008, 21:04 pm
por + enrique ZP
Cambiar el color de la imagen en vb6
Programación Visual Basic
AnaCarolina28 1 1,106 Último mensaje 14 Noviembre 2014, 19:47 pm
por DroppleX
Imagen con color involuntario (WTF!?)
Windows
iUDEX 8 2,932 Último mensaje 21 Abril 2015, 07:02 am
por iUDEX
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines