jQuery छवि को ग्रेस्केल में कनवर्ट करें?

Question

मैं jQuery के लिए नया हूं और वास्तव में इसे पसंद करता हूं। मैं जानना चाहता हूं कि आईई के समान प्रभाव है या नहीं, जिसमें मैं रनटाइम में छवियों को ग्रेस्केल में परिवर्तित कर सकता हूं?

Answer 1

मुझे नहीं लगता कि jQuery के पास ऐसा करने का एक विशेष तरीका है, लेकिन आप <canvas> टैग का उपयोग कर सकते हैं। see tutorial

Answer 2

बाहर चेक pixastic ... यह में काम माना जाता है ...

• इंटरनेट एक्सप्लोरर 5.5 +
• ओपेरा 9.5+
• फ़ायरफ़ॉक्स 2 +
• वेबकिट रात

http://www.pixastic.com/lib/docs/actions/desaturate/

var img = new Image(); 
img.onload = function() { 
    Pixastic.process(img, "desaturate", {average : false}); 
} 
document.body.appendChild(img); 
img.src = "myimage.jpg"; 

Answer 3

इस का एक उदाहरण है पर jQuery के साथ (रंग greyscale करने के लिए) रिवर्स में किया जा रहा है:

http://www.sohtanaka.com/web-design/examples/hover-over-trick/

मैं कल्पना यह काफी सरल यह तो यह रंग करने के लिए ग्रे से चला गया उल्टा करने के लिए किया जाएगा। कोड स्वयं बहुत ही सरल और सुरुचिपूर्ण दिखता है।

Answer 4

यदि आप अपना लक्ष्य केवल होवर पर छवि ग्रे स्केल बनाना चाहते हैं तो आप इस चाल का भी उपयोग कर सकते हैं।

$('img').grayscale(); 

यह < कैनवास > का उपयोग करती हैं इसलिए पुराने ब्राउज़र में काम नहीं करेगा बनाता है: jquery-grayscale

आप इसे पसंद चलाएँ: http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Answer 5

यहाँ मेरी सरल jQuery प्लगइन है।

Answer 6

मैंने $.greyScale() नामक एक jQuery प्लगइन लिखा है जो यह आपके लिए करता है। यह प्रॉक्सी अनुरोधों के साथ-साथ किसी अन्य डोमेन पर होस्ट की गई छवियों का समर्थन करता है।

यह सिर्फ

$('img').grayScale(); 

Answer 7

मैं सब यहाँ सूचीबद्ध करने की कोशिश की का उपयोग करके शुरू हो जाती है और वे अच्छी तरह से काम नहीं किया है (या तो हॉवर पर संलग्न या बस ब्राउज़र या डोमेन में काम नहीं कर रहा है जैसे बहुत ज्यादा कर रही है)। तो मैंने खुद को एक whipped, जो बहुत छोटा और संक्षिप्त है: https://github.com/arturnt/jquery.grayscale.js