दिलचस्प पोस्ट
ढेर चर बनाम हीप वैरिएबल सेलेनियम सी # वेबड्राइवर: रुकावट तक तत्व मौजूद है सीतनिद्रा में होना क्यों कोई तर्क निर्माता की आवश्यकता है? पायथन में एक सूची में विशिष्ट स्थानों में मान डालना ऑब्जेक्ट का विस्तार। प्रोटोटाइप जावास्क्रिप्ट एसटीपी में उत्परिवर्तन कुल ऑपरेटर मैं एक नष्ट लाइन को कैसे "जीआईटी दोष" कर सकता हूं? मैं C # के साथ सभी रिक्त स्थान को कैसे बदलूं? लॉगिन / लॉगआउट के साथ डेल्फी आवेदन – कैसे लागू करने के लिए? स्प्रिंग बूट में एक फिल्टर वर्ग कैसे जोड़ें? एक एंड्रॉइड व्यू कैसे बनाएं जो स्वाइप / फ्लिंग पर दृश्यों के बीच फ़्लिप करता है स्ट्रिंग होने का तरीका। केवल "पूरे शब्दों" स्पार्क 2.0 डेटासेट बनाम डेटाफ़्रेम कैसे सी में नैन और inf का उपयोग करें? Log4j.xml में एपेंडर में डायनामिक फ़ाइल नाम कैसे दें

Jquery का उपयोग कर एक छवि का रंग कैसे बदल सकता है

सबसे पहले मैं बेवकूफ सवाल के लिए माफी चाहता हूँ, मैं पूछने जा रहा हूँ। मेरे पास एक मग की एक छवि है जब कोई उपयोगकर्ता रंग पिकर से एक रंग कोड चुनता है तो मैं उस रंग के मग के रंग को बदलना चाहता हूं।

क्या आप कृपया मुझे एक संकेत दें कि यह कैसे jquery का उपयोग करने के लिए? मैं इसे PHP और Jquery का उपयोग करने के लिए योजना बना रहा हूँ

अग्रिम में धन्यवाद 🙂

पी एस यह सिर्फ मेरे साथ हुआ है कि एक रंग पिकर का इस्तेमाल करते हुए ऑब्जेक्ट का रंग बदलना संभव नहीं है, अगर यह एक छवि प्रारूप में है, लेकिन फिर भी इसे हासिल करने का एक तरीका हो सकता है। क्या आप कृपया मुझे कुछ सुझाव देंगे?

वेब के समाधान से एकत्रित समाधान "Jquery का उपयोग कर एक छवि का रंग कैसे बदल सकता है"

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

इसे एक छवि संपादक पर खोलें और छवि पर सभी खाली क्षेत्रों को काट लें, एक पारदर्शी समोच्च के साथ मग को छोड़ दें। इस कदर:

यहां छवि विवरण दर्ज करें

हम यहां jQuery का उपयोग नहीं करने जा रहे हैं क्योंकि ईमानदारी से मुझे इसके बारे में कुछ नहीं पता है इसलिए मैं आपको उस के साथ मदद नहीं कर सकता, इसके बजाय हम सीधे एचटीएमएल 5 से कैनवास एपीआई का उपयोग करने जा रहे हैं (इसका मतलब यह है कि आपका ऐप पुराने ब्राउज़रों पर काम नहीं करेगा )

यहां हम एक प्रति-पिक्सेल रंग गुणन करेंगे, क्योंकि आपका मग ग्रे स्केल में है जो हमारे लिए यह करेगा।

चलो एक सरणी चुनें जिसमें सभी पिक्सल रंग जानकारी होती है।

  1. DOM को चित्र जोड़ें
  2. एक ऑफ़स्क्रीन कैनवास तत्व बनाएं
  3. चित्र को लोड करने के लिए प्रतीक्षा करें
  4. कैनवास पर छवि खींचें
  5. छवि के getImagedata इवेंट के अंदर, getImagedata विधि का उपयोग करके पिक्सेल डेटा प्राप्त करें

    <* img src = "mug.png" id = "मग" चौड़ाई = "25%" ऊंचाई = "25%" ऑनलोड = "मिलना पिक्सेल (यह)" />

     var mug = document.getElementById("mug"); var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var originalPixels = null; var currentPixels = null; function getPixels(img) { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height); originalPixels = ctx.getImageData(0, 0, img.width, img.height); currentPixels = ctx.getImageData(0, 0, img.width, img.height); img.onload = null; } 

हमें रंग पिकर से रंग की जरूरत है, आरजीबी प्रारूप में हेक्स नहीं, इसलिए इस फ़ंक्शन का उपयोग करें यदि आपका पिकर इसे परिवर्तित करने के लिए हेक्साडेसिमल मान देता है:

 function hexToRGB(hex) { var long = parseInt(hex.replace(/^#/, ""), 16); return { R: (long >>> 16) & 0xff, G: (long >>> 8) & 0xff, B: long & 0xff }; } 

अब ये जादू का भाग है, पिक्सेल डेटा के माध्यम से चलो लूप करते हैं और रंग पिकर से रंग में गुणा करें।

मेरी स्क्रिप्ट पर कोई रंग पिकर नहीं है, मैंने अभी हेक्साडेसिमल रंग में टाइप करने के लिए एक साधारण टेक्स्ट इनपुट बनाया है, नीचे दिए गए इस फ़ंक्शन में इनपुट बटन की ऑनक्लिक इवेंट है

  function changeColor() { if(!originalPixels) return; // Check if image has loaded var newColor = hexToRGB(document.getElementById("color").value); for(var I = 0, L = originalPixels.data.length; I < L; I += 4) { if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel { currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R; currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G; currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B; } } ctx.putImageData(currentPixels, 0, 0); mug.src = canvas.toDataURL("image/png"); } 

देखो, चाल है:

  • मूल पिक्सेल रंग प्राप्त करें
  • इसे 0-255 से लेकर 0-1 तक कनवर्ट करें
  • इसे नए रंग में गुणा करें जिसे आप चाहते हैं कि यह होना चाहिए।

आप इसे यहां काम कर देख सकते हैं: http://users7.jabry.com/overlord/mug.html

  • मुझे यकीन है कि यह कम से कम फ़ायरफ़ॉक्स और क्रोम पर काम करता है।

  • मग समोच्च अच्छा नहीं लग रहा है, इसलिए क्योंकि मैंने फ़ोटोशॉप पर एक त्वरित "जादू की छड़ी" की है, आप बाद में कुछ बेहतर कर सकते हैं।

आप पारदर्शी क्षेत्रों के साथ एक मग की एक दस्तक-आउट चित्र का उपयोग कर सकते हैं, इसे पृष्ठभूमि दे और आवश्यकतानुसार पृष्ठभूमि का रंग बदल सकते हैं। cssTricks

फ़ार्बटास्टिक कलर पिकर का उपयोग करते हुए यह एक बुनियादी उदाहरण, जेएसफ़िल्ड है

 $('#colorpicker').farbtastic(function(color){ $('img').css("background-color",color); });​ 

आपको निक कोराब्लिन द्वारा " उत्पाद रंगीन " का उपयोग करना चाहिए यह एक या दो रंगों का समर्थन करता है, और सेट अप करने के लिए सरल है।

आप एक पूरी तरह से तैनात .पीएनजी को झुका की मूल छवि से ज़्यादा ज़-इंडेक्स के साथ ओवरले कर सकते हैं। ओवरले रंग का मग होगा और यदि आवश्यक हो तो पृष्ठभूमि को बाहर कर सकते हैं। किसी ईवेंट हैंडलर के जरिए आवश्यक ओवरले को स्वैप करें- शायद कोई क्लास जोड़ें / निकालें?