ক্যানভাস উপাদানটির কোনও উপাদানটি আঁকার পরে তার अस्पष्टতা (আলফা, স্বচ্ছতা) কীভাবে পরিবর্তন করবেন?

Question

এইচটিএমএল 5 <canvas>উপাদানটি ব্যবহার করে , আমি একটি চিত্র ফাইল (পিএনজি, জেপিজি, ইত্যাদি) লোড করতে চাই, এটি সম্পূর্ণ স্বচ্ছভাবে ক্যানভাসে আঁকতে এবং তারপরে বিবর্ণ করতে চাই the আমি কীভাবে চিত্রটি লোড করতে হবে এবং এটিতে কীভাবে আঁকতে হবে তা বুঝতে পেরেছি ক্যানভাস, তবে এটি আঁকানোর সাথে সাথে এর অস্বচ্ছতাটি কীভাবে পরিবর্তন করতে হবে তা আমি জানি না।

আমার এখন পর্যন্ত কোডটি এখানে:

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

আমি এই প্রশ্নের উত্তরও খুঁজছি, (স্পষ্ট করে বলতে গেলে, আমি ব্যবহারকারী সংজ্ঞায়িত ধাপে এমন চিত্রের চিত্র আঁকতে সক্ষম হতে চাই যেমন আপনি অস্বচ্ছতার সাথে আকারগুলি কীভাবে আঁকতে পারেন) যদি আপনি আদিম আকারগুলি আঁকেন তবে আপনি ফিল এবং স্ট্রোক সেট করতে পারেন স্বচ্ছতার সংজ্ঞা দিতে আলফা সহ রঙ দিন color আমি এখনই যতদূর সিদ্ধান্ত নিয়েছি, এটি চিত্র অঙ্কনকে প্রভাবিত করবে বলে মনে হয় না।

//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

গ্লোবাল আলফা নিখুঁতভাবে কাজ করে। স্ট্যান্ডার্ডের অংশ: হোয়াটএইচআর.জি.এস.স্পেস

— ওয়েবে-

সুনির্দিষ্টভাবে বলতে গেলে, এটি সম্পত্তি যুক্ত canvasউপাদান নয় globalAlpha, তবে আপনি ক্যানভাস থেকে যে প্রসঙ্গটি পেয়েছেন তা।

— স্টিভ ব্ল্যাকওয়েল

Ctx.save () এবং ctx.restore () সম্পর্কে আয়ানের মন্তব্য নীচে গ্লোবালআল্ফাকে অন্যান্য ক্যানভাসকে প্রভাবিত করতে বাধা দেয়।

— অ্যারসবোরো

ক্যানভাসে কী আঁকছে তার অস্বচ্ছতা নিয়ন্ত্রণ করার চেয়ে আমার কাছে মনে হচ্ছে, এটি সহজ হবে এবং চিত্রটি আঁকার পরে পুরো ক্যানভাসের অস্বচ্ছতা কেবলমাত্র একবার নিয়ন্ত্রণ করার উদ্দেশ্যে উদ্দেশ্যটি পরিবেশন করবে (কেবল একবার)। এটি করার জন্য সাধারণ সিএসএস / শৈলী পদ্ধতি ব্যবহার করুন (ক্যানভ্যাসিলেটমেন্ট.স্টাইল.ওপাসিটি = '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মধ্যে স্টাফগুলিতে পরিবর্তনগুলি আবৃত করুন (আসলে এগুলি প্রচুর ব্যবহার করুন) tosaverestore

Comments

গ্লোবালআল্ফা ক্যানভাসের সমস্ত চিত্র বা চিত্র ঝাপসা করে দেবে, এটি আপনি চান না।

— ক্রম্পী

@ গ্রম্পি - না, globalAlphaকিছু ঝাপসা করে না। এটা সব এর জন্য আলফা সেট হবে পরবর্তী (এটা ইতিমধ্যে টানা কিছু পরিবর্তন করে না) অঙ্কন, যার কারণে উদাহরণস্বরূপ কোডে আমি এটি মোড়ানো saveএবং restore, সীমিত করতে এটা কি প্রযোজ্য।

— ইয়ান

নিশ্চিত না যে সিটিএক্স.রেস্টোর () গ্লোবালআল্ফাকে পুনরুদ্ধার করবে আপনার শেষে এই কাজটিও করতে হতে পারে (কমপক্ষে আমার Chrome এর পূর্ববর্তী সংস্করণগুলি ছিল) ctx.globalAlpha = 1;

— শান

@ সীন - আপনি যদি নিশ্চিত না হন তবে আপনার পরীক্ষা করা উচিত। এটি অবশ্যই খুব পুরানো ক্রোম ছিল, এটি এখন সমস্ত প্ল্যাটফর্মগুলিতে কাজ করে: jsfiddle.net/y0z9h9m7

— ইয়ান

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>

কীটি বিশ্বব্যাপী আলফা সম্পত্তি lp

উইন 7 এ আইই 9, এফএফ 5, সাফারি 5 এবং ক্রোম 12 দিয়ে পরীক্ষিত।

Answer 4

পোস্টটি এখন পর্যন্ত পুরানো আমার পরামর্শ নিয়ে যাব। পরামর্শটি ক্যানভাস 2 ডি প্রসঙ্গে পিক্সেল ম্যানিপুলেশনের উপর ভিত্তি করে। এমডিএন থেকে:

আপনি বাইট স্তরে ক্যানভ্যাসগুলিতে পিক্সেল ডেটা সরাসরি পরিচালনা করতে পারেন

পিক্সেল পরিচালনা করতে আমরা এখানে দুটি ফাংশন ব্যবহার করব - getImageData এবং putImageData

getImageData ফাংশন ব্যবহার:

var myImageData = context.getImageData (বাম, শীর্ষ, প্রস্থ, উচ্চতা);

এবং putImageData সিনট্যাক্স:

প্রসঙ্গ.পুট আইজ্যাডেটা (মাই আইমেজডেটা, ডেক্স, ডাই); // ডিএক্স, ডাই - এক্স এবং ওয়াই আপনার ক্যানভাসে অফসেট করুন

যেখানে প্রসঙ্গটি আপনার ক্যানভাস 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 হল অফসেট, 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';

আপনি নিজের "শেডার" তৈরি করতে পারেন - এখানে এমডিএন এর সম্পূর্ণ নিবন্ধটি দেখুন

Answer 5

আপনি পারেন। গন্তব্য আউট গ্লোবাল সম্মিলিত অপারেশন ব্যবহার করে স্বচ্ছ ক্যানভাস দ্রুত ফিকে হতে পারে । এটি ১০০% নিখুঁত নয়, কখনও কখনও এটি কিছু চিহ্ন খুঁজে ফেলে তবে যা প্রয়োজন তা নির্ভর করে এটি টুইট করা যায় (যেমন 'সোর্স-ওভার' ব্যবহার করুন এবং এটি আলফায় সাদা রঙ দিয়ে 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

আমি মনে করি এটি প্রশ্নের উত্তরে সর্বোত্তম উত্তর দেয় এটি ইতিমধ্যে আঁকানো কিছুটির আলফা মানকে পরিবর্তিত করে। এই প্রশ্নটি যখন জিজ্ঞাসা করা হয়েছিল তখন এটি সম্ভবত অপির অংশ ছিল না।

2 ডি প্রসঙ্গকে দেওয়া 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 বছর আগে আরও বিস্তারিতভাবে দেওয়া সোল_ম্যানের উত্তর থেকে কীভাবে আলাদা?

— ব্রেডি

Answer 7

আপনি ব্যবহার করেন তাহলে jCanvas গ্রন্থাগার আপনি ব্যবহার করতে পারেন অস্বচ্ছতা সম্পত্তি যখন অঙ্কন। যদি এর উপরে আপনার বিবর্ণ প্রভাব প্রয়োজন হয়, তবে বিভিন্ন মান সহ কেবল পুনরায় আঁকুন।

Answer 8

আপনি পারবেন না। এটি তাত্ক্ষণিক মোড গ্রাফিক্স। তবে আপনি এটিকে অস্বচ্ছতার সাথে ব্যাকগ্রাউন্ড রঙে একটি আয়তক্ষেত্র আঁকিয়ে এটিকে সাজিয়ে তুলতে পারেন।

চিত্রটি যদি ধ্রুব রঙ ছাড়া অন্য কোনও কিছুর উপরে চলে যায় তবে তা বেশ খানিকটা জটিল হয়ে ওঠে। এই ক্ষেত্রে আপনার পিক্সেল ম্যানিপুলেশন পদ্ধতিগুলি ব্যবহার করতে সক্ষম হওয়া উচিত। চিত্র আঁকার আগে অঞ্চলটি সংরক্ষণ করুন এবং তারপরে একটি অস্বচ্ছতার সাথে উপরেটি পিছনে মিশ্রিত করুন।

Comments

এটি নীচে

— রায়ান বাদুর

আপনি সঠিক, যদিও আপনি ক্যানভাসে আঁকেন এমন একটি উপাদানের অস্বচ্ছতা পরিবর্তন করতে পারবেন না, আপনি পুরো ক্যানভাসের অস্বচ্ছতা পরিবর্তন করতে পারবেন। কিছু ক্ষেত্রে যথেষ্ট হতে পারে।

— এমপিজি

এমপিজি - আপনার মন্তব্য (11 মে )ও ভুল। আপনি ক্যানভাসের অস্বচ্ছতা পরিবর্তন করতে পারেন, তবে এটি ওপি যা চেয়েছিল তা নয় বা উপরের উত্তরগুলিতে কী পরামর্শ দেওয়া হচ্ছে তা নয়।

— ইয়ান