تحويل HTML إلى صورة — من HTML وCSS إلى PNG
يعرض HTML وCSS الملصوقين ويلتقطهما بصيغة PNG بعرض ومقياس محددين
تعمل في متصفحك · لا يُرفع أي شيء
الصق جزءًا (<div>…) أو مستندًا كاملًا (<html>…). في حالة المستند الكامل يُستخدم محتوى <body> وكتل <style> فقط.
أنماط إضافية. تُطبَّق أيضًا كتل <style> الموجودة داخل HTML.
يُنسَّق المحتوى بهذا العرض (px) ويُلتقط بارتفاعه الكامل. من 100 إلى 4000.
2× حاد مثل شاشات Retina، و3× يناسب الطباعة. يزداد عدد البكسلات بمربع المقياس.
لأسباب أمنية ولحماية الخصوصية، لا تُطلب أبدًا الصور والخطوط وملفات CSS الموجودة على أي عنوان غير data: أو blob:، لا في المعاينة ولا أثناء الالتقاط، ولا تُشغَّل السكربتات أبدًا. تُكتب النصوص بالخطوط المثبتة على جهازك.
المعاينة
اكتب شيئًا من HTML لرؤية المعاينة.
ما الذي تفعله الأداة؟
تحفظ هذه الأداة جزءًا من HTML وCSS، مثل بطاقة أو إعلان أو جدول أو زر أو لافتة بريد إلكتروني، بصيغة صورة PNG. استخدمها لعرض النتيجة المرسومة في التوثيق أو في تدوينة، أو لبناء بطاقة إعلان لوسائل التواصل الاجتماعي بالشيفرة، أو لمشاركة جزء من تصميم كصورة. وعلى خلاف قص لقطة شاشة، تحصل على عرض ومقياس دقيقين.
طريقة الاستخدام
- الصق الشيفرة في HTML: مستندًا كاملًا (
<html>…) أو جزءًا فقط. تستخدم الأداة لأول مرة؟ انقر إدراج مثال. - يمكنك إضافة أنماط في CSS (اختياري). وتُطبَّق أيضًا كتل
<style>الموجودة داخل HTML. - اضبط عرض الالتقاط (px) والمقياس (1× أو 2× أو 3×) والخلفية (بيضاء أو شفافة).
- تحقق من المعاينة، وانقر إنشاء PNG، ثم حفظ PNG.
كيف تعمل الأداة؟
- معاينة آمنة: تُرسم الشيفرة داخل iframe معزول (sandbox). يمنع العزل تشغيل السكربتات، وتحظر سياسة أمان المحتوى (CSP) كل طلب شبكة باستثناء عناوين data: وblob:.
- إزالة العناوين الخارجية: تُقرأ الشيفرة الملصوقة أولًا بمحللي HTML وCSS الخاصين بالمتصفح (لا يُحمَّل شيء في هذه الخطوة). كل عنوان ليس data: أو blob: في src وsrcset وposter وhref في SVG وسمات style و
<style>وurl() وimage-set() و@import و@font-face يُزال ويُعرض لك في قائمة. وقبل الالتقاط مباشرة تُفحص المعاينة مجددًا، وأثناء الالتقاط لا يمكن قراءة إلا عناوين data: وblob:، فلا يذهب أي طلب إلى عنوان خارجي أبدًا. أما الروابط (<a href>) فلا تؤثر في الصورة، لذا لا تُدرج في القائمة؛ بل تُعدَّل بحيث لا يؤدي النقر عليها إلى أي مكان. - حجم الالتقاط: يُنسَّق المحتوى بالعرض المختار ويُلتقط بارتفاعه الحقيقي. أبعاد PNG هي العرض × المقياس في الارتفاع × المقياس.
- حد الحجم: فوق ما يستطيع المتصفح معالجته (16,777,216 بكسل على iPhone وiPad، و16,384 px لكل ضلع) يُخفَّض المقياس تلقائيًا وتخبرك الصفحة بذلك.
- المستندات الكاملة: يُستخدم محتوى
<body>وكل كتل<style>فقط؛ وتُحذف وسوم<head>الأخرى. - يستخدم الالتقاط مكتبة html-to-image (رخصة MIT).
أمثلة
| المدخل | الإعدادات | النتيجة |
|---|---|---|
| بطاقة الإعلان في المثال | العرض 800، المقياس 2× | PNG بعرض 1600 px |
جدول <table> مع CSS |
العرض 600، 3×، شفاف | PNG بعرض 1800 px وخلفية شفافة |
| شيفرة فيها صورة خارجية | العرض 800، 1× | تبقى الصورة الخارجية فارغة، وتُعرض العناوين المحظورة |
للرسوم المتجهية استخدم SVG إلى PNG؛ ولـ Markdown جرّب أداة معاينة Markdown.
الأسئلة الشائعة
هل يمكنني التقاط موقع من رابطه؟
لا. التقاط موقع آخر يتطلب خادمًا يفتح الصفحة نيابة عنك، وهذه الأداة لا تفعل ذلك. الصق HTML وCSS كتبتهما بنفسك أو نسختهما من أدوات المطوّر في متصفحك.
الصور مفقودة.
لأسباب أمنية ولحماية الخصوصية، لا تُحمَّل أبدًا الصور والخطوط وملفات CSS الموجودة على أي عنوان غير data: أو blob: (أي http وhttps و// والمسارات النسبية). والعناوين المخفية بمراجع أحرف HTML أو بتهريب CSS تُفحص كما يفكّها المتصفح، فتُحظر أيضًا. تعرض الأداة قائمة العناوين المحظورة؛ ضمّن الصور بعناوين data: (Base64) فتظهر. وتستطيع أداة تحويل الصور إلى Base64 إنشاءها.
الخط يبدو مختلفًا عن تصميمي.
لا تُجلب ملفات خطوط الويب، لذا تُكتب النصوص بالخطوط المثبتة على جهازك. وإذا لم يكن الخط المذكور موجودًا، يُستخدم خط النظام الافتراضي (مثل Segoe UI على Windows وSan Francisco على أجهزة Apple).
هل يظهر المحتوى الذي ينشئه JavaScript؟
لا. لا تُشغَّل السكربتات الموجودة في الشيفرة الملصوقة؛ ولا يُرسم إلا HTML وCSS الثابتان.
هل تُرسل شيفرتي إلى خادم؟
لا. المعاينة والصورة كلتاهما تُنشآن في متصفحك.
