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




image colors (3)

"ग्रेनेस्काले" में एक ग्रेस्केल छवि को फिर से प्रिंट करने के लिए कंपोजिट का उपयोग करें

कम्पोजिटिंग का उपयोग करना पिक्सेल हेरफेर से अधिक तेज है और बोनस के रूप में आप क्रॉस-डोमेन सुरक्षा प्रतिबंधों के आगे नहीं चलेंगे (जो आप करते हैं यदि आप इसके बजाय getImageData उपयोग getImageData )।

  1. अपनी छवि का एक पूर्ण हरा संस्करण बनाएं
  2. कैनवास पर अपनी ग्रेस्केल चित्र खींचें
  3. globalCompositeOperation='color' सेट करें जो मौजूदा स्केल पिक्सल को फिर से globalCompositeOperation='color' जाता है ("फिर से लगाया हुआ") शीर्ष पर खींचा पिक्सल के साथ
  4. कैनवास पर अपनी पूरी तरह से हरे रंग की छवि बनाएं

"रंग" सम्मिश्रण ग्रीनस्केल में ग्रेस्केल को चालू कर देगा

+ =

नोट: क्षमताओं को सम्मिश्रण के साथ एक आधुनिक ब्राउज़र की आवश्यकता है (IE IE नहीं)

उदाहरण कोड और डेमो:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png";
function start(){

    // create a fully green version of img
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width;
    c.height=img.height;
    cctx.drawImage(img,0,0);
    cctx.globalCompositeOperation='source-atop';
    cctx.fillStyle='green';
    cctx.fillRect(0,0,img.width,img.height);  
    cctx.globalCompositeOperation='source-over';

    // draw the grayscale image onto the canvas
    ctx.drawImage(img,0,0);

    // set compositing to color (changes hue with new overwriting colors) 
    ctx.globalCompositeOperation='color';

    // draw the fully green img on top of the grayscale image
    // ---- the img is now greenscale ----
    ctx.drawImage(c,0,0);
    
    // Always clean up -- change compositing back to default
    ctx.globalCompositeOperation='source-over';
}
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=256 height=256></canvas>

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

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


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

पहले एक कैनवास तत्व बनाएं और छवि खींचने के लिए कैनवास संदर्भ का उपयोग करें। आप प्रभाव लागू करने के लिए कैनवास फिल्टर का उपयोग कर सकते हैं। फिर छवि के पीएनजी प्राप्त करने के लिएडेटा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