Яркость и Контраст для холста изображения с 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); 
    } 
); 

Библиотека вида предназначена для работы с изображениями в пределах вашей страницы и заменяет их с элементами холста, которые содержат обработанный результат.

Но в приведенном выше коде я передал элемент canvas, а не изображение, и включил свойство «leaveDOM», чтобы препятствовать обмену пиксельной библиотекой вашего холста в DOM для той, которую он создает.

Для отображения результатов я включил функцию обратного вызова, которая только делает ctx.drawImage, чтобы поместить содержимое в исходный холст.

Надеюсь, что имеет смысл.

Дополнительную информацию можно найти в документации. Pixastic Documentation

Answer 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); 

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

По моему опыту, fabric.js лучшей библиотеки JavaScript для выполнения этого. Посмотрите Fabric JS и как сделать фильтрацию изображения по адресу: http://fabricjs.com/image-filters