كيفية استخدام لوحة JavaScript لإضافة حدود مخصصة إلى صورة مقنعة

إتقان حدود الصورة المقنعة في JavaScript Canvas

يعد دمج الصور المتعددة خطوة شائعة في إنشاء تأثيرات JavaScript المرئية. يعد تحديد المناطق القابلة للعرض في الصورة باستخدام قناع أسلوبًا شائعًا. على الرغم من أن هذا مفيد في إنشاء نماذج فريدة، إلا أنه قد يكون من الصعب إضافة حد حول تلك الأشكال المقنعة. على الرغم من يوفر العنصر الموجود في JavaScript معالجة واسعة النطاق للصور، فليس من السهل ضبط الحدود حول الصورة التي تم إخفاؤها.

يمكن للمطورين تطبيق الأقنعة وقص الصور بطرق مبتكرة باستخدام ، على الرغم من أن أي حد يتم إنشاؤه يميل إلى مطابقة الشكل المستطيل للوحة القماش بشكل افتراضي. عندما ترغب في إنشاء حد يطابق حواف شكل معقد يتم تعريفه بواسطة قناع، فإن هذا يمثل مشكلة. الهدف هو متابعة رحلة القناع الدقيقة خارج الحدود المستطيلة المباشرة.

ستشرح هذه المقالة كيفية تطبيق قناع الصورة في JavaScript، والأهم من ذلك، كيفية التأكد من أن الشكل المميز للصورة المقنعة محاط بحدود. بالإضافة إلى ذلك، سوف نتناول وظيفة تكمل الإخفاء ولكن ليس لديها حل محدد للحدود بعد.

يمكنك ضبط مظهر الحدود من خلال تعلم كيفية التعامل مع العمليات المركبة في اللوحة القماشية. لنبدأ ونرى كيفية استخدام ميزات قماش جافا سكريبت لإضافة الحدود الضرورية حول الصورة المقنعة.

يأمر	مثال للاستخدام
globalCompositeOperation	يتم تحديد تكوين إجراءات الرسم على القماش من خلال هذه الميزة. تتأكد globalCompositeOperation ='source-in' في المثال من أن صورة القناع تقوم بقص الصورة الرئيسية بحيث لا يتم رؤية سوى المناطق المتقاطعة.
toDataURL()	يحول معلومات اللوحة القماشية إلى صورة مشفرة باستخدام Base64. وهذا يجعل من الممكن استخدام الصورة النهائية بتنسيق PNG بعد تطبيق القناع والحدود. يتم إنتاج مخرجات صورة المثال باستخدام Canvas.toDataURL('image/png').
crossOrigin	تحترم هذه الميزة القيود الأمنية من خلال تمكين استخدام الصور المحملة من مجال مختلف في اللوحة القماشية. MaskImg.crossOrigin = 'anonymous' يضمن إمكانية الوصول إلى صورة القناع دون التسبب في مشاكل CORS.
beginPath()	على اللوحة القماشية، يمكن بدء مسار جديد باستخدام هذه الطريقة. تستدعي الطريقة الثانية ctx.beginPath() للتأكد من أن المسار يلتزم بمحيط القناع أثناء رسم حد مخصص حول الصورة المقنعة.
moveTo()	مع هذا الإجراء، لا يتم عمل أي رسومات؛ وبدلاً من ذلك، يتم نقل "القلم" إلى مكان البداية الجديد. تم وضع نقطة بداية الحدود في المثال باستخدام ctx.moveTo(0, 0)، وهو أمر ضروري لرسم الحدود بدقة حول حدود القناع.
lineTo()	باستخدام الإحداثيات المعطاة كنقطة بداية، ترسم هذه التقنية خطًا مستقيمًا. يتم تحديد حدود الصورة المقنعة بواسطة الخطوط المرسومة في الحل باستخدام ctx.lineTo(maskImg.width, 0).
stroke()	على طول المسار المحدد، يرسم الحدود أو الخطوط. على سبيل المثال، يتم استخدام moveTo() وlineTo() لتحديد نموذج القناع، ثم يتم استخدام ctx.stroke() لتطبيق الحدود حول الصورة المقنعة.
lineWidth	يحدد مدى سماكة الخطوط المرسومة على القماش. يقوم البرنامج النصي بإنشاء حد بسمك 5 بكسل حول شكل القناع باستخدام ctx.lineWidth = 5.
strokeStyle	يشير إلى لون الحدود أو نمطها. تم تعيين لون الحدود في المثال إلى اللون الأحمر باستخدام ctx.strokeStyle ='red'.

التعرف على كيفية تطبيق حد على صورة مقنعة

الهدف من البرامج النصية المتوفرة هو استخدام صورة أخرى كقناع لصورة واحدة، ثم استخدام لإضافة حد مخصص حول الشكل المقنع. يتم إنشاء كائنين صورة جديدين في بداية الوظيفة للقناع والصورة الرئيسية. عند تحميل الصور من مصادر خارجية، يعد إعداد Cross Origin ضروريًا لمنع المشكلات الناجمة عن CORS. يتم تشكيل لوحة قماشية ويتم ضبط أبعادها لتتناسب مع صورة القناع بمجرد تحميل الصورتين. يؤدي هذا إلى تجنب مشاكل تغيير الحجم أثناء رسم الصورة ويضمن أن اللوحة القماشية جاهزة للعمل في المنطقة المناسبة.

ثم يستخدم البرنامج النصي وظيفة لرسم صورة القناع على القماش. عند القيام بذلك، يتم تطبيق القناع على القماش، ليكون بمثابة الطبقة الأساسية لإجراء الإخفاء. يجب تعيين العملية المركبة العامة على "مصدر-داخل" لتطبيق القناع بشكل صحيح. يُطلب من اللوحة القماشية الاحتفاظ فقط بمساحات الصورة الأساسية التي تتطابق مع صورة القناع. في الأساس، يحدد القناع الشكل الذي سيتم قص الصورة الرئيسية عليه. تتم إعادة تعيين العملية المركبة إلى "المصدر الزائد" عندما يتم رسم الصورة الرئيسية داخل منطقة القطع هذه، مما يتيح إجراءات إضافية مثل رسم الحدود دون التأثير على المحتوى الذي تم قصه مسبقًا.

يتضمن تطبيق حد على الشكل المقنع استخدام تقنية. تتم الإشارة إلى المسار أو النموذج المحدد على اللوحة القماشية بواسطة هذا الأمر. في الحل الثاني، يتم دمج moveTo() وlineTo() لإنشاء مسار اللوحة القماشية يدويًا وتتبع حدود القناع. باستخدام هذه التقنيات، يمكنك تحديد شكل الحدود يدويًا والتأكد من التصاقها بشكل القناع بدلاً من حدود القماش المستطيلة. لديك سيطرة كاملة على مظهر الحدود لأن الخاصية تحدد سمك الحدود و الملكية تحدد لونها.

وأخيرًا، يتم استخدام الدالة toDataURL() لتحويل اللوحة القماشية إلى سلسلة Base64. ومن خلال القيام بذلك، يتم تحويل الصورة النهائية - بما في ذلك القناع والحدود - إلى تنسيق يمكن استخدامه بسهولة في مناطق أخرى من البرنامج أو تحميله على الخادم. ومن أجل تجنب أخطاء التوقيت، يتأكد الوعد من أن هذه العملية تنتهي فقط عندما يتم تحميل الصورتين بالكامل. توضح هذه البرامج النصية كيف يمكن تحقيق تقنيات تعديل الصورة المتطورة، بما في ذلك إخفاء وتطبيق حدود ديناميكية تتطابق بدقة مع ملامح القناع، باستخدام عنصر قماش 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

يمكن تحسين تجربة المستخدم لتطبيق JavaScript بشكل كبير من خلال القدرة على إخفاء الصور وتعيين حدود مخصصة عند التعامل مع ملفات . بمساعدة الإخفاء، يمكنك تحديد مناطق الصورة التي تكون مرئية اعتمادًا على صورة أخرى، تُعرف بالقناع. تعد إضافة حد حول المنطقة المقنعة مشكلة يواجهها العديد من المطورين، خاصة عندما لا يكون القناع شكلاً مستطيلاً واضحًا. ستبدو المشاريع ذات الحدود التي تتطابق بدقة مع مخطط القناع أكثر صقلًا وخبرة.

الحل المفيد لهذه المشكلة هو استخدام Canvas API هدف. يمكنك استخدام Path2D لتصميم مسارات معقدة تناسب محيط قناعك ثم تحيطها بحدود. تسمح لك هذه الطريقة بإنشاء حدود تتطابق بدقة مع زوايا قناعك المخصص، وتتجاوز المستطيلات التقليدية. استخدام و معًا يجعل من السهل تتبع مخطط القناع ويضمن محاذاة الحدود بدقة.

يعد الأداء عاملًا مهمًا آخر يجب أخذه في الاعتبار، خاصة عند العمل باستخدام صور أكبر أو تطبيق الحدود ديناميكيًا في الوقت الفعلي. يمكن تحسين سرعة التطبيق الخاص بك من خلال استخدام إستراتيجيات مثل التخزين المؤقت للصورة المقنعة، وتقليل عمليات الرسم، وتبسيط عملية عرض اللوحة القماشية. حتى في الإعدادات المعقدة أو عالية الأداء، يمكنك ضمان سير إجراءات الإخفاء ورسم الحدود بسلاسة عن طريق تقليل الإجراءات التي لا معنى لها.

1. في جافا سكريبت، كيف يمكنني استخدام صورة أخرى لإخفاء صورة؟
2. استخدام تعيين ل ، ارسم القناع على اللوحة القماشية لإخفاء الصورة باستخدام . من أجل مطابقة القناع، سيؤدي هذا إلى اقتصاص الصورة الأساسية.
3. كيف يمكنني إنشاء حدود لصورة مقنعة تتوافق مع شكلها؟
4. بعد تحديد مسار القناع مع و ، استخدم تقنية. سيتيح لك ذلك تطويق شكل القناع بحدود مخصصة.
5. ما هو الغرض من في التلاعب بالقماش؟
6. يتم تحويل محتوى اللوحة القماشية إلى صورة مشفرة بـ Base64 عبر ملف وظيفة، مما يجعلها سهلة الاستخدام أو التوزيع كصورة PNG.
7. كيف يمكنني تحسين عمليات اللوحة القماشية لتحقيق الأداء؟
8. قلل من كمية عمليات الرسم وفكر في تخزين العناصر شائعة الاستخدام لزيادة سرعة الرسم إلى الحد الأقصى. وهذا يحافظ على عمل التطبيق الخاص بك بسلاسة ويقلل من عدد عمليات إعادة الرسم.
9. هل يمكنني تحميل صور ذات أصل مشترك في لوحة قماشية؟
10. نعم، ولكن لإتاحة الصورة دون التسبب في صعوبات CORS، تحتاج إلى ضبط الإعداد الملكية ل .

في تطبيقات JavaScript، يعد إخفاء الصور وتطبيق الحدود المخصصة في اللوحة وسيلة فعالة لإنشاء عناصر مرئية مصقولة. يتمتع المطورون بالقدرة على التعامل مع عرض الصور وتصميمها من خلال الاستفادة من وأوامر الرسم المتطورة مثل وتعريفات المسار

يتم ضمان الأداء السلس من خلال تحسين عمليات الحدود والإخفاء بعناية، خاصة بالنسبة للصور الكبيرة. يوفر هذا البرنامج التعليمي طريقة مفيدة لرسم الحدود ديناميكيًا حول الصور غير المستطيلة، وهو أمر مفيد عند تطوير التطبيقات عبر الإنترنت التي تتميز بالجمال والاستجابة.