jquery - jQuery:画像に色(色合い)を適用する方法はありますか?

Question

jQまたはいくつかのプラグを使用して画像に色を付ける(色合いを適用する)方法はありますか? ありがとうございました

Answer 1

私が考えることができる最も簡単な方法は、半透明の div を画像の上に重ねることです。

ちょっとした例:

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 (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 2

動的に変化する画像の色ですでに述べたように

Pixastic（coloradjust）を見てください

https://github.com/jseidelin/pixastic

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

またはPaintbrushJS（色合い）

https://github.com/mezzoblue/PaintbrushJS

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

Answer 3

ニコの答えは、色の単純な色合いを求めている場合に最適です-ただし、画像の彩度を下げてから色合いを適用することについて話している場合（たとえば、画像が緑色のみになるように）、見てみることができます画像操作で<canvas>

グーグルで調べた後、写真操作操作に焦点を当てたキャンバス用のこのライブラリを見つけました: https://github.com/meltingice/CamanJS

Answer 4

PHP を使用しているかどうかはわかりませんが、JavaScript/jQuery では使用できません。PHP では、GD 画像ライブラリを使用して、画像をクライアントに送信する前に色合いを付けることができます。このスレッドが役立つはずです:-)

また、このフォーラム スレッドでは、画像に色を付ける ImageMagick についても説明しています。

PHP を使用していない、または使用できない場合は大変申し訳ありませんが、JavaScript ではご希望の処理ができません。

ジェームズ