jQuery: có cách nào để áp dụng màu (màu) cho hình ảnh?

Question

có cách nào để tô màu (áp dụng màu) một hình ảnh bằng cách sử dụng jQ hoặc một số phích cắm? cảm ơn bạn

Answer 1

Như đã đề cập trong Dynamically changing image colours

hãy nhìn vào Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

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

hoặc PaintbrushJS (màu tint)

https://github.com/mezzoblue/PaintbrushJS

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

Answer 2

Cách đơn giản nhất tôi có thể nghĩ đến là xếp chồng div bán trong suốt trên hình ảnh.

Một ví dụ nhỏ:

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 (với 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

Tôi không chắc chắn nếu bạn đang sử dụng PHP, nhưng nó không thể với JavaScript/jQuery. Với PHP, bạn có thể sử dụng thư viện hình ảnh GD để tô màu hình ảnh trước khi nó được gửi cho khách hàng. This thread sẽ giúp :-)

Ngoài ra, this forum thread nói về ImageMagick để tô màu hình ảnh.

Tôi rất tiếc nếu bạn không/không thể sử dụng PHP, tuy nhiên JavaScript không thể làm những gì bạn muốn.

James

Answer 4

câu trả lời nico là tuyệt vời nếu bạn đang theo đuổi một ánh đơn giản của một màu - tuy nhiên, nếu bạn đang nói về desaturating một hình ảnh và sau đó áp dụng một màu (vì vậy mà hình ảnh duy nhất là màu xanh lá cây chẳng hạn) thì bạn có thể có một cái nhìn tại xử lý ảnh với <canvas>

Sau khi một số googling, tôi thấy thư viện này cho vải mà tập trung vào các hoạt động thao tác hình ảnh: https://github.com/meltingice/CamanJS