12

タグに画像があります 

var img = new Image();
ctx.drawImage(img,0,0,img.width,img.height);
ecc...

この画像の明るさとコントラストをjavascriptで変更するにはどうすればよいですか?

TNX

4

4 に答える 4

5

これを実行できる JavaScript ライブラリが少なくとも 1 つあります。Pixastic です。

使用法は次のようになります。

Pixastic.process(canvas, 'brightness',
    {
        'brightness': 60,
        'contrast': 0.5,
        'leaveDOM': true
    },
    function(img) {
        ctx.drawImage(img, 0, 0);
    }
);

ライブラリは、ページ内の画像を操作することを意図しており、レンダリング結果を含むキャンバス要素に置き換えます。

しかし、上記のコードでは、画像ではなくキャンバス要素を渡し、「leaveDOM」プロパティを含めて、pixastic ライブラリが DOM 内のキャンバスをそれが作成するキャンバスと交換するのを防ぎます。

結果を表示するために、ctx.drawImage を実行してコンテンツを元のキャンバスに配置するコールバック関数を含めました。

それが理にかなっていることを願っています。

その他の例については、ドキュメントを確認してください。Pixastic ドキュメンテーション

于 2010-10-11T18:12:45.370 に答える
0

私の経験では、fabric.js はこれを実行するための最良の JavaScript ライブラリです。Fabric JS と画像フィルタリングの方法については、http: //fabricjs.com/image-filtersをご覧ください。

于 2014-08-12T18:02:44.517 に答える
-1

あなたはこれを試すことができます、コメントを見てください

<script type="application/javascript">  

function clickMeEvent(obj)
{
if (obj.style.opacity=="0.9")
    {
    obj.style.opacity="0.7";
    }
else if (obj.style.opacity=="0.7")
    {
    obj.style.opacity="0.5";        
    }
else if (obj.style.opacity=="0.5")
    {
    obj.style.opacity="0.3";        
    }
else if (obj.style.opacity=="0.3")
    {
    obj.style.opacity="0.1";        
    }
else
    {
    obj.style.opacity="0.0";

    }
}

</script>

于 2014-04-14T15:01:46.173 に答える
-2

これを試すことができます（c＃コード）：

 Bitmap originalImage;
 Bitmap adjustedImage;
 double brightness = 1.0f; // no change in brightness
 double constrast = 2.0f; // twice the contrast
 double gamma = 1.0f; // no change in gamma

 float adjustedBrightness = brightness - 1.0f;
 float[][] ptsArray ={
                new float[] {contrast, 0, 0, 0, 0}, // scale red
                new float[] {0, contrast, 0, 0, 0}, // scale green
                new float[] {0, 0, contrast, 0, 0}, // scale blue
                new float[] {0, 0, 0, 1.0f, 0}, // don't scale alpha
                new float[] {adjustedBrightness, adjustedBrightness, adjustedBrightness, 0, 1}};

 imageAttributes = new ImageAttributes();
 imageAttributes.ClearColorMatrix();
 imageAttributes.SetColorMatrix(new ColorMatrix(ptsArray), ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
 imageAttributes.SetGamma(gamma, ColorAdjustType.Bitmap);
 Graphics g = Graphics.FromImage(adjustedImage);
 g.DrawImage(originalImage, new Rectangle(0,0,adjustedImage.Width,adjustedImage.Height)
            ,0,0,bitImage.Width,bitImage.Height,
 GraphicsUnit.Pixel, imageAttributes);
于 2010-10-11T11:08:37.603 に答える