गतिशील रूप से छवि रंग बदलना

Question

मैं एक ऐसा एप्लिकेशन विकसित कर रहा हूं जो टेबल के रूप में कई दृश्य प्रदर्शित करता है (उदाहरण के लिए ग्राहक, उत्पाद इत्यादि)। प्रत्येक पंक्ति के अंतिम स्तंभ में बटन होते हैं, जिससे उपयोगकर्ता किसी विशिष्ट पंक्ति पर कुछ क्रियाएं कर सकता है। सरलीकृत उदाहरण:

<td class="actions"> 
    <a href="projects/some-project/edit"> 
    <img src="images/edit-project.png" alt="Edit project" /> 
    </a> 
    <a href="projects/some-project/do-something"> 
    <img src="images/someaction.png" alt="Do something else with the project" /> 
    </a> 
</td> 

छवियां पारदर्शी पीएनजी हैं। प्रति तालिका बटन की मात्रा अलग-अलग हो सकती है, अब कुल में लगभग 30 हैं।

मुझे एप्लिकेशन सीएसएस शैलियों में बदलाव करने के लिए कहा गया था, इसलिए अलग-अलग तालिकाओं में अब अलग-अलग रंग हो सकते हैं, उदाहरण के लिए ग्राहक तालिका में अब कुछ ग्रेनेश टिंट हैं, परियोजनाएं एक नीली है और इसी तरह। इसके अलावा, "विषम" तालिका पंक्तियों में "यहां तक ​​कि" की तुलना में थोड़ा अलग रंग होता है। अगर वे चुने जाते हैं तो पंक्तियां भी रंग बदलती हैं।

समस्या यह है कि डिज़ाइन कहता है कि बटन को पंक्तियों के साथ रंग बदलना होगा। इसके लिए बहुत सारे बटन - रंग संयोजन बनाने की आवश्यकता है, और भविष्य में और बटन जोड़े जाएंगे।

मुझे लगता है कि विभिन्न रंगों में बटन के सैकड़ों संस्करण बनाने के साथ डिजाइनर को असाइन करने से बेहतर तरीका तालिका वर्ग के आधार पर गतिशील रूप से बनाना है। मेरा सवाल है - ऐसा करने का सबसे प्रभावी तरीका क्या होगा? एप्लिकेशन क्लाइंट पक्ष पर सर्वर के साथ सर्वर-साइड भाषा और जावास्क्रिप्ट के रूप में php का उपयोग करता है। छवियों के साथ समस्या यह है कि वे मोनोक्रोम नहीं हैं लेकिन कई रंगों का उपयोग करते हैं, इसलिए मुझे सीएसएस कक्षाओं के अनुसार अपने एचएसएल में हेरफेर करना होगा।

यदि PHP का उपयोग करने का बेहतर तरीका है, तो शायद मैं ImageMagick का उपयोग करूंगा। प्रश्न यह है कि एक रंगीन रंग के लिए रंगीन छवि को प्राप्त करने का सबसे अच्छा तरीका क्या है।

Answer 1

मैं इसके लिए jQuery का उपयोग करता हूं और तालिका के सीएसएस वर्ग/एस के संबंध में पीएनजी या पीएनजी के पीछे रंग सेट करता हूं।

छविमैजिक जैसे बहुत अधिक PHP का उपयोग न करें क्योंकि यह नाटकीय रूप से पृष्ठ के प्रतिपादन को धीमा कर देता है।

Pixastic (coloradjust)
https://github.com/jseidelin/pixastic http://www.pixastic.com/lib/docs/actions/coloradjust/

या PaintbrushJS (रंग टिंट)
https://github.com/mezzoblue/PaintbrushJS
http://mezzoblue.github.com/PaintbrushJS/demo/

या CamanJS पर एक नज़र डालें (colorize)
http://camanjs.com/
http://camanjs.com/guides/#BuiltIn
https://github.com/meltingice/CamanJS/

या VintageJS
http://rendro.github.io/vintageJS/
https://github.com/rendro/vintageJS

Answer 2

मैं एक साइट पर एक बहुत ही इसी तरह की सुविधा मेरे द्वारा बनाए गए क्रियान्वित किया है। हम उपयोगकर्ताओं को अलग-अलग लेआउट (आपके एचटीएमएल के समान) से चुनने के साथ-साथ रंगों, छवियों आदि के कई पैलेट चुनने की अनुमति देते हैं।आप निश्चित रूप से jQuery के साथ ऐसा कर:

पेज के init पर आप

$("head").append("<link>"); 

कर सकते हैं परिवर्तन घटना (या डेटा के पुनः लोड) के कुछ प्रकार पर। मेरा डेटा AJAX

css = $("head").children(":last"); // or find your <link> that you'd replace 
    css.attr({ 
    rel: "stylesheet", 
    type: "text/css", 
    href: path_to_your_css 
}); 

रंगों और छवियों सहित आप जिस तरह से चाहते हैं उसे बदल सकते हैं।

Answer 3

क्या आप उन छवियों में से एक पोस्ट कर सकते हैं? क्योंकि यदि आप कहते हैं कि यह पारदर्शी है, तो आप केवल a शैली बना सकते हैं जिसमें वे छवियां हों।

उदाहरण के लिए:

.actions > a { 
    width: 40px; 
    height: 20px; 
    display: block; 
    border-radius: 5px; 
    border-width: 1px; 
    border-style: solid; 
} 

.actions > a.green { 
    background-color: green; 
    border-color: darkgreen; 
} 

.actions > a.orange { 
    ... 
} 

और इतने पर।