JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで画像の明るさとコントラストを設定する方法

JavaScriptで画像の明るさを変更するにはCSSフィルターの brightness プロパティを使用し、コントラストを変更するには contrast プロパティを使用します。これらは要素の style.filter に値を設定することで簡単に適用できます。

基本的な使い方

明るさは brightness(50%) のように指定し、50%なら元の画像より暗く、100%以上を指定すると明るくなります。同様に、コントラストは contrast(50%) のように指定でき、数値が大きいほどコントラストが強調されます。

両方を同時に適用したい場合は、以下のようにスペースで区切って1つのfilterプロパティにまとめて指定します。

element.style.filter = "brightness(50%) contrast(50%)";

サンプルコード

ボタンをクリックすると、画像の明るさとコントラストが変化します。実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
  <body>
    <p>下のボタンをクリックすると、画像の明るさとコントラストが変わります。</p>
    <button onclick="display()">画像を編集</button><br><br>
    <img id="myID" src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg"
      alt="チュートリアルライブラリ" width="320" height="320">
    <script>
      function display() {
        // brightnessとcontrastを1つのfilterにまとめて指定
        document.getElementById("myID").style.filter = "brightness(50%) contrast(50%)";
      }
  </script>
  </body>
</html>

注意点

filterプロパティに値を代入すると、以前に設定したフィルターは上書きされるため、複数の効果を組み合わせたい場合は必ず1つの文字列にまとめて指定してください。また、brightness() や contrast() 以外にも、grayscale()（グレースケール化）や saturate()（彩度調整）など、さまざまなフィルター関数が用意されており、これらも同じ方法で組み合わせて使用できます。

  1. JavaScriptでリスト項目のマーカーに画像を設定する方法

    リスト項目（li要素）のマーカーに画像を設定したい場合は、JavaScriptの listStyleImage プロパティを使用します。このプロパティはCSSの list-style-image に対応しており、通常の黒丸（・）や白丸の代わりに、好きな画像を箇条書きの記号として表示できます。 使い方のポイント listStyleImage プロパティには、url(画像のURL) の形式で値を指定します。対象となるのは ul や ol などのリスト要素です。 サンプルコード 以下のコードでは、ボタンをクリックすると listStyleImage プロパティによって、順序付きリストのマーカーが指定

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE