JQuery बदलते रंग, संतृप्ति, <img> की गामा?

Question

यदि आप अपने माउस को उस पर घुमाते हैं तो मैं एक छवि को गहरा बनाना चाहता हूं। क्या JQuery (या जावास्क्रिप्ट) के साथ एक आईएमजी के रंग, संतृप्ति या गामा को बदलना संभव है?

Answer 1

क्या आपने PaintbrushJS या Pixastic लाइब्रेरी की कोशिश की है?

Answer 2

केवल जावास्क्रिप्ट (क्योंकि यह बाइनरी फाइलों में हेरफेर नहीं कर सकता) का उपयोग करके ऐसा करना संभव नहीं है, हालांकि आप मदद के लिए HTML5 <canvas> तत्व के साथ ऐसा कर सकते हैं।

Take a look here, मदद करने के लिए वहां कुछ पुस्तकालय हैं।

तुम सिर्फ यह नहीं हो पाती, हॉवर पर अपारदर्शिता बदलने उदाहरण के लिए, चाहते हैं:

$("img").css({ opacity: 0.5 }).hover(function() { 
    $(this).animate({ opacity: 1 }); 
}, function() { 
    $(this).animate({ opacity: 0.5 }); 
}); 

Answer 3

शो और एक अर्द्ध पारदर्शी काले <div> छवि के शीर्ष पर छिपाना।

Answer 4

मार्सेलो के सुझाव को विस्तारित करते हुए, आप अंतिम, गहरे चरण में अपनी छवि की प्रतिलिपि बना सकते हैं, इसे मूल के शीर्ष पर रख सकते हैं, और निक ने कहा जैसे माउस होवर पर इसकी अस्पष्टता बदल सकती है। यह विधि आपको छवि संक्रमण के साथ कुछ भी करने की अनुमति देती है: इसके रंग, संतृप्ति इत्यादि को बदलें एक साधारण जावास्क्रिप्ट फीका एनीमेशन कोड here पाया जा सकता है।

Answer 5

आप सीएसएस

IMG:hover 
{ 
    -ilter: brightness(0.7); 
    -webkit-filter: brightness(0.7); 
    -moz-filter: brightness(0.7); 
    -o-filter: brightness(0.7); 
    -ms-filter: brightness(0.7); 
} 

वहाँ कलंक, परिपूर्ण, इसके विपरीत, जैसे अन्य फिल्टर का एक समूह है में यह कर सकते हैं ...

आप उपयोग JQuery easely सीएसएस बदलने के लिए अगर आप चाहते हैं कर सकते हैं।

Answer 6

मैंने इस प्रोटोटाइप को एक साथ रखा है जो एक क्रॉस-ब्राउज़र का उपयोग करता है, सीएसएस केवल होवर पर छवि संतृप्ति एनिमेट करने के लिए समाधान। जेएस/jQuery में ऐसा करने के तरीके हैं और हे, क्यों न केवल सीएसएस में करते हैं? बाहर DEMO यहाँ

img[class*="filter-resat"] { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+ 
    filter: gray; // For IE 6+ 
    -webkit-filter: grayscale(100%); // for Chrome & Safari 

    // Now we set the opacity 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE 
    filter: alpha(opacity=40); // Chrome + Safari 
    -moz-opacity: 0.6; // Firefox 
    -khtml-opacity: 0.6; // Safari pre-webkit 
    opacity: 0.6; // Modern 

    // Now we set up the transition 
    -webkit-transition: all 1.0s ease; 
    -webkit-backface-visibility: hidden; 
} 

img[class*="filter-resat"]:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    -webkit-filter: grayscale(0%); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    -moz-opacity: 1; 
    -khtml-opacity: 1; 
    opacity: 1; 
} 

// You can leave this part out and the above code will default to a 1 second transition duration. 
img.filter-resat9 {-webkit-transition: all .9s ease;} 
img.filter-resat8 {-webkit-transition: all .8s ease;} 
img.filter-resat7 {-webkit-transition: all .7s ease;} 
img.filter-resat6 {-webkit-transition: all .6s ease;} 
img.filter-resat5 {-webkit-transition: all .5s ease;} 
img.filter-resat4 {-webkit-transition: all .4s ease;} 
img.filter-resat3 {-webkit-transition: all .3s ease;} 
img.filter-resat2 {-webkit-transition: all .2s ease;} 
img.filter-resat1 {-webkit-transition: all .1s ease;} 

चेक और JSfiddle यहाँ

http://jsfiddle.net/buttonpresser/x6GfX/show/light/