diff --git a/html/arabic/net/generate-jpg-and-png-images/_index.md b/html/arabic/net/generate-jpg-and-png-images/_index.md index 432f80cdc0..d1af42f059 100644 --- a/html/arabic/net/generate-jpg-and-png-images/_index.md +++ b/html/arabic/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET هي مكتبة قوية تتيح للمطورين إنشا تعلم كيفية تمكين مضاد التعرج عند تحويل ملفات DOCX إلى صور PNG أو JPG باستخدام Aspose.HTML. ### [تحويل docx إلى png – إنشاء أرشيف zip في C# – دليل تعليمي](./convert-docx-to-png-create-zip-archive-c-tutorial/) تعلم كيفية تحويل ملفات docx إلى صور PNG وإنشاء أرشيف ZIP باستخدام C# و Aspose.HTML. +### [إنشاء PNG من HTML باستخدام Aspose.HTML – دليل .NET](./create-png-from-html-with-aspose-html-net-guide/) +تعلم كيفية إنشاء صور PNG من HTML باستخدام Aspose.HTML لـ .NET خطوة بخطوة. ## خاتمة diff --git a/html/arabic/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/arabic/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..3a0ca9aaa3 --- /dev/null +++ b/html/arabic/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,262 @@ +--- +category: general +date: 2026-07-21 +description: إنشاء PNG من HTML باستخدام Aspose.HTML في .NET. تعلم كيفية تحويل HTML + إلى PNG، تحويل HTML إلى صورة، وإتقان كيفية تحويل HTML إلى PNG مع الكود الكامل. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- create png from html +- render html to png +- convert html to image +- how to render html as png +language: ar +lastmod: 2026-07-21 +og_description: إنشاء PNG من HTML باستخدام Aspose.HTML. يوضح لك هذا الدرس كيفية تحويل + HTML إلى PNG، وتحويل HTML إلى صورة، وإتقان طريقة تحويل HTML إلى PNG في بضع دقائق. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: إنشاء PNG من HTML باستخدام Aspose.HTML – دليل .NET +schemas: +- author: Aspose + dateModified: '2026-07-21' + description: Create PNG from HTML using Aspose.HTML in .NET. Learn how to render + HTML to PNG, convert HTML to image, and master how to render HTML as PNG with + full code. + headline: Create PNG from HTML with Aspose.HTML – .NET Guide + type: TechArticle +- description: Create PNG from HTML using Aspose.HTML in .NET. Learn how to render + HTML to PNG, convert HTML to image, and master how to render HTML as PNG with + full code. + name: Create PNG from HTML with Aspose.HTML – .NET Guide + steps: + - name: Why These Settings Matter + text: '* **ImageRenderingOptions** – Controls the canvas size and visual quality. + Turning on `UseAntialiasing` smooths diagonal lines and curves, which is crucial + when you later **convert html to image** for high‑DPI displays. * **TextOptions** + – `UseHinting` improves glyph placement, while `FontStyle` let' + - name: 4.1 Rendering a Full Web Page + text: 'Instead of a tiny paragraph, you might want to snapshot an entire page:' + - name: 4.2 Handling External Resources (CSS, Images, Fonts) + text: 'Aspose.HTML automatically resolves relative URLs, but you may need to set + a **base URL** if your HTML string contains relative paths:' + - name: 4.3 Generating Multiple Images in a Loop + text: 'If you’re producing thumbnails for a batch of HTML emails, wrap the rendering + logic in a loop:' + type: HowTo +tags: +- Aspose.HTML +- .NET +- Image Rendering +title: إنشاء PNG من HTML باستخدام Aspose.HTML – دليل .NET +url: /ar/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# إنشاء PNG من HTML باستخدام Aspose.HTML – دليل .NET + +هل تساءلت يوماً كيف **تنشئ PNG من HTML** دون الحاجة إلى متصفحات بدون رأس أو أدوات سطر الأوامر المعقدة؟ لست وحدك. في العديد من التطبيقات التي تركز على الويب تحتاج إلى لقطة سريعة لصفحة—مثل صور مصغرة للبريد الإلكتروني، تقارير PDF، أو معاينات وسائل التواصل الاجتماعي. الخبر السار هو أن Aspose.HTML يجعل العملية بأكملها سهلة كالنزهة في الحديقة. + +في هذا الدرس سنستعرض خطوة بخطوة كيفية تحويل HTML إلى PNG، تحويل HTML إلى صورة، وسنجيب على سؤال “كيف يتم عرض HTML كـ PNG” الذي يتكرر على Stack Overflow كل أسبوع. في النهاية ستحصل على تطبيق console بلغة .NET جاهز للتنفيذ ينتج ملف PNG واضح من أي سلسلة HTML تُمرّر إليه. + +> **نصيحة احترافية:** يعمل Aspose.HTML على .NET Framework، .NET Core، و .NET 5/6/7، لذا يمكنك دمجه في أي مشروع C# تملكه تقريباً. + +--- + +## ما ستحتاجه + +قبل أن نبدأ، تأكد من توفر ما يلي: + +| المتطلب | لماذا هو مهم | +|-------------|----------------| +| **.NET 6 SDK** (أو أحدث) | يوفّر بيئة التشغيل لتطبيق console التجريبي. | +| **حزمة NuGet Aspose.HTML for .NET** | المكتبة التي تقوم بمعالجة عرض HTML. | +| **محرر كود** (Visual Studio، VS Code، Rider…) | لكتابة وتشغيل كود C#. | +| **معرفة أساسية بـ C#** | سيمكنك من فهم المقاطع البرمجية دون الحاجة إلى دورة مكثفة. | + +إذا كان لديك مشروع بالفعل، فقط أضف حزمة NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +هذا كل شيء—لا ملفات DLL إضافية، لا ثنائيات أصلية، ولا مشاكل ترخيص لإصدار التقييم. + +--- + +## الخطوة 1: إنشاء مشروع Console جديد لـ .NET + +أولاً، أنشئ تطبيق console جديد لتتمكن من التركيز على منطق العرض في عزلة. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +افتح ملف `Program.cs` الذي تم إنشاؤه؛ سنستبدل محتوياته بالمثال الكامل لاحقاً. هذه القاعدة النظيفة تضمن أن عملية **create png from html** لا تتلوث بكود غير ذي صلة. + +--- + +## الخطوة 2: إضافة كود العرض الأساسي (Create PNG from HTML) + +الآن نأتي إلى جوهر الدرس. سننشئ كائن `HTMLDocument`، نضبط بعض خيارات العرض، وأخيراً نطلب من Aspose.HTML كتابة ملف PNG إلى القرص. + +```csharp +using System; +using Aspose.Html; +using Aspose.Html.Drawing; +using Aspose.Html.Rendering.Image; + +class Program +{ + static void Main() + { + // -------------------------------------------------------------- + // 1️⃣ Build a tiny HTML snippet – you can replace this with any markup. + // -------------------------------------------------------------- + string htmlContent = "
Hello, world!
"; + HTMLDocument htmlDoc = new HTMLDocument(htmlContent); + + // -------------------------------------------------------------- + // 2️⃣ Fine‑tune image rendering – antialiasing makes edges smoother. + // -------------------------------------------------------------- + ImageRenderingOptions imageOptions = new ImageRenderingOptions + { + UseAntialiasing = true, + // Optional: set background colour, DPI, etc. + BackgroundColor = System.Drawing.Color.White, + Width = 800, // Desired image width in pixels + Height = 200 // Desired image height in pixels + }; + + // -------------------------------------------------------------- + // 3️⃣ Configure text rendering – hinting + bold‑italic for crisp text. + // -------------------------------------------------------------- + TextOptions textOptions = new TextOptions + { + UseHinting = true, + FontStyle = WebFontStyle.BoldItalic + }; + + // -------------------------------------------------------------- + // 4️⃣ Create the renderer with both option sets. + // -------------------------------------------------------------- + ImageRenderer imageRenderer = new ImageRenderer(imageOptions, textOptions); + + // -------------------------------------------------------------- + // 5️⃣ Render the HTML document to a PNG file. + // -------------------------------------------------------------- + string outputPath = "output.png"; + imageRenderer.Render(htmlDoc, outputPath); + + Console.WriteLine($"✅ PNG created at: {outputPath}"); + } +} +``` + +### لماذا هذه الإعدادات مهمة + +* **ImageRenderingOptions** – تتحكم في حجم القماش وجودة الصورة. تفعيل `UseAntialiasing` يُنعم الخطوط المائلة والمنحنيات، وهو أمر حاسم عندما تقوم لاحقاً **convert html to image** لشاشات عالية الدقة. +* **TextOptions** – `UseHinting` يحسّن وضع الحروف، بينما يتيح لك `FontStyle` محاكاة الخط العريض‑المائل دون تعديل HTML الأصلي. هذا مفيد عندما لا يحتوي النص الأصلي على تنسيق صريح. +* **ImageRenderer** – بتمرير كائنات الإعدادات معاً تحصل على استدعاء موحد يحترم كل من تفضيلات مستوى الصورة والنص. + +شغّل البرنامج باستخدام `dotnet run`. يجب أن يظهر ملف `output.png` في مجلد المشروع، يعرض فقرة “Hello, world!” مُرَسَّمة بشكل جميل. + +--- + +## الخطوة 3: فهم خط أنابيب العرض (How to Render HTML as PNG) + +إذا كنت تريد معرفة **how to render HTML as PNG** من الداخل، إليك ملخص سريع: + +1. **تحليل HTML** – يقوم Aspose.HTML بتحليل العلامات إلى شجرة DOM، تماماً كما يفعل المتصفح. +2. **محرك التخطيط** – يحسب نماذج الصناديق، يفسّر CSS، ويحدد الموضع الدقيق لكل عنصر. +3. **التصوير النقطي** – يُرسم التخطيط على صورة bitmap باستخدام GDI+ (على Windows) أو Skia (متعدد المنصات). هنا تتفاعل `ImageRenderingOptions` و `TextOptions`. +4. **ترميز الملف** – أخيراً تُشفّر الصورة كـ PNG، مع الحفاظ على الشفافية وإعدادات الضغط. + +نظرًا لأن المكتبة تحاكي محرك متصفح كامل، يمكنك الاعتماد عليها للـ CSS المعقد، SVG، أو حتى المحتوى المُولد بجافاسكريبت (بشرط تفعيل محرك البرمجة). لهذا السبب تُعد خيارًا قويًا عندما تحتاج إلى **render html to png** في بيئات الإنتاج. + +--- + +## الخطوة 4: توسيع المثال – سيناريوهات واقعية + +### 4.1 عرض صفحة ويب كاملة + +بدلاً من فقرة صغيرة، قد ترغب في أخذ لقطة لصفحة كاملة: + +```csharp +// Load HTML from a URL (requires internet access) +HTMLDocument fullPage = new HTMLDocument("https://example.com"); + +// Adjust height to fit the whole page automatically +imageOptions.Height = 0; // 0 tells the renderer to calculate height based on content +``` + +### 4.2 معالجة الموارد الخارجية (CSS، صور، خطوط) + +Aspose.HTML يحل عناوين URL النسبية تلقائيًا، لكن قد تحتاج إلى تعيين **base URL** إذا كان HTML يحتوي على مسارات نسبية: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +لخطوط مخصصة، أدرجها عبر `@font-face` داخل وسم `" + + "This page is packaged inside a ZIP.