2013-05-06 12 views
8

मैंने फ़ायरफ़ॉक्स की फ़िल्टर सीएसएस संपत्ति को मुद्रित पृष्ठ पर ठीक से ग्रेस्केल में लाने में समस्या का सामना किया है। किसी कारण से, ग्रेस्केल छवि प्रिंटआउट पर दिखाई नहीं दे रही है, हालांकि यह ऑनस्क्रीन के रूप में प्रदर्शित होती है। this one जैसे प्रश्नों की चर्चा करते हुए के बाद, मैं इस बिंदु (मुद्दे प्रदर्शित करने के लिए सरलीकृत) करने के लिए मिल गया है:फ़ायरफ़ॉक्स फ़िल्टर ग्रेस्केल और प्रिंटिंग

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .grayscale { 
       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"); /* Firefox 10+ */ 
       filter: gray; /* IE6-9 */ 
       -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
       filter: grayscale(100%); 
      } 
      img { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
    </body> 
</html> 

और यहाँ fiddle

है वहाँ इस के लिए एक व्यवहार्य समाधान नहीं है, या मैं कुछ कर रहा हूँ गलत? फ़िल्टर को अन्य तत्वों में लागू करना एक ही समस्या का कारण बनता है। मैं किसी भी रचनात्मक इनपुट की सराहना करता हूं।

नोट: फ़ायरफ़ॉक्स v20.0.1

+2

+1 बचाने के कैसे एक जटिल सवाल ठीक से पूछने के लिए जानते हुए भी के लिए मदद करता है। –

+0

तो बस स्पष्टीकरण के लिए, जब आप स्क्रीन पर देखते हैं तो छवि ग्रेस्केल होती है लेकिन जब आप स्क्रीन की सामग्री प्रिंट करते हैं तो ग्रेस्केल मुद्रित छवि (पेपर पर) पर लागू नहीं होता है। – jezzipin

+0

बंद करें, बल्कि ग्रेस्केल वाली छवि बिल्कुल दिखाई नहीं दे रही है। मिसाल के तौर पर, यहां तक ​​कि फिडल पेज को प्रिंट करने से केवल रंगीन छवि दिखाई देगी, जबकि ग्रेस्केल छवि दिखाई नहीं दे रही है (हालांकि लेआउट स्पेस अभी भी संरक्षित है)। – dasch88

उत्तर

0

का उपयोग करते हुए यह पता चला यह लगभग फ़ायर्फ़ॉक्स में एक ब्राउज़र बग प्रतीत होता है। मैंने देखा कि किसी भी समय (स्क्रीन पर) जब एक एसवीजी का संदर्भ दिया जाता है कि ब्राउज़र नहीं मिल रहा है, तो मुझे प्रिंटिंग के दौरान एक ही समस्या मिल जाएगी जैसा कि मैंने किया था: छवि लेआउट आरक्षित होगा, लेकिन यह रिक्त स्थान होगा। इसने मुझे आश्चर्यचकित करने के लिए प्रेरित किया कि क्या स्क्रीन के बजाए प्रिंटर के लिए प्रतिपादन करते समय लोड/पाया जा सकता है, इसलिए मैंने svg को लोड/संदर्भित करने के विभिन्न तरीकों की कोशिश करना शुरू कर दिया। मैंने एसवीजी को एक अलग फ़ाइल से, एचटीएमएल में एक आईडी से, और इनलाइन, एक अलग सीएसएस फ़ाइल, इन-पेज क्लासेस, और इनलाइन शैलियों में फ़िल्टर को परिभाषित करने के संयोजन में संयोजन को लोड करने का प्रयास किया। सभी संयोजनों में, यह काम करता है:

एचटीएमएल में svg परिभाषित करें, और इनलाइन शैलियों या इन-पेज सीएसएस कक्षाओं का उपयोग करके इसका संदर्भ लें।

मुझे पता है कि यह अजीब लगता है, लेकिन सचमुच सबकुछ मैंने ब्रेक की कोशिश की, जिसमें सबकुछ भी शामिल है लेकिन बाहरी सीएसएस फ़ाइल में फ़िल्टर सीएसएस प्रॉपर्टी को सेट करना शामिल है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      .grayscale { 
       filter: url(#grayscale); /* Firefox 10+ */ 
       filter: gray; /* IE6-9 */ 
       -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
      } 
      img { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" /> 
     <svg xmlns='http://www.w3.org/2000/svg' height="0px"> 
      <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> 
    </body> 
</html> 

और फिर, संशोधित fiddle जिसमें से आप प्रिंट और अब छवि फ़ायरफ़ॉक्स में ठीक देख सकते हैं: इन-पेज वर्ग दृष्टिकोण जा रहे हैं, यहाँ क्या निश्चित एचटीएमएल तरह दिखाई देगा।

Siiigh, इस बात मैं IE से उम्मीद थी की तरह है ... उम्मीद है कि किसी को कुछ समय/दु: ख/जानलेवा विचारों

+0

क्रोम में 43 लिनक्स पर न तो बेवकूफ ग्रेस्केल छवि को प्रिंट करता है, दुख की बात है। –

संबंधित मुद्दे