jQuery: il existe un moyen d'appliquer la couleur (teinte) à une image?

StackOverflow https://stackoverflow.com/questions/4416007

  •  08-10-2019
  •  | 
  •  

Question

il y a un moyen de couleur (appliquer la teinte) une image en utilisant jQ ou des bouchons? merci

Autres conseils

façon plus simple que je peux penser est une superposant div semi-transparent sur l'image.

Un petit exemple:

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 (avec 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");

La réponse de nico est grande si vous êtes après une teinte simple d'une couleur - cependant, si vous parlez désaturer une image et puis appliquer une teinte (de sorte que l'image est seulement vert par exemple), vous pouvez jeter un oeil à la manipulation d'images avec <canvas>

Après quelques recherches sur Google, je trouve cette bibliothèque pour toile qui se concentre sur les opérations de manipulation de photos: https://github.com / meltingice / CamanJS

Je ne suis pas sûr si vous utilisez PHP, mais il est impossible avec JavaScript / JQuery. Avec PHP, vous pouvez utiliser la bibliothèque d'images de GD pour teinter l'image avant qu'il ne soit envoyé au client. Ce fil devrait aider: -)

En outre, les discussions de ce fil de discussion sur ImageMagick pour tinter la image ainsi.

Je suis désolé si vous n'êtes pas / ne peut pas utiliser PHP, JavaScript ne peut cependant ce que vous voulez.

James

Non affilié à StackOverflow
scroll top