نقاب پوش تصویر میں کسٹم بارڈر شامل کرنے کے لیے جاوا اسکرپٹ کے کینوس کا استعمال کیسے کریں۔

جاوا اسکرپٹ کینوس میں ماسکڈ امیج بارڈرز میں مہارت حاصل کرنا

جاوا اسکرپٹ کے بصری اثرات کی تخلیق میں ایک سے زیادہ تصویر کا فیوژن ایک عام قدم ہے۔ ماسک کے ساتھ تصویر کے دیکھنے کے قابل علاقوں کی وضاحت کرنا ایک بار بار کی تکنیک ہے۔ اگرچہ یہ منفرد شکلیں بنانے کے لیے مددگار ہے، لیکن ان نقاب پوش شکلوں کے گرد بارڈر شامل کرنا مشکل ہو سکتا ہے۔ اگرچہ کینوس جاوا اسکرپٹ میں عنصر وسیع پیمانے پر تصویری ہیرا پھیری کی پیشکش کرتا ہے، اس تصویر کے ارد گرد سرحد کو ایڈجسٹ کرنا آسان نہیں ہے جسے ماسک کیا گیا ہے۔

ڈویلپرز ماسک لگا سکتے ہیں اور تصویروں کو کلپ کر سکتے ہیں۔ کینوس APIاگرچہ پہلے سے طے شدہ طور پر، کوئی بھی بارڈر تیار کیا جاتا ہے جو کینوس کی مستطیل شکل سے مماثل ہوتا ہے۔ جب آپ ایک ایسی سرحد بنانا چاہتے ہیں جو ایک پیچیدہ شکل کے کناروں سے مماثل ہو جس کی وضاحت ماسک کے ذریعے کی گئی ہو، تو یہ ایک مسئلہ پیش کرتا ہے۔ مقصد سیدھی مستطیل سرحد سے آگے ماسک کے عین سفر کی پیروی کرنا ہے۔

یہ پوسٹ وضاحت کرے گی کہ جاوا اسکرپٹ میں تصویری ماسک کو کیسے لاگو کیا جائے اور مزید اہم بات یہ ہے کہ یہ کیسے یقینی بنایا جائے کہ نقاب پوش تصویر کی الگ شکل ایک بارڈر سے گھری ہوئی ہے۔ مزید برآں، ہم ایک ایسے فنکشن پر جائیں گے جو ماسکنگ کو مکمل کرتا ہے لیکن اس کے پاس ابھی تک کوئی متعین بارڈر حل نہیں ہے۔

آپ کینوس میں کمپوزٹ آپریشنز کے ساتھ کام کرنے کا طریقہ سیکھ کر بارڈر کی ظاہری شکل کو ٹھیک کر سکتے ہیں۔ آئیے شروع کریں اور دیکھیں کہ کس طرح جاوا اسکرپٹ کی کینوس کی خصوصیات کو استعمال کرتے ہوئے ایک نقاب پوش تصویر کے گرد ضروری بارڈر شامل کرنا ہے۔

نقاب پوش تصویر پر بارڈر لگانے کا طریقہ پہچاننا

فراہم کردہ اسکرپٹس کا مقصد ایک تصویر کے لیے دوسری تصویر کو بطور ماسک استعمال کرنا ہے، اور پھر کینوس API نقاب پوش شکل کے ارد گرد ایک حسب ضرورت بارڈر شامل کرنے کے لیے۔ ماسک اور مین امیج کے لیے فنکشن کے آغاز میں دو نئی امیج آبجیکٹ بنائے جاتے ہیں۔ بیرونی ذرائع سے تصاویر لوڈ کرتے وقت، CORS کی وجہ سے مسائل کو روکنے کے لیے کراس اوریجن سیٹنگ ضروری ہے۔ ایک کینوس بنتا ہے اور دونوں امیجز لوڈ ہونے کے بعد اس کا تناسب ماسک امیج سے مماثل ہوتا ہے۔ یہ امیج ڈرائنگ کے دوران سائز تبدیل کرنے کے مسائل سے بچتا ہے اور اس بات کی ضمانت دیتا ہے کہ کینوس مناسب جگہ کے ساتھ کام کے لیے تیار ہے۔

اسکرپٹ پھر استعمال کرتا ہے۔ ڈرا امیج() کینوس پر ماسک کی تصویر کھینچنے کا فنکشن۔ ایسا کرنے میں، ماسک کو کینوس پر لگایا جاتا ہے، جو ماسکنگ کے طریقہ کار کے لیے بنیاد کی تہہ کے طور پر کام کرتا ہے۔ ماسک کو درست طریقے سے لاگو کرنے کے لیے گلوبل کمپوزٹ آپریشن کو "سورس ان" پر سیٹ کیا جانا چاہیے۔ کینوس کو ہدایت کی گئی ہے کہ وہ بنیادی تصویر کے صرف ان حصوں کو برقرار رکھے جو ماسک امیج کے ساتھ ملتے ہیں۔ جوہر میں، ماسک اس شکل کی وضاحت کرتا ہے جس میں مرکزی تصویر کو تراش لیا جاتا ہے۔ جب اس کلپنگ ایریا کے اندر مرکزی تصویر کھینچی جاتی ہے تو کمپوزٹ آپریشن کو "ذریعہ اوور" پر دوبارہ ترتیب دیا جاتا ہے، جو پہلے سے تراشے گئے مواد کو متاثر کیے بغیر بارڈر پینٹنگ جیسی اضافی کارروائیوں کو قابل بناتا ہے۔

نقاب پوش شکل پر بارڈر لگانے میں استعمال کرنا شامل ہے۔ اسٹروک() تکنیک کینوس پر مخصوص راستہ یا فارم اس کمانڈ سے ظاہر ہوتا ہے۔ دوسرے حل میں، moveTo() اور lineTo() کو دستی طور پر کینوس کا راستہ بنانے اور ماسک کی سرحدوں کو ٹریس کرنے کے لیے ملایا جاتا ہے۔ ان تکنیکوں کے استعمال کے ساتھ، آپ دستی طور پر بارڈر کی شکل کی وضاحت کر سکتے ہیں اور اس بات کو یقینی بنا سکتے ہیں کہ یہ مستطیل کینوس کی باؤنڈری کے بجائے ماسک کی شکل پر قائم ہے۔ آپ کو سرحد کی ظاہری شکل پر مکمل کنٹرول ہے کیونکہ لکیر کی چوڑائی پراپرٹی سرحد کی موٹائی کا تعین کرتی ہے۔ اسٹروک اسٹائل پراپرٹی اپنا رنگ سیٹ کرتی ہے۔

آخر میں، toDataURL() فنکشن کینوس کو بیس 64 سٹرنگ میں تبدیل کرنے کے لیے استعمال کیا جاتا ہے۔ ایسا کرنے سے، تیار شدہ تصویر — ماسک اور بارڈر شامل — کو ایک فارمیٹ میں تبدیل کر دیا جاتا ہے جسے پروگرام کے دیگر شعبوں میں آسانی سے استعمال کیا جاتا ہے یا سرور پر اپ لوڈ کیا جاتا ہے۔ وقت کی غلطیوں سے بچنے کے لیے، وعدہ اس بات کو یقینی بناتا ہے کہ یہ آپریشن صرف اس وقت ختم ہوتا ہے جب دونوں تصویریں مکمل طور پر لوڈ ہو جائیں۔ یہ اسکرپٹ دکھاتے ہیں کہ تصویر میں ترمیم کرنے کی جدید ترین تکنیکیں، بشمول ماسکنگ اور ایک متحرک بارڈر جو ماسک کی شکل سے بالکل مماثل ہے، کو JavaScript کے کینوس عنصر کے ساتھ پورا کیا جا سکتا ہے۔

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;
    });
}

جاوا اسکرپٹ میں کسٹم بارڈرز کے ساتھ ماسکڈ امیجز کو بڑھانا

آپ کے JavaScript ایپلیکیشن کے صارف کے تجربے کو تصاویر کو ماسک کرنے اور اپنی مرضی کے مطابق سرحدیں سیٹ کرنے کی صلاحیت سے بہت زیادہ بڑھایا جا سکتا ہے۔ کینوس API. ماسکنگ کی مدد سے، آپ یہ فیصلہ کر سکتے ہیں کہ کسی تصویر کے کون سے حصے نظر آتے ہیں جو کہ کسی دوسری تصویر پر منحصر ہے، جسے ماسک کہا جاتا ہے۔ ماسکڈ زون کے ارد گرد ایک بارڈر شامل کرنا ایک ایسا مسئلہ ہے جس کا سامنا بہت سے ڈویلپرز کو ہوتا ہے، خاص طور پر جب ماسک سیدھی مستطیل شکل کا نہیں ہوتا ہے۔ سرحدوں والے پروجیکٹ جو ماسک کے خاکہ سے بالکل مماثل ہوں گے وہ زیادہ چمکدار اور ماہر نظر آئیں گے۔

اس مسئلے کا ایک مفید حل Canvas API استعمال کرنا ہے۔ پاتھ 2 ڈی اعتراض آپ Path2D کا استعمال ایسے پیچیدہ راستوں کو ڈیزائن کرنے کے لیے کر سکتے ہیں جو آپ کے ماسک کی شکل میں فٹ ہوں اور پھر ان کو بارڈر سے گھیر لیں۔ یہ طریقہ آپ کو روایتی مستطیلوں سے آگے بڑھ کر بارڈرز بنانے کی اجازت دیتا ہے جو آپ کے کسٹم ماسک کے کونوں سے بالکل مماثل ہیں۔ استعمال کرنا moveTo() اور lineTo() ایک ساتھ مل کر ماسک کی خاکہ کو ٹریس کرنا آسان بناتا ہے اور ایک بارڈر کی ضمانت دیتا ہے جو بالکل ٹھیک سیدھ میں ہو۔

کارکردگی ایک اور اہم عنصر ہے جس کو مدنظر رکھا جائے، خاص طور پر جب بڑی تصاویر کے ساتھ کام کرنا ہو یا ریئل ٹائم میں متحرک طور پر بارڈرز لگائیں۔ نقاب پوش تصویر کو کیش کرنے، ڈرائنگ کے کاموں کو کم کرنے، اور کینوس کے رینڈرنگ کے عمل کو ہموار کرنے جیسی حکمت عملیوں کو استعمال کرکے آپ کی درخواست کی رفتار کو بہتر بنایا جا سکتا ہے۔ یہاں تک کہ پیچیدہ یا اعلی کارکردگی کی ترتیبات میں بھی، آپ اس بات کی ضمانت دے سکتے ہیں کہ ماسکنگ اور بارڈر ڈرائنگ کے طریقہ کار بے مقصد کاموں کو کم کرکے آسانی سے چلتے ہیں۔