Cómo cambiar el color de una imagen usando jquery

Question

Antes que nada, lamento la estúpida pregunta que voy a hacer. Tengo una imagen de una taza. Cuando un usuario elige un código de color del selector de color, quiero cambiar el color de la taza a ese color.

¿Podría darme amablemente una pista sobre cómo hacer esto con jquery? Estoy planeando lograr esto usando PHP y Jquery.

Gracias de antemano :)

PS Se me acaba de ocurrir que no es posible cambiar el color de un objeto utilizando un selector de color si está en un formato de imagen, pero todavía no llegaron a ser una manera de lograr esto. ¿Podrías por favor amablemente sugerirme algo?

Answer 1

Bien, primer paso, en lugar de usar el formato jpeg, vas a usar PNG para que puedas tener áreas transparentes en la imagen.

Ábralo en un editor de imágenes y recorte todas las áreas en blanco de la imagen, dejando la taza con un contorno transparente. De esta manera:

No vamos a usar jQuery aquí porque sinceramente no sé nada de él, así que no puedo ayudarte con eso, en lugar vamos a utilizar directamente el API de canvas de HTML 5 (esto significa que su aplicación no funcionará en navegadores más antiguos)

Aquí realizaremos una multiplicación de color por píxel, ya que su taza está en escala de grises y lo hará por nosotros.

Vamos a elegir una matriz que contenga toda la información de color de los píxeles.

1. Añadir la imagen a la DOM
2. Crear un elemento de lona fuera de la pantalla
3. Espere a que se cargue la imagen
4. dibujar la imagen en el lienzo

5. obtener los datos de píxeles mediante el getImagedata método, dentro del evento onload de la imagen

   < * img src = "mug.png" id = "" width = "taza 25%" height = "25%" onload = "getPixels (este)"/>

   var mug = document.getElementById("mug"); 
   var canvas = document.createElement("canvas"); 
   var ctx = canvas.getContext("2d"); 
   var originalPixels = null; 
   var currentPixels = null; 
   
   function getPixels(img) 
   { 
       canvas.width = img.width; 
       canvas.height = img.height; 
   
       ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height); 
       originalPixels = ctx.getImageData(0, 0, img.width, img.height); 
       currentPixels = ctx.getImageData(0, 0, img.width, img.height); 
   
       img.onload = null; 
   } 
   

Necesitamos el color del selector de colores para estar en el formato RGB, no hexagonal, a fin de utilizar esta función en caso de que su selector devuelve un valor hexadecimal para convertirlo:

function hexToRGB(hex) 
{ 
    var long = parseInt(hex.replace(/^#/, ""), 16); 
    return { 
     R: (long >>> 16) & 0xff, 
     G: (long >>> 8) & 0xff, 
     B: long & 0xff 
    }; 
} 

Ahora aquí es la parte mágica, vamos a recorrer los datos de píxeles y se multiplica con el color de el selector de color.

en mi guión no hay selector de color, Acabo de crear una entrada de texto simple a escribir en el color hexadecimal, esta función a continuación es el evento onclick de un botón de entrada

function changeColor() 
    { 
     if(!originalPixels) return; // Check if image has loaded 
     var newColor = hexToRGB(document.getElementById("color").value); 

     for(var I = 0, L = originalPixels.data.length; I < L; I += 4) 
     { 
      if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel 
      { 
       currentPixels.data[I] = originalPixels.data[I]/255 * newColor.R; 
       currentPixels.data[I + 1] = originalPixels.data[I + 1]/255 * newColor.G; 
       currentPixels.data[I + 2] = originalPixels.data[I + 2]/255 * newColor.B; 
      } 
     } 

     ctx.putImageData(currentPixels, 0, 0); 
     mug.src = canvas.toDataURL("image/png"); 
    } 

Sede, el truco es:

• obtener el color original del píxel
• convertirlo de rango 0-255 a 0-1
• Multiplicar al nuevo color que usted quiere que sea.

Se puede ver que funcione aquí: http://users7.jabry.com/overlord/mug.html

• Estoy seguro de que funciona al menos en Firefox y Chrome.

• El contorno de la taza no se ve bien, es porque acabo de hacer una rápida "varita mágica" en photoshop, puede hacer algo mejor más adelante.

Answer 2

Puede utilizar una imagen de una taza con áreas transparentes, darle un fondo y cambiar el color del fondo según sea necesario. cssTricks

Aquí hay un ejemplo básico, jsFiddle, usando Farbtastic Color Picker.

$('#colorpicker').farbtastic(function(color){ 
    $('img').css("background-color",color); 
});​ 

Answer 3

Puede superponer un .png totalmente posicionado con un índice Z mayor que la imagen base de la taza. La superposición sería la taza de color y podría tener el fondo fuera de lugar si es necesario. Cambie la superposición según sea necesario a través de un controlador de eventos: ¿quizás agregue/elimine una clase?

Answer 4

Debe utilizar "Product Colorizer" de Nik Korablin. Admite uno o dos colores, y es simple de configurar.