كيفية استخدام html2canvas لتحويل كود html إلى صور

html2canvas هي مكتبة مفتوحة المصدر مشهورة جدًا لالتقاط لقطات الشاشة من صفحات الويب في المتصفح، وهي سهلة الاستخدام ولها وظائف قوية.

استخدام html2canvas بسيط جدًا، فهو بسيط مثل تمرير عنصر DOM ثم الحصول على اللوحة القماشية من خلال رد الاتصال:

1.html2canvas ينشئ محتوى صورة قماشية عن طريق تحليل النمط الفعلي للعنصر، لذلك لديه متطلبات للتخطيط الفعلي والعرض المرئي للعنصر. إذا كنت تريد التقاط لقطة شاشة كاملة، فمن الأفضل فصل العنصر عن تدفق المستند (مثل الموضع: المطلق)

2. صورة اللوحة القماشية التي يتم إنشاؤها افتراضيًا تكون ضبابية جدًا على أجهزة شبكية العين، ويمكن أن تؤدي معالجتها إلى صورة 2x إلى حل هذه المشكلة:

 var w = $(#code).width(); var h = $(#code).height();// اضبط عرض اللوحة القماشية وارتفاعها على ضعف عرض الحاوية وارتفاعها var Canvas = document .createElement(canvas ); Canvas.width = w * 2; Canvas.height = h * 2; Canvas.getContext(2d);// ثم قم بقياس اللوحة القماشية ومضاعفة الصورة للرسم عليها context.scale(2,2); html2canvas(document.querySelector(#code), { Canvas: Canvas, onrendered: function ( قماش) { ... } })؛

1.هيكل كود HTML

 <section class=share_popup id=html2canvas> <p>إن استخدام html2canvas بسيط للغاية، مثل تمرير عنصر DOM ثم الحصول على اللوحة من خلال رد الاتصال</p> <p><img src=1.jpg >< /p> <p>إن استخدام html2canvas بسيط للغاية، مثل تمرير عنصر DOM ثم الحصول على اللوحة القماشية من خلال رد اتصال</p> </section>

2.js هيكل التعليمات البرمجية

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendered: function (canvas) { var image = Canvas.toDataURL(image/png) var pHtml = <img src=+image+ />;

ما ورد أعلاه هو مقدمة المحرر لكيفية استخدام html2canvas لتحويل كود html إلى صور، وآمل أن يكون ذلك مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!