brillo y el contraste de una imagen Lona con javascript

porque tienen una imagen en una etiquetabrillo y el contraste de una imagen Lona con javascript

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

¿Cómo es posible cambiar el brillo y el contraste de esta imagen con javascript?

TNX

Fuente

2010-10-11 Claudio

-1: Al menos podría decir qué lenguaje de programación es su pregunta sobre –

Ops lo siento en javascript ... – Claudio

Agregué la etiqueta javascript. De esta forma, hay más posibilidades de que los expertos en JavaScript comprueben la pregunta. –

Hay al menos una librería javascript que sé de lo que puede hacer esto, Pixastic

uso podría tener este aspecto.

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

La biblioteca es una especie de intención de trabajar con imágenes dentro de su página y lo reemplaza con elementos de lona que contienen el resultado renderizado.

Pero en el código anterior pasé un elemento canvas en lugar de una imagen e incluí la propiedad 'leaveDOM' para evitar que la biblioteca pixástica cambie su lienzo en el DOM por el que crea.

Para mostrar los resultados he incluido la función de devolución de llamada que solo hace ctx.drawImage para poner los contenidos en su lienzo original.

Espero que tenga sentido.

Puede consultar la documentación para ver más ejemplos. Pixastic Documentation

Fuente

2010-10-11 18:12:45

ninguno de estos URL funciona. –

sitio pixastic no está activo ... –

-3

Puede probar este (código 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);

Fuente

2010-10-11 11:08:37

C#, ¡correcto! gracias por perder nuestro tiempo. –

@PizzaiolaGorgonzola La pregunta originalmente no mencionaba el idioma. – xehpuk

puede probar esto, véase el comentario

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

Fuente

2014-04-14 15:01:46

poner esto en la parte superior

–

En mi experiencia, fabric.js es la mejor librería javascript para realizar esto. Consulte Fabric JS y cómo filtrar imágenes en: http://fabricjs.com/image-filters

Fuente

2014-08-12 18:02:44

Sin opciones de contraste .. –

aff, vínculo roto: \ –

Actualizado el enlace roto –

brillo y el contraste de una imagen Lona con javascript

Respuesta

Cuestiones relacionadas