4

このリンクに示されているような、画像の明るさを変更するスライダー コントロールを実装したかったのです。

http://camanjs.com/examples/

私はJavaScriptにかなり慣れていないので、これはかなり難しいことがわかっています。現在、私は CamanJS ライブラリを使用していますが、残念ながらそれを複製することはできません。例をリバース エンジニアリングしてみましたが、例が非常に複雑でまったく読めません。とにかく、私の実装の問題は次のとおりです。

//this is the event handler called when the slider value changes
function brightnessControl(e, ui) {
  //mainImage is the id of the canvas that holds the image
  Caman("#mainImage", function() {
    this.brightness(ui.value);
    this.render();
  });
}

元の画像は、明るさの設定を持つ新しい画像で上書きされます。最終的には、ただの白または黒の画像になります。どんな助けでも大歓迎です！前もって感謝します！

4

4 に答える 4

1

canvas要素、CSS3 フィルター、および純粋な JavaScript を使用して、目的の効果を得ることができます。

HTML

<input id="bri" type="text" value="1"/>
<canvas id="img"></canvas>

JavaScript

window.onload = function () {
    var context = document.getElementById('img').getContext('2d');

    /* Loading the image at first */
    var base_image = new Image();
    base_image.src = 'http://images.google.com/intl/fr_ALL/images/logos/images_logo_lg.gif';
    context.drawImage(base_image, 0, 0);

    /* Function trigerred when we leave the input */
    document.getElementById('bri').onblur = function () {
        var amount = this.value;

        var img = document.getElementById('img');

        /* We change the brightness of the canvas itself */
        img.setAttribute('style', 'filter:brightness(' + amount + '); -webkit-filter:brightness(' + amount + '); -moz-filter:brightness(' + amount + ')');

    }
};

ライブデモ

于 2013-07-19T20:27:04.687 に答える
-1

以下は CSS 2.1+ で動作します。input type="range"この例では、使いやすさのために HTML5 のみを使用していることに注意してください。Javascript フォールバック コードも、これをサポートしていないブラウザー用にこの例で実装されています (input typeデフォルトで になりますtext)。

カスタム スライダーを実装するのが最適ですが、この質問は明るさの制御に関するものであり、スライダーに関するものではないと思います。

これが機能する方法は、スライダー/テキスト入力値に応じて、画像を同じ比率の要素と不透明度で重ねることです。この要素の背景色は、値が 50 より大きい場合は白、値が 50 より小さい場合は黒になります。

JS フィドルへのリンク

#HTML
<div id="container">
    <div id="brightness"></div>
    <img src="http://placehold.it/400x400" />
</div>

Brightness (0 - 100):<br />
<input type="range" id="controls" value="50" min="0" max="100" maxlength="3">

 

#Javascript
window.onload = function()
{
    var brightness = document.getElementById('brightness');
        controls   = document.getElementById('controls');

    controls.onkeyup = controls.onchange = function()
    {
        var brightness = document.getElementById('brightness'),
            val        = parseInt(this.value) - 50;

        if (val > 50 || val < -50)
        return false;

        brightness.style.backgroundColor = val > 0 ? 'white' : 'black';
        brightness.style.opacity = Math.abs(val/100) * 2;
    }
}

 

#CSS
#container{
    width:400px;
    height:400px;
    margin-bottom:10px;
    border:1px solid rgb(127, 127, 127);
}

#brightness{
    width:400px;
    height:400px;
    background:white;
    position:absolute;
    opacity:0;
}

#controls{
    width:400px;
    height:22px;
    padding:0 5px;
}
于 2013-07-19T21:18:14.403 に答える