jQuery: hay una forma de aplicar color (tinte) a una imagen?

Question

hay una manera de colorear (aplicar tinte) una imagen usando jQ o algunos enchufes? gracias

Answer 1

Como ya se ha mencionado en Dynamically changing image colours

echar un vistazo a Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

o PaintbrushJS (color de la tinta)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

Answer 2

La manera más simple en que puedo pensar es sobreponiendo un div semitransparente sobre la imagen.

Un pequeño ejemplo:

HTML

<div id="overlay" class="overlay"></div> 
<img id="myimg" src="img.jpg" /> 

CSS

.overlay 
    { 
    display: block; 
    position: absolute; 
    background-color: rgba(200, 100, 100, 0.5); 
    top: 0px; 
    left: 0px; 
    width: 0px; 
    height: 0px; 
    } 

JS (con jQuery)

overlay = $("#overlay"); 
img = $("#myimg"); 
overlay.width(img.css("width")); 
overlay.height(img.css("height")); 
overlay.css("top", img.offset().top + "px"); 
overlay.css("left", img.offset().left + "px"); 

Answer 3

No estoy seguro de si está utilizando PHP, pero no es posible con JavaScript/jQuery. Con PHP, puede usar la biblioteca de imágenes GD para matizar la imagen antes de enviarla al cliente. This thread debería ayudar :-)

También, this forum thread habla de ImageMagick para matizar la imagen también.

Lo siento mucho si no usa/no puede usar PHP, sin embargo, JavaScript no puede hacer lo que quiera.

James

Answer 4

respuesta de Nico es grande si usted está después de un simple matiz de un color - sin embargo, si usted está hablando de desaturar una imagen y luego la aplicación de un tinte (por lo que la imagen es solamente en verde, por ejemplo), entonces puede echar un vistazo a la manipulación de imágenes con <canvas>

Después de algunas google, me encontré con esta biblioteca de lienzo que se centra en las operaciones de manipulación de la foto: https://github.com/meltingice/CamanJS