في السابق، لم يكن بإمكاننا التقاط الصور إلا من خلال أدوات لقطة الشاشة الأخرى. أصبحت وظائف المتصفحات الحديثة أكثر قوة مع الانتشار التدريجي لـ H5، حيث يمكن للمتصفح نفسه التقاط لقطات شاشة. يعد html2canvas مكونًا إضافيًا للواجهة الأمامية، حيث يتمثل مبدأه في رسم عقد Dom في Canvas. على الرغم من أنها مريحة للغاية، إلا أنها تحتوي على القيود التالية:
نظرًا لأن سيناريو الاستخدام الخاص بي بسيط جدًا، فقم بتسجيل معلومات الاستثناء، وقمت أيضًا بتحديد صفحة الاستثناء بنفسي، فإن html2canvas كافٍ للاستخدام.
في المرة الأولى التي استخدمت فيها html2canvas، كان الغرض هو التقاط لقطة شاشة للصفحة بأكملها وإنشاء صورة ليحفظها المستخدم.
دعونا أولاً نلقي نظرة على الشكل الذي تبدو عليه عروض HTML.
من الصورة المقدمة بواسطة HTML، يمكنك أن ترى أن الصورة أعلاه لها تأثير زاوية مستديرة، ولكن عندما استخدمت html2canvas لتحويل الصورة، وجدت أن تأثير الزاوية المستديرة للصورة لم يضيع.
أصبح مثل هذا. بعد التفكير في العديد من الحلول، قررت أخيرًا تحويل الزوايا الدائرية في الخلف إلى صورة خلفية، وتكون خلفية الدائرة الوسطى شفافة، ثم يتم تراكبها على الصورة الأصلية من خلال تحديد الموضع المطلق، وهو ما يعادل القناع. تأثير.
بالطبع، يجب أن تكون عقدة DOM لصورة القناع أسفل الصورة، مما يتطلب زوايا مستديرة، على غرار
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--الصورة الأصلية تتطلب زوايا مستديرة--> <img src=/template/images/avatar .png class=img-response style=position: مطلق;><!--صورة القناع--></div>
بمجرد إنشائها، سوف تبدو طبيعية.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--الصورة الأصلية تتطلب زوايا مستديرة--> <img src=/template/images/avatar .png class=img-response style=position: مطلق;><!--صورة القناع--></div>نسخ الرمز