使用 javascript 的畫布圖像的亮度和對比度

Question

我在標簽中有一張圖片

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

如何使用 javascript 更改此圖像的亮度和對比度？

Tnx

Answer 1

我知道至少有一個 javascript 庫可以做到這一點， 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 文檔

Answer 2

根據我的經驗，fabric.js 是執行此操作的最佳 javascript 庫。 查看 Fabric JS 以及如何進行圖像過濾： http : //fabricjs.com/image-filters

Answer 3

你可以試試這個，看評論

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

Answer 4

你可以試試這個（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);