javascript - कैसे कैनवास पर एक ग्रेस्केल छवि को फिर से टिंट करना




image colors (2)

क्या ग्रीनस्केल आइकन (पारदर्शी पृष्ठभूमि वाला पीएनजी चित्र) को कैनवास पर चित्रित करने के लिए कोई त्वरित तरीका है? रंगीन करके मुझे ग्रीनस्केल आइकन को बदलने का अर्थ है ग्रीनस्केल (रंग दिए जाने वाले रंगों के बजाय भूरे रंग के रंगीन रंग के रंग के साथ)

मुझे पता है कि मैं मैन्युअल रूप से प्रत्येक पिक्सेल में हेरफेर कर सकता हूं लेकिन शायद कुछ और स्वचालित तरीके हैं?


अरे इस विकल्प की कोशिश करो!

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

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/

अंत में उपयोग .toDataURL () विधि निर्यात / इसे बचाने के लिए

आशा है कि यह आप के लिए काम करता है!


आप इसे सीएसएस कक्षाओं का उपयोग कर प्राप्त कर सकते हैं। नीचे दिए गए उदाहरण की जांच करें PS: स्रोत: W3Schools

img {
  width: 33%;
  height: auto;
  float: left;
  max-width: 235px;
}
.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.brightness {
  -webkit-filter: brightness(250%);
  filter: brightness(250%);
}
.contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%);
}
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}
.saturate {
  -webkit-filter: saturate(7);
  filter: saturate(7);
}
.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
.shadow {
  -webkit-filter: drop-shadow(8px 8px 10px green);
  filter: drop-shadow(8px 8px 10px green);
}
<body>

  <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

  <img src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="blur" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="brightness" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="contrast" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="grayscale" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="huerotate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="invert" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="opacity" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="saturate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="sepia" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="shadow" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">

</body>

फिल्टर शैली क्या कर सकता है यह जानने के लिए इस लिंक को देखें

मुझे क्लिक करें





html5-canvas