एक तत्व के ओपेरिटी (अल्फा, ट्रांसपेरेंसी) को एक कैनवास तत्व में कैसे खींचा जाए, इसे बदलने के बाद?

Question

एचटीएमएल 5 <canvas>तत्व का उपयोग करते हुए , मैं एक छवि फ़ाइल (पीएनजी, जेपीईजी, आदि) लोड करना चाहूंगा, इसे पूरी तरह से पारदर्शी रूप से कैनवास पर आकर्षित करूंगा, और फिर इसे फीका कर दूंगा। मुझे लगा है कि छवि को कैसे लोड करना है और इसे कैसे आकर्षित करना है। कैनवस, लेकिन मुझे नहीं पता कि इसे खींचे जाने के बाद इसकी अस्पष्टता को कैसे बदलना है।

यहाँ मेरे पास अब तक का कोड है:

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

क्या कोई मुझे सेट करने के लिए एक संपत्ति की तरह सही दिशा में इंगित करेगा या कॉल करने के लिए एक फ़ंक्शन जो अपारदर्शिता को बदल देगा?

Answer 1

मैं इस प्रश्न का उत्तर भी ढूंढ रहा हूं, (स्पष्ट करने के लिए, मैं उपयोगकर्ता परिभाषित अस्पष्टता के साथ एक छवि बनाना चाहता हूं जैसे कि आप कैसे अस्पष्टता के साथ आकृतियों को आकर्षित कर सकते हैं) यदि आप आदिम आकृतियों के साथ आकर्षित करते हैं तो आप भरण और स्ट्रोक सेट कर सकते हैं पारदर्शिता को परिभाषित करने के लिए अल्फा के साथ रंग। जहां तक ​​मैंने अभी निष्कर्ष निकाला है, यह छवि ड्राइंग को प्रभावित नहीं करता है।

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

मैंने निष्कर्ष निकाला है कि globalCompositeOperationचित्रों के साथ काम करना।

//works with images
ctx.globalCompositeOperation = "lighter";

मुझे आश्चर्य है कि अगर रंग स्थापित करने का कोई तीसरा तरीका है ताकि हम छवियों को टिंट कर सकें और उन्हें आसानी से पारदर्शी बना सकें।

संपादित करें:

आगे खुदाई के बाद मैंने निष्कर्ष निकाला है कि आप छवि को globalAlphaआकर्षित करने वाले पैरामीटर को सेट करके एक छवि की पारदर्शिता निर्धारित कर सकते हैं :

//works with images
ctx.globalAlpha = 0.5

यदि आप समय के साथ लुप्त होती प्रभाव प्राप्त करना चाहते हैं, तो आपको किसी प्रकार के लूप की आवश्यकता होती है जो अल्फा मान को बदलता है, यह काफी आसान है, इसे प्राप्त करने का एक तरीका setTimeoutफ़ंक्शन है, यह देखो कि एक लूप बनाने के लिए जिस पर आप अल्फ़ा को बदलते हैं समय।

Comments

GlobalAlpha पूरी तरह से काम करता है। मानक का हिस्सा है: whatwg.org/specs/web-apps/current-work/multipage/…

— Aleris

सटीक होने के लिए, यह वह canvasतत्व नहीं है जिसके पास globalAlphaसंपत्ति है, लेकिन संदर्भ जो आपको कैनवास से मिलता है।

— स्टीव ब्लैकवेल

Ctx.save () और ctx.restore () के बारे में नीचे दिए गए इयान की टिप्पणी ग्लोबलअल्फा को कैनवास के बाकी हिस्सों को प्रभावित करने से रोकती है।

— एरोसबोरो

जो कुछ कैनवास पर खींचा गया है, उसकी अस्पष्टता को नियंत्रित करने के बजाय मुझे लगता है, यह सरल होगा और फिर भी छवि को खींचे जाने के बाद पूरे कैनवास की अस्पष्टता को नियंत्रित करने के उद्देश्य से सेवा की जाएगी (बस एक बार)। ऐसा करने के लिए सामान्य सीएसएस / शैली विधियों का उपयोग करें (canvaselement.style.opacity = '0.3'; आदि) बाद में CSS3 के साथ आप पूरी तरह से लूप के साथ भी फैल सकते हैं और ब्राउज़र को इसके बजाय लुप्त होने से बचा सकते हैं (कुछ इस तरह - संक्रमण: NNNms अपारदर्शिता आसानी से बाहर), या यहां तक ​​कि लुप्त होती "चेतन"।

— चक कोलारस

दुर्भाग्य से, canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";काम नहीं करता है। मान हेक्स में होना चाहिए।

— वेबवैंडर

Answer 2

उपयोग करने के लिए कुछ सरल उदाहरण कोड globalAlpha:

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

यदि आपको imgलोड करने की आवश्यकता है:

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

टिप्पणियाँ:

• 'src'अंतिम सेट करें , यह गारंटी देने के लिए कि आपका onloadहैंडलर सभी प्लेटफार्मों पर कॉल किया जाता है, भले ही छवि कैश में पहले से ही हो।

• लपेटें की तरह सामान में परिवर्तन globalAlphaएक के बीच saveऔर restore(वास्तव उपयोग उन्हें बहुत सारी में), सुनिश्चित करें कि आप, कहीं और से नहीं पीटना सेटिंग कर विशेष रूप से जब कोड ड्राइंग के टुकड़े की घटनाओं से कहा जा जा रहे हैं बनाने के लिए।

Comments

GlobalAlpha एक कैनवास पर सभी छवियों या आकृतियों को धुंधला कर देगा, यही वह नहीं है जो आप चाहते हैं।

— ग्रम्पी

@ क्रोधी - नहीं, globalAlphaकुछ भी धुंधला नहीं है। यह सभी बाद की ड्राइंग के लिए अल्फा को सेट करेगा (यह पहले से खींची गई किसी भी चीज को नहीं बदलता है), यही वजह है कि उदाहरण कोड में मैं इसे में लपेटता हूं , saveऔर restoreजो इसे लागू करता है उसे सीमित करने के लिए।

— इयान

यकीन नहीं है कि ctx.restore () ग्लोबलअल्फा को पुनर्स्थापित करेगा, आपको इसे अंत में भी करने की आवश्यकता हो सकती है (कम से कम मुझे क्रोम के पुराने संस्करणों में) ctx.globalAlpha = 1;

— शॉन

@ सीन - यदि आप निश्चित नहीं हैं, तो आपको जाँच करनी चाहिए। यह बहुत पुराना क्रोम रहा होगा, यह अब सभी प्लेटफार्मों पर काम करता है: jsfiddle.net/y0z9h9m7

— Ian

Answer 3

संपादित करें: "सही" के रूप में चिह्नित उत्तर सही नहीं है।

यह करना आसान है। इस कोड को आज़माएं, जो भी चित्र आपके पास हो, उसे "ie.jpg" पर स्वैप करें:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

कुंजी ग्लोबलअल्फा संपत्ति है।

Win7 पर IE 9, FF 5, Safari 5 और Chrome 12 के साथ परीक्षण किया गया।

Answer 4

पोस्ट पुरानी है अब तक मैं अपने सुझाव के साथ जाऊंगा। सुझाव कैनवास 2d संदर्भ में पिक्सेल हेरफेर पर आधारित है। MDN से:

आप सीधे बाइट स्तर पर कैनवस में पिक्सेल डेटा में हेरफेर कर सकते हैं

पिक्सल में हेरफेर करने के लिए हम यहां दो फ़ंक्शन का उपयोग करेंगे - getImageData और putImageData

getImageData फ़ंक्शन का उपयोग:

var myImageData = reference.getImageData (बाएं, ऊपर, चौड़ाई, ऊँचाई);

और putImageData सिंटैक्स:

संदर्भ.पुटइमाडडेटा (myImageData, dx, dy); // dx, dy - x और y आपके कैनवास पर ऑफसेट है

जहाँ संदर्भ अपने कैनवास 2d संदर्भ है

तो लाल हरा नीला और अल्फा मान पाने के लिए, हम निम्न कार्य करेंगे:

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

जहाँ x x ऑफसेट है, y y कैनवस पर ऑफसेट है

इसलिए हमारे पास कोड बनाने की छवि अर्ध-पारदर्शी है

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

तो आप स्वयं "shaders" कर सकते हैं - पूर्ण MDN लेख देखें यहां

Answer 5

आप ऐसा कर सकते हैं। पारदर्शी कैनवास को गंतव्य-बाहर वैश्विक समग्र ऑपरेशन का उपयोग करके जल्दी से फीका किया जा सकता है । यह 100% सही नहीं है, कभी-कभी यह कुछ निशान छोड़ देता है, लेकिन इसे घुमाया जा सकता है, जो कि आवश्यक है (यानी 'स्रोत-ओवर' का उपयोग करें और इसे 0.13 पर अल्फा के साथ सफेद रंग से भरें, फिर कैनवास तैयार करने के लिए फीका करें)।

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

Answer 6

मुझे लगता है कि यह सवाल का सबसे अच्छा जवाब देता है, यह वास्तव में उस चीज़ के अल्फा मूल्य को बदल देता है जिसे पहले ही खींचा जा चुका है। हो सकता है कि जब यह सवाल पूछा गया था तो यह एपीआई का हिस्सा नहीं था।

2d संदर्भ दिया गया c।

function reduceAlpha(x, y, w, h, dA) {
    var screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
    screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}

Comments

यह उत्तर 7 साल पहले दिए गए Soul_man के उत्तर से अलग कैसे है?

— BReddy

Answer 7

यदि आप jCanvas लाइब्रेरी का उपयोग करते हैं तो आप ड्राइंग करते समय अपारदर्शिता गुण का उपयोग कर सकते हैं । यदि आपको उसके शीर्ष पर फीका प्रभाव की आवश्यकता है, तो बस विभिन्न मूल्यों के साथ फिर से तैयार करें।

Answer 8

आप नहीं कर सकते। यह तत्काल मोड ग्राफिक्स है। लेकिन आप इसे अस्पष्टता के साथ पृष्ठभूमि के रंग में एक आयत खींचकर अनुकरण कर सकते हैं।

यदि छवि एक स्थिर रंग के अलावा किसी और चीज से अधिक है, तो यह काफी मुश्किल हो जाता है। आपको इस मामले में पिक्सेल हेरफेर विधियों का उपयोग करने में सक्षम होना चाहिए। छवि खींचने से पहले क्षेत्र को बचाएं, और फिर बाद में एक अस्पष्टता के साथ उस शीर्ष पर मिश्रण करें।

Comments

नीचे

— रयान बैडौर

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

— एमपीजी

MPG - आपकी टिप्पणी (11 मई) भी गलत है। आप कैनवास की अस्पष्टता को बदल सकते हैं, लेकिन यह वह नहीं है जो ओपी चाहता था, और न ही ऊपर दिए गए उत्तरों में क्या सुझाया जा रहा है।

— इयान