JavaScriptを使用したキャンバス画像の明るさとコントラスト
-
29-09-2019 - |
質問
タグに画像があります
var img = new Image();
ctx.drawImage(img,0,0,img.width,img.height);
ecc...
この画像の明るさとコントラストをJavaScriptとどのように変えることができますか?
TNX
解決
これができることを知っている少なくとも1つのJavaScriptライブラリがあります、 pixastic
使用法は次のようになるかもしれません。
Pixastic.process(canvas, 'brightness',
{
'brightness': 60,
'contrast': 0.5,
'leaveDOM': true
},
function(img) {
ctx.drawImage(img, 0, 0);
}
);
ライブラリは、ページ内の画像を使用することを目的としており、レンダリングされた結果を含むキャンバス要素に置き換えます。
しかし、上記のコードでは、画像ではなくキャンバス要素に渡し、「Leavedom」プロパティを含めて、Pixastic Libraryが作成したDOMのキャンバスをCanvasに交換しないようにしました。
結果を表示するために、CTX.Drawimageを実行するだけで、コンテンツを元のキャンバスに入れるコールバック関数を含めました。
それが理にかなっていることを願っています。
その他の例については、ドキュメントを確認できます。 Pixastic Documentation
他のヒント
私の経験では、Fabric.jsはこれを実行するのに最適なJavaScriptライブラリです。ファブリックJSと画像フィルタリングの実行方法を確認してください。 http://fabricjs.com/image-filters
これを試してみることができます、コメントを参照してください
<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>
これを試すことができます(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);
所属していません StackOverflow