একটি মুখোশযুক্ত ছবিতে একটি কাস্টম সীমানা যুক্ত করতে জাভাস্ক্রিপ্টের ক্যানভাস কীভাবে ব্যবহার করবেন

জাভাস্ক্রিপ্ট ক্যানভাসে মাস্কড ইমেজ বর্ডার আয়ত্ত করা

একাধিক ছবি ফিউশন জাভাস্ক্রিপ্ট ভিজ্যুয়াল ইফেক্ট তৈরির একটি সাধারণ পদক্ষেপ। একটি মুখোশের সাহায্যে একটি চিত্রের দর্শনীয় ক্ষেত্রগুলিকে সংজ্ঞায়িত করা একটি ঘন ঘন কৌশল। যদিও এটি অনন্য ফর্ম তৈরির জন্য সহায়ক, তবে সেই মুখোশযুক্ত আকারগুলির চারপাশে একটি সীমানা যুক্ত করা চ্যালেঞ্জিং হতে পারে। যদিও ক্যানভাস জাভাস্ক্রিপ্টের উপাদানটি ব্যাপক ইমেজ ম্যানিপুলেশন অফার করে, মাস্ক করা ছবির চারপাশে সীমানা সামঞ্জস্য করা সহজ নয়।

বিকাশকারীরা এর সাথে কল্পনাপ্রসূত উপায়ে মাস্ক এবং ক্লিপ ছবি প্রয়োগ করতে পারে ক্যানভাস API, যদিও ডিফল্টরূপে, যে কোনো সীমানা তৈরি করা ক্যানভাসের আয়তক্ষেত্রাকার আকৃতির সাথে মেলে। আপনি যখন একটি মাস্ক দ্বারা সংজ্ঞায়িত একটি জটিল আকারের প্রান্তের সাথে মেলে এমন একটি সীমানা তৈরি করতে চান, এটি একটি সমস্যা উপস্থাপন করে। উদ্দেশ্য সরল আয়তক্ষেত্রাকার সীমানা ছাড়িয়ে মুখোশের সুনির্দিষ্ট যাত্রা অনুসরণ করা।

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

ক্যানভাসে যৌগিক ক্রিয়াকলাপগুলির সাথে কীভাবে কাজ করতে হয় তা শিখে আপনি সীমানার চেহারাটি সূক্ষ্ম-টিউন করতে পারেন। চলুন শুরু করা যাক এবং একটি মুখোশযুক্ত চিত্রের চারপাশে প্রয়োজনীয় সীমানা যুক্ত করতে জাভাস্ক্রিপ্টের ক্যানভাস বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা দেখুন।

একটি মুখোশযুক্ত ছবিতে কীভাবে সীমানা প্রয়োগ করবেন তা সনাক্ত করা

প্রদত্ত স্ক্রিপ্টগুলির উদ্দেশ্য হল একটি চিত্রের জন্য একটি মুখোশ হিসাবে অন্য ছবি ব্যবহার করা এবং তারপর ব্যবহার করা ক্যানভাস API মুখোশ আকৃতির চারপাশে একটি কাস্টম সীমানা যোগ করতে। মুখোশ এবং প্রধান চিত্রের জন্য ফাংশনের শুরুতে দুটি নতুন ইমেজ অবজেক্ট তৈরি করা হয়। বাহ্যিক উত্স থেকে ফটো লোড করার সময়, CORS-এর কারণে সমস্যাগুলি প্রতিরোধ করতে ক্রস-অরিজিন সেটিং অপরিহার্য। একটি ক্যানভাস তৈরি হয় এবং উভয় ছবি লোড হয়ে গেলে এর অনুপাত মাস্ক ইমেজের সাথে সামঞ্জস্য করা হয়। এটি চিত্র অঙ্কনের সময় আকার পরিবর্তনের সমস্যাগুলি এড়ায় এবং গ্যারান্টি দেয় যে ক্যানভাসটি উপযুক্ত এলাকার সাথে কাজের জন্য প্রস্তুত করা হয়েছে।

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

মুখোশযুক্ত আকারে একটি সীমানা প্রয়োগ করা ব্যবহার করা জড়িত স্ট্রোক() কৌশল ক্যানভাসে নির্দিষ্ট পথ বা ফর্ম এই কমান্ড দ্বারা নির্দেশিত হয়। দ্বিতীয় সমাধানে, moveTo() এবং lineTo() ম্যানুয়ালি ক্যানভাস পাথ তৈরি করতে এবং মুখোশের সীমানা ট্রেস করতে একত্রিত হয়। এই কৌশলগুলি ব্যবহার করে, আপনি ম্যানুয়ালি সীমানার আকৃতি নির্দিষ্ট করতে পারেন এবং নিশ্চিত করতে পারেন যে এটি আয়তাকার ক্যানভাসের সীমানার পরিবর্তে মুখোশের আকৃতি মেনে চলে। আপনার সীমান্তের চেহারার উপর সম্পূর্ণ নিয়ন্ত্রণ আছে কারণ লাইন প্রস্থ সম্পত্তি সীমানা এর বেধ সেট করে এবং স্ট্রোক স্টাইল সম্পত্তি তার রঙ সেট করে।

সবশেষে, toDataURL() ফাংশনটি ক্যানভাসকে একটি বেস64 স্ট্রিং-এ রূপান্তর করতে ব্যবহৃত হয়। এটি করার মাধ্যমে, সমাপ্ত চিত্র - মাস্ক এবং বর্ডার অন্তর্ভুক্ত - একটি ফর্ম্যাটে রূপান্তরিত হয় যা প্রোগ্রামের অন্যান্য ক্ষেত্রে সহজেই ব্যবহার করা হয় বা একটি সার্ভারে আপলোড করা হয়। সময়ের ভুলগুলি এড়াতে, প্রতিশ্রুতি নিশ্চিত করে যে এই অপারেশনটি শুধুমাত্র তখনই শেষ হবে যখন দুটি ছবি সম্পূর্ণরূপে লোড হয়ে যাবে। এই স্ক্রিপ্টগুলি দেখায় যে কীভাবে জাভাস্ক্রিপ্টের ক্যানভাস উপাদানের সাথে সঠিকভাবে মেলে এমন একটি গতিশীল সীমানা মাস্কিং এবং প্রয়োগ করা সহ অত্যাধুনিক চিত্র পরিবর্তন কৌশলগুলি দেখায়।

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'red'; // Border color
                ctx.stroke(); // Draw border around mask
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

function applyFiltersAndConvertToBase64(imageUrl, materialImage) {
    return new Promise((resolve, reject) => {
        const maskImg = new Image();
        const mainImg = new Image();
        maskImg.crossOrigin = "anonymous";
        mainImg.crossOrigin = "anonymous";
        let imagesLoaded = 0;
        const onLoad = () => {
            imagesLoaded++;
            if (imagesLoaded === 2) {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = maskImg.width;
                canvas.height = maskImg.height;
                ctx.drawImage(maskImg, 0, 0);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(mainImg, 0, 0, maskImg.width, maskImg.height);
                ctx.globalCompositeOperation = 'source-over';
                // Create path for the mask shape
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(maskImg.width, 0);
                ctx.lineTo(maskImg.width, maskImg.height);
                ctx.lineTo(0, maskImg.height);
                ctx.closePath();
                ctx.lineWidth = 5; // Border thickness
                ctx.strokeStyle = 'blue'; // Border color
                ctx.stroke(); // Apply the border along the path
                const base64Image = canvas.toDataURL('image/png');
                resolve(base64Image);
            }
        };
        maskImg.onload = onLoad;
        mainImg.onload = onLoad;
        maskImg.onerror = reject;
        mainImg.onerror = reject;
        maskImg.src = imageUrl;
        mainImg.src = materialImage;
    });
}

জাভাস্ক্রিপ্টে কাস্টম বর্ডার সহ মুখোশযুক্ত চিত্রগুলি উন্নত করা

আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটির ব্যবহারকারীর অভিজ্ঞতাটি চিত্রগুলিকে মাস্ক করার এবং কাস্টম সীমানা সেট করার ক্ষমতা দ্বারা ব্যাপকভাবে উন্নত করা যেতে পারে ক্যানভাস API. মুখোশের সাহায্যে, আপনি একটি চিত্রের কোন অংশগুলি দৃশ্যমান তা অন্য একটি চিত্রের উপর নির্ভর করে নির্ধারণ করতে পারেন, যা মাস্ক নামে পরিচিত। মুখোশযুক্ত অঞ্চলের চারপাশে একটি সীমানা যুক্ত করা একটি সমস্যা যা অনেক বিকাশকারীর মুখোমুখি হয়, বিশেষত যখন মুখোশটি একটি সরল আয়তক্ষেত্রাকার আকৃতি নয়। মাস্কের রূপরেখার সাথে অবিকল মেলে এমন সীমানা সহ প্রকল্পগুলি আরও পালিশ এবং বিশেষজ্ঞ দেখাবে।

এই সমস্যার একটি কার্যকর সমাধান হল Canvas API ব্যবহার করা পাথ2ডি বস্তু আপনি Path2D ব্যবহার করতে পারেন জটিল রুট ডিজাইন করতে যা আপনার মুখোশের কনট্যুরগুলির সাথে মানানসই হয় এবং তারপরে একটি সীমানা দিয়ে ঘিরে থাকে। এই পদ্ধতিটি আপনাকে সীমানা তৈরি করতে দেয় যা আপনার কাস্টম মাস্কের কোণগুলির সাথে সঠিকভাবে মেলে, প্রচলিত আয়তক্ষেত্রের বাইরে গিয়ে। ব্যবহার করে moveTo() এবং lineTo() একসাথে এটি মুখোশের রূপরেখা ট্রেস করা সহজ করে তোলে এবং একটি সীমানা নিশ্চিত করে যা সুনির্দিষ্টভাবে সারিবদ্ধ।

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