चमक और जावास्क्रिप्ट

Question

के साथ एक कैनवास छवि के लिए इसके विपरीत मैं एक टैग

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

कैसे चमक और जावास्क्रिप्ट के साथ इस छवि के विपरीत बदलना संभव है में एक छवि है?

Tnx

Answer 1

कम से कम एक जावास्क्रिप्ट पुस्तकालय मैं की जो ऐसा कर सकते हैं पता है, Pixastic

प्रयोग इस प्रकार दिखाई देंगे।

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

पुस्तकालय तरह का अपने पृष्ठ में छवियों के साथ काम करने का इरादा है और यह कैनवास तत्व है जो गाया परिणाम होते हैं के साथ उन्हें बदल देता है।

लेकिन ऊपर दिए गए कोड में मैंने एक छवि के बजाय कैनवास तत्व में पारित किया है और इसे 'छोड़ने' संपत्ति को शामिल किया है ताकि पिक्सस्टिक लाइब्रेरी को डीओएम में आपके कैनवास को स्वैप करने से रोक सके।

परिणाम मैं कॉलबैक फ़ंक्शन जो सिर्फ ctx.drawImage अपने मूल कैनवास में सामग्री डाल करने के लिए करता है को शामिल किया है प्रदर्शित करने के लिए।

आशा है कि यह समझ में आता है।

आप अधिक उदाहरण के लिए दस्तावेज़ देख सकते हैं। Pixastic Documentation

Answer 2

आप इस (ग # कोड) की कोशिश कर सकते हैं:

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 देखना सबसे अच्छा इस प्रदर्शन के लिए जावास्क्रिप्ट पुस्तकालय है। कपड़ा जे एस की जाँच करें और कैसे पर छवि फ़िल्टरिंग करना है: http://fabricjs.com/image-filters