From 93461c3c01991901d439c347c79b1c1ecfccffc5 Mon Sep 17 00:00:00 2001 From: Muhammad Adil Date: Wed, 22 Jul 2026 02:15:27 +0000 Subject: [PATCH] Add 2 html net tutorials MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Categories: generate-jpg-and-png-images, html-extensions-and-conversions Source: AI Search API Tutorials: - Custom Resource Handler in C# – How to Create ZIP of HTML - Create PNG from HTML with Aspose.HTML – .NET Guide Auto-generated by Professionalize.Tutorials Agent --- .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 262 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 309 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 249 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 3 +- .../_index.md | 307 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 264 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 4 +- .../_index.md | 310 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 248 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 311 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 263 +++++++++++++++ .../og-image.png | Bin 0 -> 48189 bytes .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 311 +++++++++++++++++ .../og-image.png | Bin 0 -> 48050 bytes .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 264 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 4 +- .../_index.md | 312 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 262 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 36 +- .../_index.md | 295 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 260 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 311 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 258 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 5 +- .../_index.md | 312 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 260 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 310 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 242 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 311 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 260 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 310 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 246 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 312 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 1 + .../_index.md | 245 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 3 + .../_index.md | 309 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 258 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 309 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 264 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 20 ++ .../_index.md | 312 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 264 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 3 + .../_index.md | 311 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 260 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 312 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 252 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 311 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 258 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 289 ++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 4 +- .../_index.md | 246 ++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 309 +++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 264 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 1 + .../_index.md | 290 ++++++++++++++++ .../net/generate-jpg-and-png-images/_index.md | 2 + .../_index.md | 260 +++++++++++++++ .../html-extensions-and-conversions/_index.md | 2 + .../_index.md | 313 ++++++++++++++++++ 94 files changed, 13126 insertions(+), 23 deletions(-) create mode 100644 html/arabic/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/arabic/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/chinese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/chinese/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/czech/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/czech/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/dutch/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/dutch/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/english/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/english/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/og-image.png create mode 100644 html/english/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/english/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/og-image.png create mode 100644 html/french/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/french/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/german/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/german/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/greek/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/greek/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/hindi/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/hindi/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/hongkong/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/hongkong/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/hungarian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/hungarian/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/indonesian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/indonesian/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/italian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/italian/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/japanese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/japanese/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/korean/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/korean/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/polish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/polish/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/portuguese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/portuguese/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/russian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/russian/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/spanish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/spanish/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/swedish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/swedish/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/thai/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/thai/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/turkish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/turkish/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md create mode 100644 html/vietnamese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md create mode 100644 html/vietnamese/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/_index.md 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` داخل وسم `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **نصيحة احترافية:** إذا كانت صفحتك تشير إلى CSS أو صور خارجية، تأكد من أن هذه الملفات متاحة لـ `HTMLDocument` (مثلاً باستخدام `doc.Open` مع عنوان URL أساسي). سيقوم **custom resource handler** بالتقاطها تلقائيًا عند الحفظ. + +--- + +## الخطوة 3: تكوين خيارات الحفظ لتصدير HTML إلى ZIP + +الآن نخبر Aspose.HTML باستخدام **custom resource handler** وإخراج ملف ZIP بدلاً من مجلد منفصل. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**ما الذي يحدث خلف الكواليس؟** +عند تنفيذ `doc.Save`، يقوم Aspose.HTML ببث كل مورد (ملف HTML، CSS، صور) إلى الـ `MemoryStream` الذي تُعيده `MyHandler`. بمجرد ملء جميع التدفقات، تقوم المكتبة بضغطها في حزمة ZIP واحدة. + +--- + +## الخطوة 4: حفظ ملف HTML ZIP + +أخيرًا، احفظ الـ ZIP الموجود في الذاكرة إلى القرص (أو أي وجهة أخرى). السطر التالي يكتب الأرشيف إلى المجلد الذي تحدده. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**الناتج المتوقع:** +بعد تشغيل البرنامج، ستجد `output.zip` في دليل المشروع. افتحه وسترى: + +- `index.html` – العلامة التي عرّفناها. +- `style.css` – النمط المضمن المستخرج كملف منفصل (إن وجد). +- أي صور أو خطوط مُشار إليها (لا شيء في هذا المثال الصغير). + +--- + +## فهم تفاصيل معالج الموارد المخصص + +| الحالة | ما يفعله المعالج | لماذا يساعد | +|-----------|----------------------|--------------| +| **صور كبيرة** | يُعيد `MemoryStream` جديد لكل صورة، متجنبًا عمليات I/O على نظام الملفات. | يحافظ على استهلاك الذاكرة بشكل متوقع؛ يمكنك لاحقًا استبدال الـ stream بتيار رفع إلى السحابة. | +| **فشل تحميل مورد** | إذا تعذر جلب مورد، يرمي Aspose.HTML استثناءً قبل استدعاء `HandleResource`. | يمكنك التقاط الاستثناء عند `doc.Save` وتسجيل الأصول المفقودة. | +| **تسمية مخصصة** | تجاوز `Resource.Name` داخل `HandleResource` لإعادة تسمية الملفات قبل دخولها الـ ZIP. | مفيد عندما تحتاج إلى أسماء ملفات صديقة لمحركات البحث أو تريد حذف سلاسل الاستعلام. | + +إذا أردت تخزين الموارد على Azure Blob Storage بدلاً من الذاكرة، استبدل سطر `return new MemoryStream();` بكود يُعيد تيارًا مدعومًا بـ SDK السحابي. + +--- + +## الأخطاء الشائعة وكيفية تجنّبها + +1. **نسيان تعيين `SaveFormat.Zip`** – الافتراضي في Aspose.HTML هو إخراج مجلد. دائمًا اضبط `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **دليل الإخراج غير موجود** – `doc.Save` لا ينشئ المجلد الأب. استخدم `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` مسبقًا. +3. **المعالج يُعيد تيارًا مغلقًا** – يجب أن يكون التيار قابلًا للكتابة ومفتوحًا؛ وإلا سيتلف الـ ZIP. +4. **المستندات الكبيرة تستنزف الذاكرة** – للمواقع الضخمة، فكر في البث مباشرةً إلى تيار ملف داخل المعالج بدلاً من `MemoryStream`. + +--- + +## توسيع الحل: من الذاكرة إلى السحابة + +لنفترض أنك تريد **save html zip** مباشرةً إلى حاوية AWS S3. استبدل المعالج بشيء مثل: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +الآن ستقوم نفس استدعاءة `doc.Save` بدفع كل ملف مباشرةً إلى S3، ويمكن تجميع الـ ZIP النهائي لاحقًا باستخدام رفع متعدد الأجزاء في AWS SDK. هذا يُظهر **مرونة** **custom resource handler**—أنت تتحكم في آلية التخزين من البداية إلى النهاية. + +--- + +## مثال كامل جاهز للتنفيذ (نسخ‑لصق) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +شغّل البرنامج (`dotnet run`)، وسترى تأكيد ✅. افتح `output.zip` بأي مدير أرشيف—ستجد صفحة HTML كاملة تعمل دون اتصال. + +--- + +## نظرة بصرية + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*النص البديل: مخطط يوضح تدفق معالج الموارد المخصص لتصدير HTML إلى أرشيف ZIP* + +التوضيح أعلاه يلتقط تدفق البيانات: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## الخلاصة + +لقد غطينا كل ما تحتاجه لتطبيق **custom resource handler** لحل **create html zip** في C#. من خلال تنفيذ فئة فرعية صغيرة من `ResourceHandler`، تكوين `HtmlSaveOptions`، واستدعاء الحفظ، يمكنك التحكم الكامل في عملية التخزين. + +## ما الذي يجب أن تتعلمه بعد ذلك؟ + +الدروس التالية تغطي مواضيع ذات صلة وثيقة تُبني على التقنيات التي استعرضناها في هذا الدليل. كل مصدر يتضمن أمثلة كود كاملة مع شروحات خطوة‑بخطوة لمساعدتك على إتقان ميزات API إضافية واستكشاف أساليب تنفيذ بديلة في مشاريعك. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/net/generate-jpg-and-png-images/_index.md b/html/chinese/net/generate-jpg-and-png-images/_index.md index 3a7bc53dc3..5555601372 100644 --- a/html/chinese/net/generate-jpg-and-png-images/_index.md +++ b/html/chinese/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET 提供了一种将 HTML 转换为图像的简单方法。 了解如何在使用 Aspose.HTML for .NET 将 DOCX 文档转换为 PNG 或 JPG 图像时启用抗锯齿,以提升图像质量。 ### [使用 C# 将 docx 转换为 png 并创建 zip 存档教程](./convert-docx-to-png-create-zip-archive-c-tutorial/) 学习如何使用 C# 将 DOCX 文档转换为 PNG 图像并打包为 ZIP 文件的完整步骤。 +### [使用 Aspose.HTML 在 .NET 中从 HTML 创建 PNG – 指南](./create-png-from-html-with-aspose-html-net-guide/) +学习如何使用 Aspose.HTML for .NET 将 HTML 内容转换为 PNG 图像的完整步骤和技巧。 ## 结论 diff --git a/html/chinese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/chinese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..7183c9381c --- /dev/null +++ b/html/chinese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,249 @@ +--- +category: general +date: 2026-07-21 +description: 使用 Aspose.HTML 在 .NET 中将 HTML 创建为 PNG。学习如何将 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: zh +lastmod: 2026-07-21 +og_description: 使用 Aspose.HTML 将 HTML 生成 PNG。本教程将向您展示如何将 HTML 渲染为 PNG、将 HTML 转换为图像,并在几分钟内掌握 + HTML 渲染为 PNG 的技巧。 +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: 使用 Aspose.HTML 将 HTML 转换为 PNG – .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: 使用 Aspose.HTML 将 HTML 转换为 PNG – .NET 指南 +url: /zh/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 >}} + +# 使用 Aspose.HTML 从 HTML 创建 PNG – .NET 指南 + +有没有想过如何在不与无头浏览器搏斗或摆弄命令行工具的情况下**从 HTML 创建 PNG**?你并不是唯一有此需求的人。在许多以网页为中心的应用中,你需要快速捕获页面的快照——比如电子邮件缩略图、PDF 报告或社交媒体预览。好消息是 Aspose.HTML 让整个过程轻而易举。 + +在本教程中,我们将逐步演示将 HTML 渲染为 PNG、将 HTML 转换为图像,甚至回答每周在 Stack Overflow 上出现的“如何将 HTML 渲染为 PNG”问题。完成后,你将拥有一个可直接运行的 .NET 控制台应用程序,能够从任意 HTML 字符串生成清晰的 PNG 文件。 + +> **专业提示:** Aspose.HTML 支持 .NET Framework、.NET Core 以及 .NET 5/6/7,因此你可以将其直接加入几乎所有已有的 C# 项目中。 + +--- + +## 你需要的条件 + +在深入之前,请确保你已经准备好以下内容: + +| 需求 | 重要原因 | +|------|----------| +| **.NET 6 SDK**(或更高) | 为示例控制台应用提供运行时环境。 | +| **Aspose.HTML for .NET** NuGet 包 | 执行 HTML 渲染重活的库。 | +| **代码编辑器**(Visual Studio、VS Code、Rider…) | 用于编写和运行 C# 代码。 | +| **基础 C# 知识** | 你可以无需速成课程就能理解示例代码。 | + +如果你已有项目,只需添加 NuGet 包: + +```bash +dotnet add package Aspose.HTML +``` + +就这么简单——无需额外 DLL、无需本机二进制文件、评估版也不需要处理授权麻烦。 + +## 步骤 1:创建新的 .NET 控制台项目 + +首先,创建一个全新的控制台应用,以便单独专注于渲染逻辑。 + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +打开生成的 `Program.cs` 文件;稍后我们会用完整示例替换其内容。这样干净的起点可确保 **create png from html** 过程不受无关代码的干扰。 + +## 步骤 2:添加核心渲染代码(从 HTML 创建 PNG) + +现在进入教程的核心。我们将实例化 `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` 可平滑对角线和曲线,这在随后为高 DPI 显示器 **convert html to image** 时至关重要。 +* **TextOptions** – `UseHinting` 改善字形定位,`FontStyle` 允许在不修改源 HTML 的情况下模拟粗斜体。当原始标记缺少显式样式时,这尤其方便。 +* **ImageRenderer** – 通过传入两个选项对象,你可以一次性统一调用,兼顾图像层面和文本层面的偏好。 + +使用 `dotnet run` 运行程序。你应该会在项目文件夹中看到 `output.png`,其中呈现出精美的 “Hello, world!” 段落。 + +## 步骤 3:了解渲染管线(如何将 HTML 渲染为 PNG) + +如果你想了解底层 **how to render HTML as PNG** 的工作原理,下面是简要概述: + +1. **HTML Parsing** – Aspose.HTML 将标记解析为 DOM 树,类似浏览器的行为。 +2. **Layout Engine** – 计算盒模型,解析 CSS,并确定每个元素的精确位置。 +3. **Rasterization** – 使用 GDI+(Windows)或 Skia(跨平台)将布局绘制到位图上。这一步会应用 `ImageRenderingOptions` 和 `TextOptions`。 +4. **File Encoding** – 最后将位图编码为 PNG,保留透明度和压缩设置。 + +由于该库模拟完整的浏览器引擎,你可以依赖它处理复杂的 CSS、SVG,甚至是 JavaScript 生成的内容(前提是启用脚本引擎)。这也是在生产环境中需要 **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,但如果你的 HTML 字符串包含相对路径,可能需要设置 **base URL**: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +对于自定义字体,可在 `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **专业提示:** 如果页面引用了外部 CSS 或图片,请确保这些文件对 `HTMLDocument` 可访问(例如,通过使用带有基准 URL 的 `doc.Open`)。**custom resource handler** 在保存时会自动捕获它们。 + +--- + +## 第 3 步:配置保存选项以导出 HTML 为 ZIP + +现在我们告诉 Aspose.HTML 使用我们的 **custom resource handler**,并输出 ZIP 包而不是松散的文件夹。 + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**底层发生了什么?** +当 `doc.Save` 执行时,Aspose.HTML 会将每个资源(HTML 文件、CSS、图片)流入 `MyHandler` 返回的 `MemoryStream`。所有流填充完毕后,库会将它们压缩成一个 ZIP 包。 + +--- + +## 第 4 步:保存 HTML ZIP 文件 + +最后,将内存中的 ZIP 持久化到磁盘(或其他任何目标)。下面这行代码会把压缩包写入你指定的文件夹。 + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**预期输出:** +运行程序后,你会在项目目录看到 `output.zip`。打开它,你会发现: + +- `index.html` – 我们定义的标记。 +- `style.css` – 提取为单独文件的内联样式(如果有)。 +- 任何引用的图像或字体(此小示例中没有)。 + +--- + +## 理解自定义资源处理程序内部工作原理 + +| 情况 | 处理程序的操作 | 帮助原因 | +|-----------|----------------------|--------------| +| **Large images** | 为每个图像返回一个全新的 `MemoryStream`,避免文件系统 I/O。 | 保持内存使用可预测;后续可以将流替换为云上传流。 | +| **Failed resource load** | 如果资源无法获取,Aspose.HTML 会在调用 `HandleResource` 前抛出异常。 | 你可以在 `doc.Save` 时捕获异常并记录缺失的资产。 | +| **Custom naming** | 在 `HandleResource` 中覆盖 `Resource.Name`,在文件进入 ZIP 前重命名。 | 当需要 SEO 友好的文件名或去除查询字符串时非常有用。 | + +如果需要将资源存储到 Azure Blob Storage 而不是内存,只需将 `return new MemoryStream();` 行替换为返回由云 SDK 支持的流的代码。 + +--- + +## 常见陷阱及避免方法 + +1. **忘记设置 `SaveFormat.Zip`** – Aspose.HTML 默认输出为文件夹。务必设置 `saveOptions.SaveFormat = SaveFormat.Zip;`。 +2. **输出目录不存在** – `doc.Save` 不会创建父文件夹。请提前使用 `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`。 +3. **处理程序返回了已关闭的流** – 流必须是可写且打开的,否则 ZIP 会损坏。 +4. **大型文档耗尽内存** – 对于庞大站点,考虑在处理程序内部直接流式写入文件流,而不是使用 `MemoryStream`。 + +--- + +## 扩展方案:从内存到云端 + +假设你想要 **save html zip** 直接保存到 AWS S3 桶。将处理程序替换为类似下面的代码: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +现在相同的 `doc.Save` 调用会把每个文件直接推送到 S3,最终的 ZIP 可以稍后使用 AWS SDK 的分段上传组装。这展示了 **custom resource handler** 的 **flexibility**——你可以端到端控制存储机制。 + +--- + +## 完整可运行示例(复制粘贴即可) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +运行程序(`dotnet run`),你会看到 ✅ 确认信息。使用任意压缩管理器打开 `output.zip`,即可看到一个完整可离线使用的 HTML 页面。 + +--- + +## 可视化概览 + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: 展示自定义资源处理程序将 HTML 导出为 ZIP 包的流程图* + +--- + +## 结论 + +我们已经覆盖了在 C# 中使用 **custom resource handler** 实现 **create html zip** 解决方案所需的全部内容。通过实现 `ResourceHandler` 的小子类、配置 `HtmlSaveOptions` 并调用 + +## 接下来该学习什么? + +以下教程涵盖与本指南技术紧密相关的主题,帮助你在自己的项目中进一步掌握 API 功能并探索替代实现方式。每个资源均提供完整可运行的代码示例和逐步解释。 + +- [如何在 C# 中保存 HTML – 使用自定义资源处理程序的完整指南](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [在 C# 中从字符串创建 HTML – 自定义资源处理程序指南](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [如何在 C# 中压缩 HTML – 将 HTML 保存为 ZIP](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/net/generate-jpg-and-png-images/_index.md b/html/czech/net/generate-jpg-and-png-images/_index.md index 11b9c84651..4895c3eaa9 100644 --- a/html/czech/net/generate-jpg-and-png-images/_index.md +++ b/html/czech/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Naučte se používat Aspose.HTML pro .NET k manipulaci s dokumenty HTML, převo Naučte se, jak při převodu dokumentů DOCX na PNG nebo JPG povolit antialiasing pro hladší výstup. ### [Převod docx na png – vytvoření zip archivu C# tutoriál](./convert-docx-to-png-create-zip-archive-c-tutorial/) Naučte se převést soubory DOCX na PNG a zabalit je do ZIP archivu pomocí C# a Aspose.HTML. +### [Vytvořte PNG z HTML pomocí Aspose.HTML – .NET průvodce](./create-png-from-html-with-aspose-html-net-guide/) +Naučte se převádět HTML na PNG pomocí Aspose.HTML pro .NET v podrobném průvodci krok za krokem. ## Závěr diff --git a/html/czech/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/czech/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..8f8e5abab2 --- /dev/null +++ b/html/czech/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,264 @@ +--- +category: general +date: 2026-07-21 +description: Vytvořte PNG z HTML pomocí Aspose.HTML v .NET. Naučte se, jak renderovat + HTML do PNG, převést HTML na obrázek, a ovládněte, jak renderovat HTML jako PNG + s kompletním kódem. +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: cs +lastmod: 2026-07-21 +og_description: Vytvořte PNG z HTML pomocí Aspose.HTML. Tento tutoriál vám ukáže, + jak renderovat HTML do PNG, převést HTML na obrázek a během několika minut se naučit, + jak renderovat HTML jako PNG. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Vytvořte PNG z HTML pomocí Aspose.HTML – .NET průvodce +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: Vytvořte PNG z HTML pomocí Aspose.HTML – .NET průvodce +url: /cs/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 >}} + +# Vytvoření PNG z HTML pomocí Aspose.HTML – .NET průvodce + +Už jste se někdy zamýšleli, jak **vytvořit PNG z HTML** bez toho, abyste se museli potýkat s headless prohlížeči nebo ladit příkazové řádky? Nejste v tom sami. V mnoha webových aplikacích potřebujete rychlý snímek stránky — například náhledy e‑mailů, PDF reporty nebo náhledy pro sociální sítě. Dobrou zprávou je, že Aspose.HTML dělá celý proces tak jednoduchý jako procházku v parku. + +V tomto tutoriálu si projdeme vykreslování HTML do PNG, převod HTML na obrázek a také odpovíme na často kladenou otázku „jak vykreslit HTML jako PNG“, která se objevuje na Stack Overflow každý týden. Na konci budete mít připravenou .NET konzolovou aplikaci, která z libovolného HTML řetězce vygeneruje ostrý PNG soubor. + +> **Tip:** Aspose.HTML funguje na .NET Framework, .NET Core i .NET 5/6/7, takže jej můžete vložit téměř do jakéhokoli C# projektu, který už máte. + +--- + +## Co budete potřebovat + +Než se pustíme do práce, ujistěte se, že máte po ruce následující: + +| Požadavek | Proč je důležitý | +|-------------|----------------| +| **.NET 6 SDK** (nebo novější) | Poskytuje runtime pro ukázkovou konzolovou aplikaci. | +| **Aspose.HTML for .NET** NuGet balíček | Knihovna, která provádí těžkou práci s vykreslováním HTML. | +| **Editor kódu** (Visual Studio, VS Code, Rider…) | Pro psaní a spouštění C# kódu. | +| **Základní znalost C#** | Budete rozumět úryvkům bez nutnosti úvodního kurzu. | + +Pokud už máte projekt, stačí přidat balíček NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +A to je vše — žádné extra DLL, žádné nativní binárky, žádné problémy s licencí pro evaluační verzi. + +--- + +## Krok 1: Vytvořte nový .NET konzolový projekt + +Nejprve vytvořte nový konzolový projekt, abychom se mohli soustředit na logiku vykreslování izolovaně. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Otevřete vygenerovaný soubor `Program.cs`; později nahradíme jeho obsah kompletním příkladem. Tento čistý start zajišťuje, že proces **create png from html** nebude znečištěn nesouvisejícím kódem. + +--- + +## Krok 2: Přidejte hlavní kód pro vykreslování (Vytvoření PNG z HTML) + +Nyní přichází jádro tutoriálu. Vytvoříme instanci `HTMLDocument`, upravíme několik možností vykreslování a nakonec požádáme Aspose.HTML, aby zapsal PNG soubor na disk. + +```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}"); + } +} +``` + +### Proč jsou tato nastavení důležitá + +* **ImageRenderingOptions** — řídí velikost plátna a vizuální kvalitu. Zapnutí `UseAntialiasing` vyhlazuje úhlopříčné čáry a křivky, což je klíčové, když později **convert html to image** pro displeje s vysokým DPI. +* **TextOptions** — `UseHinting` zlepšuje umístění glyfů, zatímco `FontStyle` vám umožní simulovat tučné‑kurzívy bez úpravy zdrojového HTML. To je užitečné, pokud původní markup postrádá explicitní stylování. +* **ImageRenderer** — při předání obou objektů možností získáte jediný sjednocený volání, které respektuje jak nastavení na úrovni obrázku, tak textu. + +Spusťte program pomocí `dotnet run`. V adresáři projektu by se měl objevit soubor `output.png` s pěkně vykresleným odstavcem „Hello, world!“. + +--- + +## Krok 3: Porozumění vykreslovacímu pipeline (Jak vykreslit HTML jako PNG) + +Pokud vás zajímá **how to render HTML as PNG** pod kapotou, zde je stručný přehled: + +1. **HTML Parsing** — Aspose.HTML parsuje markup do DOM stromu, stejně jako prohlížeč. +2. **Layout Engine** --- Vypočítá box modely, vyřeší CSS a určí přesné umístění každého elementu. +3. **Rasterization** — Rozvržení se namaluje na bitmapu pomocí GDI+ (na Windows) nebo Skia (cross‑platform). Zde vstupují do hry `ImageRenderingOptions` a `TextOptions`. +4. **File Encoding** — Nakonec se bitmapa zakóduje jako PNG, s podporou průhlednosti a kompresních nastavení. + +Protože knihovna napodobuje plnohodnotný prohlížečový engine, můžete ji použít pro složité CSS, SVG nebo dokonce obsah generovaný JavaScriptem (pokud povolíte skriptovací engine). Proto je to solidní volba, když potřebujete **render html to png** pro produkční úlohy. + +--- + +## Krok 4: Rozšíření příkladu – reálné scénáře + +### 4.1 Vykreslení celé webové stránky + +Místo malého odstavce možná chcete pořídit snímek celé stránky: + +```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 Zpracování externích zdrojů (CSS, obrázky, fonty) + +Aspose.HTML automaticky řeší relativní URL, ale možná budete muset nastavit **base URL**, pokud váš HTML řetězec obsahuje relativní cesty: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Pro vlastní fonty je vložte pomocí `@font-face` v bloku `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Pokud vaše stránka odkazuje na externí CSS nebo obrázky, ujistěte se, že jsou tyto soubory přístupné pro `HTMLDocument` (např. pomocí `doc.Open` s base URL). **Custom resource handler** je zachytí automaticky při ukládání. + +--- + +## Krok 3: Nastavení možností ukládání pro export HTML do ZIP + +Nyní řekneme Aspose.HTML, aby použil náš **custom resource handler** a místo volného adresáře vytvořil ZIP archiv. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Co se děje pod kapotou?** +Když se spustí `doc.Save`, Aspose.HTML streamuje každý zdroj (HTML soubor, CSS, obrázky) do `MemoryStream`, který vrátí `MyHandler`. Jakmile jsou všechny proudy naplněny, knihovna je zkomprimuje do jediného ZIP balíčku. + +--- + +## Krok 4: Uložení HTML ZIP souboru + +Nakonec přeneseme ZIP z paměti na disk (nebo kamkoli jinam). Následující řádek zapíše archiv do vámi zadané složky. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Očekávaný výstup:** +Po spuštění programu uvidíte `output.zip` ve složce projektu. Otevřete jej a najdete: + +- `index.html` – markup, který jsme definovali. +- `style.css` – inline styl extrahovaný jako samostatný soubor (pokud existuje). +- Všechny odkazované obrázky nebo fonty (v tomto malém příkladu žádné). + +--- + +## Porozumění vnitřnímu fungování vlastního manipulátoru zdrojů + +| Situace | Co manipulátor dělá | Proč pomáhá | +|-----------|----------------------|--------------| +| **Velké obrázky** | Vrací nový `MemoryStream` pro každý obrázek, čímž se vyhýbá I/O na souborovém systému. | Udržuje předvídatelné využití paměti; později můžete stream nahradit streamem pro nahrávání do cloudu. | +| **Selhání načtení zdroje** | Pokud nelze zdroj získat, Aspose.HTML vyhodí výjimku před voláním `HandleResource`. | Můžete zachytit výjimku při `doc.Save` a zaznamenat chybějící asset. | +| **Vlastní pojmenování** | Přepište `Resource.Name` v `HandleResource`, abyste přejmenovali soubory před jejich vložením do ZIP. | Užitečné, když potřebujete SEO‑přátelská jména souborů nebo chcete odstranit dotazové řetězce. | + +Pokud chcete místo paměti ukládat zdroje na Azure Blob Storage, jednoduše nahraďte řádek `return new MemoryStream();` kódem, který vrátí proud podporovaný cloudovým SDK. + +--- + +## Časté úskalí a jak se jim vyhnout + +1. **Zapomněli jste nastavit `SaveFormat.Zip`** – Aspose.HTML ve výchozím nastavení ukládá do složky. Vždy nastavte `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Výstupní adresář neexistuje** – `doc.Save` nevytvoří nadřazenou složku. Předtím použijte `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`. +3. **Manipulátor vrací uzavřený proud** – Proud musí být zapisovatelný a otevřený; jinak bude ZIP poškozený. +4. **Velké dokumenty vyčerpají paměť** – Pro obrovské stránky zvažte streamování přímo do souborového proudu uvnitř manipulátoru místo `MemoryStream`. + +--- + +## Rozšíření řešení: z paměti do cloudu + +Předpokládejme, že chcete **save html zip** přímo do bucketu AWS S3. Nahraďte manipulátor například tímto: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Nyní stejný volání `doc.Save` pošle každý soubor přímo do S3 a finální ZIP může být později sestaven pomocí multipart uploadu z AWS SDK. To ukazuje **flexibilitu** **custom resource handler** – máte plnou kontrolu nad úložným mechanismem od začátku do konce. + +--- + +## Kompletní funkční příklad (připravený ke zkopírování) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Spusťte program (`dotnet run`) a uvidíte ✅ potvrzení. Otevřete `output.zip` v libovolném správci archivů – najdete plně funkční HTML stránku připravenou pro offline použití. + +--- + +## Vizualizace + +![Diagram zobrazující tok vlastního manipulátoru zdrojů při exportu HTML do ZIP archivu](image.png) + +*Alt text: Diagram zobrazující tok vlastního manipulátoru zdrojů při exportu HTML do ZIP archivu* + +Ilustrace výše zachycuje datový tok: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Závěr + +Právě jsme probrali vše, co potřebujete k **custom resource handler** řešení pro **create html zip** v C#. Implementací malé podtřídy `ResourceHandler`, nastavením `HtmlSaveOptions` a voláním + +## Co byste se měli naučit dál? + +Následující tutoriály pokrývají úzce související témata, která staví na technikách předvedených v tomto průvodci. Každý zdroj obsahuje kompletní funkční ukázky kódu s podrobnými vysvětleními, abyste si osvojili další funkce API a prozkoumali alternativní implementační přístupy ve svých projektech. + +- [Jak uložit HTML v C# – Kompletní průvodce s použitím vlastního manipulátoru zdrojů](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Vytvořit HTML ze stringu v C# – Průvodce vlastním manipulátorem zdrojů](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [Jak zkomprimovat HTML v C# – Uložit HTML do ZIP](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/net/generate-jpg-and-png-images/_index.md b/html/dutch/net/generate-jpg-and-png-images/_index.md index e05f0c0a7d..307a13fadf 100644 --- a/html/dutch/net/generate-jpg-and-png-images/_index.md +++ b/html/dutch/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Leer hoe u Aspose.HTML voor .NET kunt gebruiken om HTML-documenten te bewerken, Leer hoe u antialiasing inschakelt bij het omzetten van DOCX-bestanden naar PNG- of JPG-afbeeldingen met Aspose.HTML. ### [docx naar png converteren – zip-archief maken C#-tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Leer hoe u een DOCX-bestand naar PNG converteert en de resultaten in een zip-archief opslaat met C# en Aspose.HTML. +### [PNG maken vanuit HTML met Aspose.HTML – .NET-gids](./create-png-from-html-with-aspose-html-net-guide/) +Leer hoe u PNG-afbeeldingen genereert vanuit HTML met Aspose.HTML voor .NET in deze stapsgewijze gids. ## Conclusie diff --git a/html/dutch/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/dutch/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..f96423293e --- /dev/null +++ b/html/dutch/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,248 @@ +--- +category: general +date: 2026-07-21 +description: Maak een PNG van HTML met Aspose.HTML in .NET. Leer hoe je HTML naar + PNG rendert, HTML naar afbeelding converteert en hoe je HTML als PNG rendert met + volledige code. +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: nl +lastmod: 2026-07-21 +og_description: Maak PNG van HTML met Aspose.HTML. Deze tutorial laat je zien hoe + je HTML naar PNG rendert, HTML naar een afbeelding converteert en hoe je HTML als + PNG kunt renderen in een paar minuten. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Maak PNG van HTML met Aspose.HTML – .NET-gids +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 maken van HTML met Aspose.HTML – .NET-gids +url: /nl/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 >}} + +# Maak PNG van HTML met Aspose.HTML – .NET Gids + +Heb je je ooit afgevraagd hoe je **PNG van HTML kunt maken** zonder te worstelen met headless browsers of te knoeien met command‑line tools? Je bent niet de enige. In veel web‑gerichte apps heb je een snelle snapshot van een pagina nodig — denk aan e‑mail thumbnails, PDF‑rapporten of social‑media previews. Het goede nieuws is dat Aspose.HTML het hele proces laat aanvoelen als een wandeling in het park. + +In deze tutorial lopen we stap voor stap door het renderen van HTML naar PNG, het converteren van HTML naar een afbeelding, en beantwoorden we zelfs de hardnekkige vraag “hoe render je HTML als PNG” die elke week op Stack Overflow opduikt. Aan het einde heb je een kant‑klaar .NET console‑applicatie die een scherpe PNG‑file genereert uit elke HTML‑string die je eraan geeft. + +> **Pro tip:** Aspose.HTML werkt op .NET Framework, .NET Core en .NET 5/6/7, dus je kunt dit in bijna elk C#‑project dat je al hebt plaatsen. + +--- + +## Wat je nodig hebt + +Voordat we beginnen, zorg dat je het volgende bij de hand hebt: + +| Requirement | Waarom het belangrijk is | +|-------------|--------------------------| +| **.NET 6 SDK** (or newer) | Biedt de runtime voor de voorbeeld console‑app. | +| **Aspose.HTML for .NET** NuGet package | De bibliotheek die het zware werk van HTML‑rendering doet. | +| **A code editor** (Visual Studio, VS Code, Rider…) | Om de C#‑code te schrijven en uit te voeren. | +| **Basic C# knowledge** | Je begrijpt de fragmenten zonder een crash‑course. | + +Als je al een project hebt, voeg dan gewoon het NuGet‑pakket toe: + +```bash +dotnet add package Aspose.HTML +``` + +Dat is alles — geen extra DLL’s, geen native binaries, geen licentie‑hoofdpijn voor de evaluatie‑versie. + +## Stap 1: Maak een nieuw .NET console‑project + +Eerst maak je een nieuw console‑app zodat we ons kunnen concentreren op de renderlogica in isolatie. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Open het gegenereerde `Program.cs`‑bestand; we zullen later de inhoud vervangen door het volledige voorbeeld. Dit schone blad garandeert dat het **create png from html**‑proces niet wordt vervuild door ongecodeerde code. + +## Stap 2: Voeg de kern‑rendercode toe (Create PNG from HTML) + +Nu volgt het hart van de tutorial. We zullen een `HTMLDocument` instantieren, een paar renderopties aanpassen, en tenslotte Aspose.HTML vragen een PNG‑bestand naar schijf te schrijven. + +```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}"); + } +} +``` + +### Waarom deze instellingen belangrijk zijn + +* **ImageRenderingOptions** – Regelt de canvas‑grootte en visuele kwaliteit. Het inschakelen van `UseAntialiasing` maakt diagonale lijnen en krommen gladder, wat cruciaal is wanneer je later **convert html to image** uitvoert voor high‑DPI displays. +* **TextOptions** – `UseHinting` verbetert de plaatsing van glyphs, terwijl `FontStyle` je in staat stelt bold‑italic te simuleren zonder de bron‑HTML aan te passen. Dit is vooral handig wanneer de oorspronkelijke markup geen expliciete styling bevat. +* **ImageRenderer** – Door beide optie‑objecten door te geven krijg je één enkele, uniforme aanroep die zowel image‑level als text‑level voorkeuren respecteert. + +Voer het programma uit met `dotnet run`. Je zou `output.png` in de projectmap moeten zien verschijnen, met een mooi gerenderde “Hello, world!”‑paragraaf. + +## Stap 3: Begrijpen van de render‑pipeline (How to Render HTML as PNG) + +Als je benieuwd bent naar **how to render HTML as PNG** onder de motorkap, hier is een snelle samenvatting: + +1. **HTML Parsing** – Aspose.HTML parseert de markup naar een DOM‑boom, net zoals een browser dat zou doen. +2. **Layout Engine** – Het berekent box‑modellen, lost CSS op en bepaalt de exacte plaatsing van elk element. +3. **Rasterization** – De layout wordt op een bitmap geschilderd met GDI+ (op Windows) of Skia (cross‑platform). Hier komen `ImageRenderingOptions` en `TextOptions` in werking. +4. **File Encoding** – Ten slotte wordt de bitmap als PNG gecodeerd, met inachtneming van transparantie‑ en compressie‑instellingen. + +Omdat de bibliotheek een volledige browser‑engine nabootst, kun je erop vertrouwen voor complexe CSS, SVG, of zelfs door JavaScript gegenereerde content (mits je de scripting‑engine inschakelt). Daarom is het een solide keuze wanneer je **render html to png** nodig hebt voor productie‑workloads. + +## Stap 4: Het voorbeeld uitbreiden – Real‑World scenario's + +### 4.1 Een volledige webpagina renderen + +In plaats van een klein stukje tekst wil je misschien een volledige pagina vastleggen: + +```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 Externe bronnen verwerken (CSS, afbeeldingen, lettertypen) + +Aspose.HTML lost automatisch relatieve URL’s op, maar je moet mogelijk een **base URL** instellen als je HTML‑string relatieve paden bevat: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Voor aangepaste lettertypen kun je ze insluiten via `@font-face` in een `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Als je pagina externe CSS of afbeeldingen referereert, zorg er dan voor dat die bestanden toegankelijk zijn voor de `HTMLDocument` (bijv. door `doc.Open` te gebruiken met een base‑URL). De **custom resource handler** zal ze automatisch vastleggen wanneer je opslaat. + +--- + +## Stap 3: Configureer Save‑opties om HTML naar ZIP te exporteren + +Nu vertellen we Aspose.HTML onze **custom resource handler** te gebruiken en een ZIP‑archief te genereren in plaats van een losse map. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Wat er onder de motorkap gebeurt:** +Wanneer `doc.Save` wordt uitgevoerd, streamt Aspose.HTML elke resource (HTML‑bestand, CSS, afbeeldingen) naar de `MemoryStream` die door `MyHandler` wordt geretourneerd. Zodra alle streams zijn gevuld, comprimeert de bibliotheek ze tot één ZIP‑pakket. + +--- + +## Stap 4: Sla het HTML‑ZIP‑bestand op + +Tot slot schrijf je de in‑memory ZIP naar schijf (of een andere bestemming). De volgende regel schrijft het archief naar een map die je opgeeft. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Verwachte output:** +Na het uitvoeren van het programma zie je `output.zip` in je projectdirectory. Open het en je vindt: + +- `index.html` – de markup die we hebben gedefinieerd. +- `style.css` – de inline‑style geëxtraheerd als een apart bestand (indien aanwezig). +- Eventuele referenties naar afbeeldingen of fonts (geen in dit kleine voorbeeld). + +--- + +## Inzicht in de interne werking van de Custom Resource Handler + +| Situatie | Wat de Handler Doet | Waarom Het Helpt | +|-----------|----------------------|--------------| +| **Grote afbeeldingen** | Retourneert een nieuwe `MemoryStream` voor elke afbeelding, waardoor bestandssysteem‑I/O wordt vermeden. | Houdt het geheugenverbruik voorspelbaar; je kunt later de stream vervangen door een cloud‑upload‑stream. | +| **Mislukte resource‑load** | Als een resource niet kan worden opgehaald, gooit Aspose.HTML een uitzondering voordat `HandleResource` wordt aangeroepen. | Je kunt de uitzondering vangen bij `doc.Save` en het ontbrekende asset loggen. | +| **Aangepaste naamgeving** | Overschrijf `Resource.Name` binnen `HandleResource` om bestandsnamen te hernoemen voordat ze in de ZIP komen. | Handig wanneer je SEO‑vriendelijke bestandsnamen nodig hebt of query‑strings wilt verwijderen. | + +Als je resources op Azure Blob Storage wilt opslaan in plaats van in het geheugen, vervang je simpelweg de regel `return new MemoryStream();` door code die een stream teruggeeft die door de cloud‑SDK wordt ondersteund. + +--- + +## Veelvoorkomende valkuilen & hoe ze te vermijden + +1. **Vergeten `SaveFormat.Zip` in te stellen** – Aspose.HTML default naar mapoutput. Stel altijd `saveOptions.SaveFormat = SaveFormat.Zip;` in. +2. **Doelmap bestaat niet** – `doc.Save` maakt de bovenliggende map niet aan. Gebruik vooraf `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`. +3. **Handler retourneert een gesloten stream** – De stream moet schrijfbaar en open zijn; anders wordt de ZIP corrupt. +4. **Grote documenten putten het geheugen uit** – Voor enorme sites kun je overwegen direct naar een filestream te streamen binnen de handler in plaats van `MemoryStream`. + +--- + +## De oplossing uitbreiden: Van geheugen naar cloud + +Stel dat je **save html zip** direct naar een AWS S3‑bucket wilt schrijven. Vervang de handler door iets als: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Nu zal dezelfde `doc.Save`‑aanroep elk bestand rechtstreeks naar S3 pushen, en kan het uiteindelijke ZIP‑bestand later worden samengesteld met behulp van de multipart‑upload van de AWS SDK. Dit toont de **flexibiliteit** van een **custom resource handler** — je beheert het opslagmechanisme van begin tot eind. + +--- + +## Volledig werkend voorbeeld (Klaar om te kopiëren‑plakken) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Voer het programma uit (`dotnet run`), en je ziet de ✅ bevestiging. Open `output.zip` met een archiefbeheerder — je vindt een volledig functionele HTML‑pagina klaar voor offline gebruik. + +--- + +## Visueel overzicht + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt‑tekst: Diagram dat de stroom van een custom resource handler toont voor het exporteren van HTML naar een ZIP‑archief* + +De illustratie hierboven legt de datastroom vast: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP‑packaging**. + +--- + +## Conclusie + +We hebben net alles behandeld wat je nodig hebt om met een **custom resource handler** een **create html zip**‑oplossing in C# te realiseren. Door een kleine subclass van `ResourceHandler` te implementeren, `HtmlSaveOptions` te configureren en `doc.Save` aan te roepen, krijg je volledige controle over hoe en waar je HTML‑resources worden opgeslagen. + +## Wat moet je hierna leren? + +De volgende tutorials behandelen nauw verwante onderwerpen die voortbouwen op de technieken die in deze gids zijn gedemonstreerd. Elke bron bevat complete werkende code‑voorbeelden met stap‑voor‑stap uitleg om je te helpen extra API‑features onder de knie te krijgen en alternatieve implementaties in je eigen projecten te verkennen. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/generate-jpg-and-png-images/_index.md b/html/english/net/generate-jpg-and-png-images/_index.md index 3cc4b6acdf..38b9d7552d 100644 --- a/html/english/net/generate-jpg-and-png-images/_index.md +++ b/html/english/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Learn to use Aspose.HTML for .NET to manipulate HTML documents, convert HTML to Learn how to enable antialiasing for sharper PNG/JPG output when converting DOCX files using Aspose.HTML for .NET. ### [convert docx to png – create zip archive c# tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Learn how to convert DOCX files to PNG images and package them into a ZIP archive using C# and Aspose.HTML. +### [Create PNG from HTML with Aspose.HTML – .NET Guide](./create-png-from-html-with-aspose-html-net-guide/) +Learn how to generate PNG images from HTML using Aspose.HTML for .NET in a step-by-step guide. ## Conclusion diff --git a/html/english/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/english/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..04d489517d --- /dev/null +++ b/html/english/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,263 @@ +--- +category: general +date: 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. +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: en +lastmod: 2026-07-21 +og_description: Create PNG from HTML with Aspose.HTML. This tutorial shows you how + to render HTML to PNG, convert HTML to image, and master how to render HTML as PNG + in a few minutes. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Create PNG from HTML with Aspose.HTML – .NET Guide +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: Create PNG from HTML with Aspose.HTML – .NET Guide +url: /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 >}} + +# Create PNG from HTML with Aspose.HTML – .NET Guide + +Ever wondered how to **create PNG from HTML** without wrestling with headless browsers or fiddling with command‑line tools? You're not the only one. In many web‑centric apps you need a quick snapshot of a page—think email thumbnails, PDF reports, or social‑media previews. The good news is that Aspose.HTML makes the whole process feel like a walk in the park. + +In this tutorial we’ll walk through rendering HTML to PNG, converting HTML to image, and even answer the lingering “how to render HTML as PNG” question that pops up on Stack Overflow every week. By the end you’ll have a ready‑to‑run .NET console app that spits out a crisp PNG file from any HTML string you feed it. + +> **Pro tip:** Aspose.HTML works on .NET Framework, .NET Core, and .NET 5/6/7, so you can drop this into almost any C# project you already own. + +--- + +## What You’ll Need + +Before we dive in, make sure you have the following on hand: + +| Requirement | Why it matters | +|-------------|----------------| +| **.NET 6 SDK** (or newer) | Provides the runtime for the sample console app. | +| **Aspose.HTML for .NET** NuGet package | The library that does the heavy lifting of HTML rendering. | +| **A code editor** (Visual Studio, VS Code, Rider…) | To write and run the C# code. | +| **Basic C# knowledge** | You’ll understand the snippets without a crash‑course. | + +If you already have a project, just add the NuGet package: + +```bash +dotnet add package Aspose.HTML +``` + +That’s it—no extra DLLs, no native binaries, no licensing headaches for the evaluation version. + +--- + +## Step 1: Create a New .NET Console Project + +First, spin up a fresh console app so we can focus on the rendering logic in isolation. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Open the generated `Program.cs` file; we’ll replace its contents with the full example later. This clean slate guarantees that the **create png from html** process isn’t polluted by unrelated code. + +--- + +## Step 2: Add the Core Rendering Code (Create PNG from HTML) + +Now comes the heart of the tutorial. We’ll instantiate an `HTMLDocument`, tweak a couple of rendering options, and finally ask Aspose.HTML to write a PNG file to disk. + +```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}"); + } +} +``` + +### Why These Settings Matter + +* **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` lets you simulate bold‑italic without touching the source HTML. This is especially handy when the original markup lacks explicit styling. +* **ImageRenderer** – By passing both option objects you get a single, unified call that respects both image‑level and text‑level preferences. + +Run the program with `dotnet run`. You should see `output.png` appear in the project folder, showing a nicely rendered “Hello, world!” paragraph. + +--- + +## Step 3: Understanding the Rendering Pipeline (How to Render HTML as PNG) + +If you’re curious about **how to render HTML as PNG** under the hood, here’s a quick rundown: + +1. **HTML Parsing** – Aspose.HTML parses the markup into a DOM tree, just like a browser would. +2. **Layout Engine** – It computes box models, resolves CSS, and determines the exact placement of each element. +3. **Rasterization** – The layout is painted onto a bitmap using GDI+ (on Windows) or Skia (cross‑platform). This is where `ImageRenderingOptions` and `TextOptions` take effect. +4. **File Encoding** – Finally the bitmap is encoded as PNG, honoring transparency and compression settings. + +Because the library mirrors a full browser engine, you can rely on it for complex CSS, SVG, or even JavaScript‑generated content (provided you enable the scripting engine). That’s why it’s a solid choice when you need to **render html to png** for production workloads. + +--- + +## Step 4: Extending the Example – Real‑World Scenarios + +### 4.1 Rendering a Full Web Page + +Instead of a tiny paragraph, you might want to snapshot an entire page: + +```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 Handling External Resources (CSS, Images, Fonts) + +Aspose.HTML automatically resolves relative URLs, but you may need to set a **base URL** if your HTML string contains relative paths: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +For custom fonts, embed them via `@font-face` in a `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** If your page references external CSS or images, make sure those files are accessible to the `HTMLDocument` (e.g., by using `doc.Open` with a base URL). The **custom resource handler** will capture them automatically when you save. + +--- + +## Step 3: Configure Save Options to Export HTML to ZIP + +Now we tell Aspose.HTML to use our **custom resource handler** and to output a ZIP archive instead of a loose folder. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**What’s happening under the hood?** +When `doc.Save` runs, Aspose.HTML streams each resource (HTML file, CSS, images) into the `MemoryStream` returned by `MyHandler`. Once all streams are populated, the library compresses them into a single ZIP package. + +--- + +## Step 4: Save the HTML ZIP File + +Finally, persist the in‑memory ZIP to disk (or any other destination). The following line writes the archive to a folder you specify. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Expected output:** +After running the program, you’ll see `output.zip` in your project directory. Open it and you’ll find: + +- `index.html` – the markup we defined. +- `style.css` – the inline style extracted as a separate file (if any). +- Any referenced images or fonts (none in this tiny example). + +--- + +## Understanding the Custom Resource Handler Internals + +| Situation | What the Handler Does | Why It Helps | +|-----------|----------------------|--------------| +| **Large images** | Returns a fresh `MemoryStream` for each image, avoiding file‑system I/O. | Keeps memory usage predictable; you can later swap the stream for a cloud upload stream. | +| **Failed resource load** | If a resource cannot be retrieved, Aspose.HTML throws an exception before calling `HandleResource`. | You can catch the exception at `doc.Save` and log the missing asset. | +| **Custom naming** | Override `Resource.Name` inside `HandleResource` to rename files before they enter the ZIP. | Useful when you need SEO‑friendly filenames or want to strip query strings. | + +If you need to store resources on Azure Blob Storage instead of memory, simply replace the `return new MemoryStream();` line with code that returns a stream backed by the cloud SDK. + +--- + +## Common Pitfalls & How to Avoid Them + +1. **Forgot to set `SaveFormat.Zip`** – Aspose.HTML defaults to a folder output. Always set `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Output directory doesn’t exist** – `doc.Save` won’t create the parent folder. Use `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` beforehand. +3. **Handler returns a closed stream** – The stream must be writable and open; otherwise the ZIP will be corrupted. +4. **Large documents exhaust memory** – For massive sites, consider streaming directly to a file stream inside the handler instead of `MemoryStream`. + +--- + +## Extending the Solution: From Memory to Cloud + +Suppose you want to **save html zip** directly to an AWS S3 bucket. Replace the handler with something like: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Now the same `doc.Save` call will push each file straight into S3, and the final ZIP can be assembled later using AWS SDK’s multipart upload. This shows the **flexibility** of a **custom resource handler**—you control the storage mechanism end‑to‑end. + +--- + +## Full Working Example (Copy‑Paste Ready) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Run the program (`dotnet run`), and you’ll see the ✅ confirmation. Open `output.zip` with any archive manager—you’ll find a fully functional HTML page ready for offline use. + +--- + +## Visual Overview + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* + +The illustration above captures the data flow: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Conclusion + +We’ve just covered everything you need to **custom resource handler** your way to a **create html zip** solution in C#. By implementing a tiny subclass of `ResourceHandler`, configuring `HtmlSaveOptions`, and calling + + +## What Should You Learn Next? + + +The following tutorials cover closely related topics that build on the techniques demonstrated in this guide. Each resource includes complete working code examples with step-by-step explanations to help you master additional API features and explore alternative implementation approaches in your own projects. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/og-image.png b/html/english/net/html-extensions-and-conversions/custom-resource-handler-in-c-how-to-create-zip-of-html/og-image.png new file mode 100644 index 0000000000000000000000000000000000000000..503f729d78ecf47d6c0e26f072a4cd933bdd4ab7 GIT binary patch literal 48050 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

KcFocmzioWkW4hnp@Bt(gQLnu2msO8$ap7zI; zYSUXtzXbulVwt_qEfKMG6bCoy*RK=?`Bzre`o@N7uU33&YW_DXseDwzBGO}PApG1@ zRqwLR)>$|zH9{8gnG7T*KLCDx_#o`evL_5=&9XyZn@GhRmoN00gqCc~%*aFxSei?; zYN>@jx-CvHXJ;E@_okiW5e9~)+M<6+_{zgvR3D1CEY4nfL%rKMhLi)3Y3=@O(|>rT z6Ed1cO4OIw;Ih>~s~R$gV<>bTi|A7@ypb<2q^W=yWY}ilOPcqkM9aQXzS0eWxCzvo zG!-UhW@>JeJ+$bhnv=3{y=p%6AsBXD*qP!SttTl7NodM*-5{Ib-_0o^PV)|PX-$hu zVzm6$-N4Zjx%1uuPAk%Mzv|Yp%tMH4=#yWC3*^EyuU_OGTuYSz94B&l=5?~Wa!e~s zv=(5dceM|KwdJ3IL7>}!c`POVT#}dX2?$O6VX#25p10ODya^;m?ArBmkzOjZZpWEm z4qVikZ!C=PsrqG9S64TbeFRI2jK?E+N14vTazjsNKg{Oc4p2Ajfk+B?CSbA1Mrlng zt*X7MnvA>m0ju=w=M|k$R<>!8=W*uufvXjcw=G?4^k8vrK&*50Otun7iR`u5#x#*v zWCM`-TzxN2HnxY3w*W{AFf-t=o8IjPaWCXDcQHR&dC1y-_UZxn)3XmV4+kI@!~M+! zqWwS#02Cxz)pqdMt%lniY=LUIh7V{3MBlBh7LMCs|DIT0hU+-LdO&vc$3U%S7Fl0k zPi{{F+Z}Vi2+&$*lA(NN{gr}?O<<|4rG`Aaz7tq92H()kY`{1#Yiw*x$a$eHjPm8_ z;NRVnbGBNCHZKzr68!^iA7dXJ@7PuV!9``|z~C5=CILjOxFo+gKcAVISy55m`{4PO zfuWtYTYyWmp^=e@McWTLzYMUsR6$Vzz-s{hvrk(Rafx?9U1U?%SO*_}^Q8rnL|PkV zZ!ua;Qc@uyN*zi{dtN9tH8r~xdwso|k&%(7r-Y)_R)wi6xt8+K5Kqb5rk9tWk}m*m zau6JZg>!Fj|FF8IqT&Y^5PM_{k7}{K{#SjKJBddaRf?=V22EY zz@$R?=DaUIF~po9nwG5cfQLYpK_-Judv>g`6!dEMfo&`cR*C zdyqa*(mzm8K#+`*lAA2#>?|N-e*Pe&2mqR?!j4M!^d)0&M|F__>TM_8@7Ar0;$rry z%1V&G2L2Y5bc$(Fuw1 zAVtT$f3SaGTT@nDT@I%I;NZvz&@+L#4=_DfRqeCq{9A*WBY|JLw3JgHcVfI?nL)g5 zzFZ$(y;9|)zy(_`fgp01rVU|d=kNz|45;3H5_VG2D$BS&Ah_F2atA@gzl&Ej{)O+s z;h~8_lCZ%{Jb)_l^LJf{la+G8luArW0%DI>lKvkVKsA~w;6B%u&)dZu9ufGchT@Gj z?Bwhm>4k=p#9?q(rvY8wI7EG19q24$qoV;{tfZhMTMM=eo=7S`pRX`cxLgY?<&W=8 zb*dAyvpxQK<8rCG!q|9;2IkquROoE9AQhg*vffWlL6ODK4*21FZ|#O-w`i}n?dzx+ zFs{b~&GU>$`+Rxb)!t;!gEKf0D1<3Xi?2ypaJSd_LO-jf%_FfJZ4#M-0Gt5FhoY}> zxzY}3CZ%YX{jn`wcf4dF?=rwPX&ie_e0$k^d680IFBs%IgpG%@d${YCoX9bxU16$3 z$Ut%12lXJO`-L-)>DWO~q_7uyxi@k47Vn~gM{kgEaQm0L4VA?0T@$IZYX->`& zNC-lJz}n+nLPHS44^s--3;*4FwzzMD5|b$^DKV&+#1_2G(=;<&FP{KLFj>U%jF$51 zq1|b=JjriJnkxBCru#so?!YS*5WpC=8TAr~`FS8fOYk&!Ie&;owGn%IZ0woQQ3eYp>451?|G6Uq#%4y3Eo$#vz@9oJq zI{Ce-T>QLC5LWtqS-mTJBK0K$8&e^V)kg-gZ|hw|%W=MA@^ePq!9e`R+=dZTJbcm{ z2~x;$n^~CMp_H1P+-Xlx+!7~0AHPCKsG>s1<)sG@%hI<Y|(jG&XDmUMrCI045J){(a53|3rR`8I^t9Co@6 z^^MTcI_+7jAYov5ilYz;H$m2W9*=D`(4edVlrZ?`<={|0boBs8iorgG=fKzXjY&yM zC$$4!sp;gRaQpUb>~awe$wML%ip}lqjdwPt#>VNH#qf7rpzAD!1^fGHVs6PKlySC8 z>!F~ildT5Y5tg6*Ss%nn}9+DU2Mx*1P4%xTg}#5Pv94j z?gLjSF5zc0TOVqP`x^-)W3#SkBQJJUAU6Wcnarhh0#C!nMBO19;u+s{Xo&`)C3|6O zsm^2V)7OR09V#IuK!fY(OaqCy^7c>iVFm(mwPBv>?U@SnPXphYsA1?lJ6o@7-xMHQ z6RT)EeiCs*4Su~Bgehwx8K@3IxY)rEaq3>#1=(zm7X033wybge#0p} zUutk{_UMEpo}pIKye=hF1EuU7WA0IE`r~NJvw~J45@;w7IDqnzj((4qC z2Zls=B><1?ot0_$+ncMZJE`$+$;m0KPcBz<#{1x@0*WUQZJv!H-dA%QwGHD^_bJ7j z7K^8yPvO{jxan`ML7(j+E*NWKLgG&F-FtKpBh;S(nL(bHB0e=WHJmziQX^(RTEVge z0uW{|jf|Y5eLVf`iSl%Lz6oE$6MieJttO0U`BEL`6^p39m~lJ9qTapplPWcSsh;C92yDr3w;9wntPkvj2Pr!uwZZ|)gkVST;k(34^wW14MCMUR$Si;N&+ z`KAuYSZ8a!WNxcS7o_Fn^dxG!X(`aA8L%9r^p8Lw%rUzSedVcM_IT-5Vf=L2bH1UB z>}-C+iFfP9&#Y#>&QT(gOLJ$AVjS_1V8a`LG;T=RfESu-vgyiPaz9jd5cC`kdP>?) zU9-6V0lI$w{sH>rFpw5@DPH!p+TA$uTflvqoi6EZHO~DmQ+@qrf?;-xnA(%`5uA83 z%EJk4+{FN-6-*LmWv3`=y7=v<$B%1sn~U;U9>lQ z!p9{jCodnou01`p*D%nED~|vqkwTi_S2uEs(wBkm$Jn(lNAbZGQBRst+bi~Sy{eW1 zM+?m^b2DHc71Z~bv)(A@-u;g?)@OeIi?z3ms=8~xMimr6C8R?@LXhq*1?lbv>F#b7 z5G16#LAtxy(%s#Xo9?dtF7EsJpYe`!&NI%3_b~Pch6CXjYh5wtyyoKmI$H}H=^C7G zluXf8R~K&nniFdrRy^|28vQ^(N=jlS^U~U$-%NSlk5ZTfz0TcU!RzwqQmVbGB-E3f|SF> zfLRpfuQiOH$6jJRhb(QjeP4V<08sku)Uw^p&HV@!@ephvd9WBKUL`|Zh2>{C%{$~W zbhPelKKFbXskPFvvFxZFT^Ji{uo!+Q$H-}PeWo$jaQ-sL{jgmY#P4gm!;S6ZeO1!e zdn%fmE;oDrr7hQXV^v%v5x%_l-;4GZiuV>4o7_?Hm>w2U`7^vXWC08_9=06kphCkt zZum_m*Jin)HQ~g!;d@&qXtmjDs~ocu1z77C&fx$mB^v3(MUwJ`nyd2e|` z*jIf#_lQ;iI;0EOIT0DSJjRDX&P3|Ni}+EpD<>}siig?rn;j!-YkJJWn%de!0oSXM zh&2H8Ry&=m#A3r|W~tC?@2v`+OUz8`dU~#$#56RNr1UI@)U$w5z0|_18`tgaUC`z_ zAp@~+o(nxM?bTg&2|R+I|8sdq4Ex<7?QKkwM5VAd(h&h7=o9neh+triq1{0RpK5&K z;dE>Zlq8@{yQ0%lP~dhrSnXK%S$6F6c<}7M&<2zruf45m>Bps&W55Zx9P(WK)k8mz z)oONjSZ-~HGUynWyEZ-TEGTkSS3iEoWClie*1AIGsvd9v(v!OV`A2}eheuAfNl$SH zHRHG;G^vz-n;7d;`9}kTwIa9Rew~(Rd!*c6TPM(X8cE_PP=-e((Jb=qh+yFluNK3_ zc^D0#;pyo1@Xp22Vd`entEJ2`H

p%1LJ$iK!~f*`v*)F5@>QeTQ`;5CfIP? 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 literal 0 HcmV?d00001 diff --git a/html/french/net/generate-jpg-and-png-images/_index.md b/html/french/net/generate-jpg-and-png-images/_index.md index 59ca2dad12..23b2b4ccb0 100644 --- a/html/french/net/generate-jpg-and-png-images/_index.md +++ b/html/french/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Apprenez à utiliser Aspose.HTML pour .NET pour manipuler des documents HTML, co Apprenez à activer l'anticrénelage pour améliorer la qualité des images PNG/JPG générées à partir de documents DOCX avec Aspose.HTML. ### [Convertir docx en png – créer une archive zip tutoriel C#](./convert-docx-to-png-create-zip-archive-c-tutorial/) Apprenez à convertir des fichiers DOCX en images PNG et à les compresser dans une archive ZIP avec C#. +### [Créer un PNG à partir de HTML avec Aspose.HTML – Guide .NET](./create-png-from-html-with-aspose-html-net-guide/) +Apprenez à convertir du HTML en image PNG en utilisant Aspose.HTML pour .NET, avec un guide pas à pas et des conseils d'optimisation. ## Conclusion diff --git a/html/french/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/french/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..ca72fbe6bf --- /dev/null +++ b/html/french/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,264 @@ +--- +category: general +date: 2026-07-21 +description: Créez un PNG à partir de HTML avec Aspose.HTML en .NET. Apprenez à rendre + le HTML en PNG, à convertir le HTML en image, et maîtrisez la conversion du HTML + en PNG avec le code complet. +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: fr +lastmod: 2026-07-21 +og_description: Créez un PNG à partir de HTML avec Aspose.HTML. Ce tutoriel vous montre + comment rendre le HTML en PNG, convertir le HTML en image et maîtriser la conversion + du HTML en PNG en quelques minutes. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Créer un PNG à partir de HTML avec Aspose.HTML – Guide .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: Créer un PNG à partir de HTML avec Aspose.HTML – Guide .NET +url: /fr/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 >}} + +# Créer un PNG à partir de HTML avec Aspose.HTML – Guide .NET + +Vous vous êtes déjà demandé comment **créer un PNG à partir de HTML** sans vous battre avec des navigateurs sans tête ou des outils en ligne de commande ? Vous n’êtes pas seul. Dans de nombreuses applications centrées sur le web, il faut rapidement capturer une page — pensez aux miniatures d’e‑mail, aux rapports PDF ou aux aperçus pour les réseaux sociaux. La bonne nouvelle, c’est qu’Aspose.HTML rend tout le processus aussi simple qu’une promenade dans le parc. + +Dans ce tutoriel, nous allons parcourir le rendu du HTML en PNG, la conversion du HTML en image, et même répondre à la question récurrente « comment rendre du HTML en PNG » qui apparaît chaque semaine sur Stack Overflow. À la fin, vous disposerez d’une application console .NET prête à l’emploi qui génère un fichier PNG net à partir de n’importe quelle chaîne HTML que vous lui fournissez. + +> **Astuce :** Aspose.HTML fonctionne sur .NET Framework, .NET Core et .NET 5/6/7, vous pouvez donc l’intégrer dans presque n’importe quel projet C# que vous possédez déjà. + +--- + +## Ce dont vous aurez besoin + +Avant de commencer, assurez‑vous d’avoir les éléments suivants à portée de main : + +| Exigence | Pourquoi c’est important | +|----------|---------------------------| +| **.NET 6 SDK** (ou plus récent) | Fournit le runtime pour l’application console d’exemple. | +| **Aspose.HTML for .NET** package NuGet | La bibliothèque qui effectue le rendu HTML. | +| **Un éditeur de code** (Visual Studio, VS Code, Rider…) | Pour écrire et exécuter le code C#. | +| **Connaissances de base en C#** | Vous comprendrez les extraits sans cours intensif. | + +Si vous avez déjà un projet, ajoutez simplement le package NuGet : + +```bash +dotnet add package Aspose.HTML +``` + +C’est tout — pas de DLL supplémentaires, pas de binaires natifs, pas de tracas de licence pour la version d’évaluation. + +--- + +## Étape 1 : Créer un nouveau projet console .NET + +Tout d’abord, créez une nouvelle application console afin de pouvoir nous concentrer sur la logique de rendu en isolation. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Ouvrez le fichier `Program.cs` généré ; nous remplacerons son contenu par l’exemple complet plus tard. Cette ardoise vierge garantit que le processus **create png from html** n’est pas pollué par du code non lié. + +--- + +## Étape 2 : Ajouter le code de rendu principal (Créer un PNG à partir de HTML) + +Voici le cœur du tutoriel. Nous allons instancier un `HTMLDocument`, ajuster quelques options de rendu, puis demander à Aspose.HTML d’écrire un fichier PNG sur le disque. + +```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}"); + } +} +``` + +### Pourquoi ces paramètres sont importants + +* **ImageRenderingOptions** – Contrôle la taille du canevas et la qualité visuelle. Activer `UseAntialiasing` lisse les lignes et courbes diagonales, ce qui est crucial lorsque vous **convert html to image** pour des écrans haute‑DPI. +* **TextOptions** – `UseHinting` améliore le placement des glyphes, tandis que `FontStyle` vous permet de simuler du gras‑italique sans toucher au HTML source. Très pratique quand le balisage d’origine ne comporte pas de style explicite. +* **ImageRenderer** – En passant les deux objets d’options, vous obtenez un appel unique qui respecte à la fois les préférences au niveau de l’image et du texte. + +Exécutez le programme avec `dotnet run`. Vous devriez voir `output.png` apparaître dans le dossier du projet, affichant un paragraphe « Hello, world! » joliment rendu. + +--- + +## Étape 3 : Comprendre le pipeline de rendu (Comment rendre du HTML en PNG) + +Si vous vous demandez **comment rendre du HTML en PNG** en interne, voici un bref aperçu : + +1. **Analyse HTML** – Aspose.HTML analyse le balisage en un arbre DOM, comme le ferait un navigateur. +2. **Moteur de mise en page** – Il calcule les modèles de boîtes, résout le CSS et détermine le placement exact de chaque élément. +3. **Rasterisation** – La mise en page est peinte sur un bitmap à l’aide de GDI+ (sur Windows) ou de Skia (multiplateforme). C’est ici que `ImageRenderingOptions` et `TextOptions` entrent en jeu. +4. **Encodage du fichier** – Enfin le bitmap est encodé en PNG, en respectant la transparence et les paramètres de compression. + +Comme la bibliothèque reproduit un moteur de navigateur complet, vous pouvez compter sur elle pour du CSS complexe, du SVG ou même du contenu généré par JavaScript (à condition d’activer le moteur de script). C’est pourquoi c’est un choix solide lorsque vous devez **render html to png** pour des charges de travail en production. + +--- + +## Étape 4 : Étendre l’exemple – Scénarios réels + +### 4.1 Rendre une page web complète + +Au lieu d’un petit paragraphe, vous pourriez vouloir capturer une page entière : + +```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 Gérer les ressources externes (CSS, images, polices) + +Aspose.HTML résout automatiquement les URL relatives, mais vous pourriez devoir définir une **URL de base** si votre chaîne HTML contient des chemins relatifs : + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Pour des polices personnalisées, intégrez‑les via `@font-face` dans un bloc `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Astuce pro :** Si votre page référence des CSS ou des images externes, assurez‑vous que ces fichiers sont accessibles au `HTMLDocument` (par ex. en utilisant `doc.Open` avec une URL de base). Le **custom resource handler** les capturera automatiquement lors de l’enregistrement. + +--- + +## Étape 3 : Configurer les options d’enregistrement pour exporter HTML vers ZIP + +Nous indiquons maintenant à Aspose.HTML d’utiliser notre **custom resource handler** et de produire une archive ZIP au lieu d’un dossier décousu. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Que se passe‑t‑il en coulisses ?** +Lorsque `doc.Save` s’exécute, Aspose.HTML diffuse chaque ressource (fichier HTML, CSS, images) dans le `MemoryStream` retourné par `MyHandler`. Une fois tous les flux remplis, la bibliothèque les compresse en un seul package ZIP. + +--- + +## Étape 4 : Enregistrer le fichier ZIP HTML + +Enfin, persistez le ZIP en mémoire sur le disque (ou toute autre destination). La ligne suivante écrit l’archive dans le dossier que vous spécifiez. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Résultat attendu :** +Après l’exécution du programme, vous verrez `output.zip` dans le répertoire de votre projet. Ouvrez‑le et vous trouverez : + +- `index.html` – le balisage que nous avons défini. +- `style.css` – le style en ligne extrait en fichier séparé (le cas échéant). +- Toutes les images ou polices référencées (aucune dans cet exemple minuscule). + +--- + +## Comprendre le fonctionnement interne du gestionnaire de ressources personnalisé + +| Situation | Ce que le gestionnaire fait | Pourquoi c’est utile | +|-----------|----------------------------|----------------------| +| **Images volumineuses** | Retourne un nouveau `MemoryStream` pour chaque image, évitant les I/O du système de fichiers. | Maintient une utilisation de la mémoire prévisible ; vous pouvez ensuite remplacer le flux par un flux d’upload cloud. | +| **Échec de chargement d’une ressource** | Si une ressource ne peut pas être récupérée, Aspose.HTML lève une exception avant d’appeler `HandleResource`. | Vous pouvez intercepter l’exception à `doc.Save` et journaliser l’actif manquant. | +| **Nomination personnalisée** | Surcharge `Resource.Name` dans `HandleResource` pour renommer les fichiers avant qu’ils n’entrent dans le ZIP. | Pratique lorsque vous avez besoin de noms de fichiers SEO‑friendly ou de supprimer les chaînes de requête. | + +Si vous devez stocker les ressources sur Azure Blob Storage au lieu de la mémoire, remplacez simplement la ligne `return new MemoryStream();` par du code retournant un flux fourni par le SDK cloud. + +--- + +## Pièges courants & comment les éviter + +1. **Oubli de définir `SaveFormat.Zip`** – Aspose.HTML utilise par défaut une sortie dossier. Toujours définir `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Le répertoire de sortie n’existe pas** – `doc.Save` ne crée pas le dossier parent. Utilisez `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` au préalable. +3. **Le gestionnaire retourne un flux fermé** – Le flux doit être ouvrable et en écriture ; sinon le ZIP sera corrompu. +4. **Documents volumineux épuisent la mémoire** – Pour des sites massifs, envisagez de diffuser directement vers un `FileStream` dans le gestionnaire au lieu d’un `MemoryStream`. + +--- + +## Étendre la solution : de la mémoire au cloud + +Supposons que vous vouliez **save html zip** directement dans un bucket AWS S3. Remplacez le gestionnaire par quelque chose comme : + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Désormais, le même appel `doc.Save` poussera chaque fichier directement vers S3, et le ZIP final pourra être assemblé plus tard à l’aide du multipart upload du SDK AWS. Cela montre la **flexibilité** d’un **custom resource handler** — vous contrôlez le mécanisme de stockage de bout en bout. + +--- + +## Exemple complet fonctionnel (prêt à copier‑coller) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Exécutez le programme (`dotnet run`), et vous verrez la confirmation ✅. Ouvrez `output.zip` avec n’importe quel gestionnaire d’archives — vous y trouverez une page HTML pleinement fonctionnelle prête pour une utilisation hors ligne. + +--- + +## Vue d’ensemble visuelle + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Texte alternatif : Diagramme illustrant le flux du gestionnaire de ressources personnalisé pour l’exportation d’HTML vers une archive ZIP* + +L’illustration ci‑dessus capture le flux de données : **HTMLDocument → Gestionnaire de ressources personnalisé → Flux mémoire → Packaging ZIP**. + +--- + +## Conclusion + +Nous venons de couvrir tout ce dont vous avez besoin pour **custom resource handler** votre chemin vers une solution **create html zip** en C#. En implémentant une petite sous‑classe de `ResourceHandler`, en configurant `HtmlSaveOptions`, et en appelant + +## Que devez‑vous apprendre ensuite ? + +Les tutoriels suivants abordent des sujets étroitement liés qui s’appuient sur les techniques démontrées dans ce guide. Chaque ressource comprend des exemples de code complets avec des explications pas à pas pour vous aider à maîtriser d’autres fonctionnalités de l’API et explorer des approches d’implémentation alternatives dans vos propres projets. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/net/generate-jpg-and-png-images/_index.md b/html/german/net/generate-jpg-and-png-images/_index.md index 8c24c45378..32f7e0c763 100644 --- a/html/german/net/generate-jpg-and-png-images/_index.md +++ b/html/german/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Erfahren Sie, wie Sie mit Aspose.HTML für .NET HTML-Dokumente bearbeiten, HTML Erfahren Sie, wie Sie beim Konvertieren von DOCX-Dokumenten in PNG oder JPG Antialiasing aktivieren, um hochwertige Bilder zu erhalten. ### [DOCX in PNG konvertieren – ZIP-Archiv erstellen C#‑Tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Erfahren Sie, wie Sie DOCX‑Dateien in PNG‑Bilder umwandeln und diese in ein ZIP‑Archiv packen – Schritt‑für‑Schritt‑Anleitung in C#. +### [PNG aus HTML erstellen – .NET‑Leitfaden mit Aspose.HTML](./create-png-from-html-with-aspose-html-net-guide/) +Erfahren Sie, wie Sie mit Aspose.HTML für .NET HTML‑Inhalte in PNG‑Bilder konvertieren – Schritt‑für‑Schritt‑Anleitung. ## Abschluss diff --git a/html/german/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/german/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..f46bc2e306 --- /dev/null +++ b/html/german/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: Erstellen Sie PNG aus HTML mit Aspose.HTML in .NET. Lernen Sie, wie Sie + HTML zu PNG rendern, HTML in ein Bild konvertieren und das Rendern von HTML als + PNG mit vollständigem Code meistern. +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: de +lastmod: 2026-07-21 +og_description: Erstellen Sie PNG aus HTML mit Aspose.HTML. Dieses Tutorial zeigt + Ihnen, wie Sie HTML zu PNG rendern, HTML in ein Bild konvertieren und in wenigen + Minuten das Rendern von HTML als PNG meistern. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: PNG aus HTML mit Aspose.HTML erstellen – .NET‑Leitfaden +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 aus HTML mit Aspose.HTML erstellen – .NET‑Leitfaden +url: /de/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 aus HTML mit Aspose.HTML erstellen – .NET‑Leitfaden + +Haben Sie sich jemals gefragt, wie man **PNG aus HTML erstellt** ohne sich mit headless Browsern herumzuschlagen oder mit Befehlszeilentools zu basteln? Sie sind nicht allein. In vielen web‑zentrierten Anwendungen benötigen Sie einen schnellen Schnappschuss einer Seite – denken Sie an E‑Mail‑Thumbnails, PDF‑Berichte oder Social‑Media‑Vorschauen. Die gute Nachricht ist, dass Aspose.HTML den gesamten Prozess wie einen Spaziergang im Park erscheinen lässt. + +> **Pro‑Tipp:** Aspose.HTML funktioniert auf .NET Framework, .NET Core und .NET 5/6/7, sodass Sie es in fast jedes bereits vorhandene C#‑Projekt einbinden können. + +--- + +## Was Sie benötigen + +Bevor wir loslegen, stellen Sie sicher, dass Sie Folgendes zur Hand haben: + +| Anforderung | Warum es wichtig ist | +|-------------|----------------------| +| **.NET 6 SDK** (oder neuer) | Stellt die Laufzeit für die Beispiel‑Konsolen‑App bereit. | +| **Aspose.HTML for .NET** NuGet‑Paket | Die Bibliothek, die das Rendering von HTML übernimmt. | +| **Ein Code‑Editor** (Visual Studio, VS Code, Rider…) | Zum Schreiben und Ausführen des C#‑Codes. | +| **Grundlegende C#‑Kenntnisse** | Sie verstehen die Code‑Snippets ohne einen Schnellkurs. | + +Falls Sie bereits ein Projekt haben, fügen Sie einfach das NuGet‑Paket hinzu: + +```bash +dotnet add package Aspose.HTML +``` + +Das war's – keine zusätzlichen DLLs, keine nativen Binärdateien, keine Lizenzierungsprobleme für die Evaluierungs‑Version. + +--- + +## Schritt 1: Neues .NET‑Konsolenprojekt erstellen + +Zuerst erstellen wir eine neue Konsolen‑App, damit wir uns isoliert auf die Rendering‑Logik konzentrieren können. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Öffnen Sie die erzeugte Datei `Program.cs`; wir werden deren Inhalt später durch das vollständige Beispiel ersetzen. Diese leere Basis stellt sicher, dass der **create png from html**‑Prozess nicht durch unabhängigen Code verunreinigt wird. + +--- + +## Schritt 2: Kern‑Rendering‑Code hinzufügen (PNG aus HTML erstellen) + +Jetzt kommt das Herzstück des Tutorials. Wir werden ein `HTMLDocument` instanziieren, ein paar Rendering‑Optionen anpassen und schließlich Aspose.HTML anweisen, eine PNG‑Datei auf die Festplatte zu schreiben. + +```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}"); + } +} +``` + +### Warum diese Einstellungen wichtig sind + +* **ImageRenderingOptions** – Steuert die Canvas‑Größe und die visuelle Qualität. Das Aktivieren von `UseAntialiasing` glättet diagonale Linien und Kurven, was entscheidend ist, wenn Sie später **convert html to image** für hochauflösende Displays durchführen. +* **TextOptions** – `UseHinting` verbessert die Glyphen‑Platzierung, während `FontStyle` es ermöglicht, fett‑kursiv zu simulieren, ohne den Quell‑HTML zu ändern. Das ist besonders praktisch, wenn das ursprüngliche Markup keine explizite Formatierung enthält. +* **ImageRenderer** – Durch das Übergeben beider Options‑Objekte erhalten Sie einen einzigen, einheitlichen Aufruf, der sowohl Bild‑ als auch Texteinstellungen berücksichtigt. + +Führen Sie das Programm mit `dotnet run` aus. Sie sollten `output.png` im Projektordner sehen, das einen sauber gerenderten „Hello, world!“-Absatz zeigt. + +--- + +## Schritt 3: Das Rendering‑Pipeline verstehen (Wie man HTML als PNG rendert) + +Wenn Sie neugierig sind, **wie man HTML als PNG rendert** im Hintergrund, hier eine kurze Übersicht: + +1. **HTML‑Parsing** – Aspose.HTML analysiert das Markup in einen DOM‑Baum, genau wie ein Browser. +2. **Layout‑Engine** – Sie berechnet Box‑Modelle, löst CSS auf und bestimmt die genaue Platzierung jedes Elements. +3. **Rasterisierung** – Das Layout wird mit GDI+ (unter Windows) oder Skia (plattformübergreifend) auf ein Bitmap gemalt. Hier kommen `ImageRenderingOptions` und `TextOptions` zum Tragen. +4. **Datei‑Kodierung** – Schließlich wird das Bitmap als PNG kodiert, wobei Transparenz‑ und Kompressionseinstellungen berücksichtigt werden. + +Da die Bibliothek einer vollständigen Browser‑Engine entspricht, können Sie sich auf sie für komplexes CSS, SVG oder sogar JavaScript‑generierten Inhalt verlassen (sofern Sie die Skript‑Engine aktivieren). Deshalb ist sie eine solide Wahl, wenn Sie **render html to png** für Produktions‑Workloads benötigen. + +--- + +## Schritt 4: Beispiel erweitern – Praxis‑Szenarien + +### 4.1 Vollständige Webseite rendern + +Statt eines winzigen Absatzes möchten Sie vielleicht die gesamte Seite abbilden: + +```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 Umgang mit externen Ressourcen (CSS, Bilder, Schriftarten) + +Aspose.HTML löst relative URLs automatisch auf, aber Sie müssen eventuell eine **base URL** setzen, wenn Ihr HTML‑String relative Pfade enthält: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Für benutzerdefinierte Schriftarten betten Sie sie über `@font-face` in einem `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro‑Tipp:** Wenn Ihre Seite externe CSS‑Dateien oder Bilder referenziert, stellen Sie sicher, dass diese Dateien für das `HTMLDocument` zugänglich sind (z. B. indem Sie `doc.Open` mit einer Basis‑URL verwenden). Der **custom resource handler** erfasst sie automatisch beim Speichern. + +## Schritt 3: Konfigurieren der Speicheroptionen zum Export von HTML nach ZIP + +Jetzt weisen wir Aspose.HTML an, unseren **custom resource handler** zu verwenden und ein ZIP‑Archiv anstelle eines losen Ordners auszugeben. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Was im Hintergrund passiert:** +Wenn `doc.Save` ausgeführt wird, streamt Aspose.HTML jede Ressource (HTML‑Datei, CSS, Bilder) in den `MemoryStream`, der von `MyHandler` zurückgegeben wird. Sobald alle Streams gefüllt sind, komprimiert die Bibliothek sie zu einem einzigen ZIP‑Paket. + +## Schritt 4: Speichern der HTML‑ZIP‑Datei + +Abschließend speichern Sie das im Speicher befindliche ZIP auf die Festplatte (oder ein anderes Ziel). Die folgende Zeile schreibt das Archiv in einen von Ihnen angegebenen Ordner. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Erwartete Ausgabe:** +Nach dem Ausführen des Programms sehen Sie `output.zip` in Ihrem Projektverzeichnis. Öffnen Sie es und Sie finden: + +- `index.html` – das von uns definierte Markup. +- `style.css` – der Inline‑Style, als separate Datei extrahiert (falls vorhanden). +- Alle referenzierten Bilder oder Schriftarten (keine in diesem kleinen Beispiel). + +## Verständnis der internen Funktionsweise des benutzerdefinierten Ressourcen‑Handlers + +| Situation | Was der Handler tut | Warum es hilft | +|-----------|----------------------|----------------| +| **Große Bilder** | Gibt für jedes Bild einen neuen `MemoryStream` zurück und vermeidet Dateisystem‑I/O. | Hält den Speicherverbrauch vorhersehbar; Sie können den Stream später gegen einen Cloud‑Upload‑Stream austauschen. | +| **Fehlgeschlagener Ressourcen‑Ladevorgang** | Wenn eine Ressource nicht abgerufen werden kann, wirft Aspose.HTML eine Ausnahme, bevor `HandleResource` aufgerufen wird. | Sie können die Ausnahme bei `doc.Save` abfangen und das fehlende Asset protokollieren. | +| **Benutzerdefinierte Benennung** | `Resource.Name` innerhalb von `HandleResource` überschreiben, um Dateien vor dem Hinzufügen zum ZIP umzubenennen. | Nützlich, wenn Sie SEO‑freundliche Dateinamen benötigen oder Abfrage‑Strings entfernen wollen. | + +Wenn Sie Ressourcen statt im Speicher auf Azure Blob Storage speichern müssen, ersetzen Sie einfach die Zeile `return new MemoryStream();` durch Code, der einen vom Cloud‑SDK unterstützten Stream zurückgibt. + +## Häufige Fallstricke & wie man sie vermeidet + +1. **Vergessen, `SaveFormat.Zip` zu setzen** – Aspose.HTML gibt standardmäßig einen Ordner aus. Setzen Sie immer `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Ausgabeverzeichnis existiert nicht** – `doc.Save` erstellt den übergeordneten Ordner nicht. Verwenden Sie vorher `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`. +3. **Handler gibt einen geschlossenen Stream zurück** – Der Stream muss schreibbar und geöffnet sein; sonst wird das ZIP beschädigt. +4. **Große Dokumente erschöpfen den Speicher** – Für sehr große Websites sollten Sie in Erwägung ziehen, direkt in einen Dateistream im Handler zu streamen statt `MemoryStream` zu verwenden. + +## Erweiterung der Lösung: Von Speicher zu Cloud + +Angenommen, Sie möchten **save html zip** direkt in einen AWS S3‑Bucket speichern. Ersetzen Sie den Handler durch etwas wie: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Jetzt wird derselbe `doc.Save`‑Aufruf jede Datei direkt in S3 hochladen, und das endgültige ZIP kann später mit dem Multipart‑Upload des AWS SDK zusammengesetzt werden. Das zeigt die **Flexibilität** eines **custom resource handler** – Sie steuern den Speichermechanismus von Anfang bis Ende. + +## Vollständiges funktionierendes Beispiel (Copy‑Paste‑bereit) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Führen Sie das Programm (`dotnet run`) aus, und Sie sehen die ✅‑Bestätigung. Öffnen Sie `output.zip` mit einem beliebigen Archivmanager – Sie finden eine voll funktionsfähige HTML‑Seite, bereit für die Offline‑Nutzung. + +## Visuelle Übersicht + +![Diagramm, das den Ablauf des benutzerdefinierten Ressourcen‑Handlers beim Export von HTML in ein ZIP‑Archiv zeigt](image.png) + +*Alt-Text: Diagramm, das den Ablauf des benutzerdefinierten Ressourcen‑Handlers beim Export von HTML in ein ZIP‑Archiv zeigt* + +Die obige Abbildung erfasst den Datenfluss: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +## Fazit + +Wir haben gerade alles behandelt, was Sie benötigen, um mit einem **custom resource handler** zu einer **create html zip**‑Lösung in C# zu gelangen. Indem Sie eine kleine Unterklasse von `ResourceHandler` implementieren, `HtmlSaveOptions` konfigurieren und aufrufen + +## Was sollten Sie als Nächstes lernen? + +Die folgenden Tutorials behandeln eng verwandte Themen, die auf den in diesem Leitfaden gezeigten Techniken aufbauen. Jede Ressource enthält vollständige, funktionierende Code‑Beispiele mit Schritt‑für‑Schritt‑Erklärungen, um Ihnen zu helfen, weitere API‑Funktionen zu meistern und alternative Implementierungsansätze in Ihren eigenen Projekten zu erkunden. + +- [Wie man HTML in C# speichert – Komplettanleitung mit benutzerdefiniertem Ressourcen‑Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [HTML aus String in C# erstellen – Leitfaden für benutzerdefinierten Ressourcen‑Handler](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [Wie man HTML in C# zippt – HTML als ZIP speichern](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/net/generate-jpg-and-png-images/_index.md b/html/greek/net/generate-jpg-and-png-images/_index.md index 5fd47cce36..3475c3a3f9 100644 --- a/html/greek/net/generate-jpg-and-png-images/_index.md +++ b/html/greek/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ url: /el/net/generate-jpg-and-png-images/ Μάθετε πώς να βελτιώσετε την ποιότητα των εικόνων ενεργοποιώντας το antialiasing κατά τη μετατροπή αρχείων DOCX σε PNG ή JPG. ### [Μετατροπή docx σε png – δημιουργία αρχείου zip με C# σεμινάριο](./convert-docx-to-png-create-zip-archive-c-tutorial/) Μάθετε πώς να μετατρέψετε αρχεία DOCX σε PNG και να δημιουργήσετε αρχείο ZIP χρησιμοποιώντας C#. +### [Δημιουργία PNG από HTML με Aspose.HTML – .NET Οδηγός](./create-png-from-html-with-aspose-html-net-guide/) +Μάθετε πώς να μετατρέψετε HTML σε PNG χρησιμοποιώντας το Aspose.HTML για .NET σε αυτό το βήμα-βήμα σεμινάριο. ## Σύναψη diff --git a/html/greek/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/greek/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..ec543fa7d3 --- /dev/null +++ b/html/greek/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,260 @@ +--- +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: el +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: /el/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** χωρίς να παλεύετε με headless browsers ή εργαλεία γραμμής εντολών; Δεν είστε οι μόνοι. Σε πολλές εφαρμογές που επικεντρώνονται στο web χρειάζεστε μια γρήγορη λήψη στιγμιότυπου μιας σελίδας — σκεφτείτε μικρογραφίες email, αναφορές PDF ή προεπισκοπήσεις κοινωνικών δικτύων. Τα καλά νέα είναι ότι το Aspose.HTML κάνει όλη τη διαδικασία να μοιάζει με μια βόλτα στο πάρκο. + +Σε αυτό το tutorial θα περάσουμε από τη μετατροπή HTML σε PNG, τη μετατροπή HTML σε εικόνα, και θα απαντήσουμε στην επίμονη ερώτηση «πώς να αποδώσετε HTML ως PNG» που εμφανίζεται στο Stack Overflow κάθε εβδομάδα. Στο τέλος θα έχετε μια έτοιμη .NET console εφαρμογή που παράγει ένα καθαρό αρχείο PNG από οποιοδήποτε HTML string της δώσετε. + +> **Pro tip:** Το Aspose.HTML λειτουργεί σε .NET Framework, .NET Core και .NET 5/6/7, ώστε να μπορείτε να το ενσωματώσετε σχεδόν σε οποιοδήποτε C# project ήδη διαθέτετε. + +--- + +## Τι Θα Χρειαστείτε + +Πριν ξεκινήσουμε, βεβαιωθείτε ότι έχετε τα παρακάτω: + +| Απαίτηση | Γιατί είναι σημαντικό | +|-------------|----------------| +| **.NET 6 SDK** (ή νεότερο) | Παρέχει το runtime για το δείγμα console εφαρμογής. | +| **Aspose.HTML for .NET** πακέτο NuGet | Η βιβλιοθήκη που κάνει το βαρέως τύπου rendering του HTML. | +| **Ένας επεξεργαστής κώδικα** (Visual Studio, VS Code, Rider…) | Για να γράψετε και να εκτελέσετε τον κώδικα C#. | +| **Βασικές γνώσεις C#** | Θα καταλάβετε τα αποσπάσματα χωρίς εισαγωγικό μάθημα. | + +Αν έχετε ήδη ένα project, απλώς προσθέστε το πακέτο NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +Αυτό είναι όλο — χωρίς επιπλέον DLLs, χωρίς native binaries, χωρίς προβλήματα αδειοδότησης για την έκδοση αξιολόγησης. + +--- + +## Βήμα 1: Δημιουργία Νέου .NET Console Project + +Πρώτα, δημιουργήστε μια νέα console εφαρμογή ώστε να εστιάσουμε στη λογική rendering με απομόνωση. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Ανοίξτε το παραγόμενο αρχείο `Program.cs`; θα αντικαταστήσουμε το περιεχόμενό του με το πλήρες παράδειγμα αργότερα. Αυτό το καθαρό ξεκίνημα εγγυάται ότι η διαδικασία **create png from html** δεν θα μολυνθεί από άσχετο κώδικα. + +--- + +## Βήμα 2: Προσθήκη Κώδικα Core Rendering (Create PNG from HTML) + +Τώρα έρχεται η καρδιά του tutorial. Θα δημιουργήσουμε ένα `HTMLDocument`, θα ρυθμίσουμε μερικές επιλογές rendering, και τέλος θα ζητήσουμε από το 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** για οθόνες υψηλής DPI. +* **TextOptions** – Το `UseHinting` βελτιώνει την τοποθέτηση των γλυφών, ενώ το `FontStyle` σας επιτρέπει να προσομοιώσετε bold‑italic χωρίς να επεξεργαστείτε το αρχικό HTML. Αυτό είναι ιδιαίτερα χρήσιμο όταν το markup δεν περιέχει ρητή μορφοποίηση. +* **ImageRenderer** – Με τη μεταβίβαση και των δύο αντικειμένων επιλογών, λαμβάνετε μια ενιαία κλήση που σέβεται τόσο τις προτιμήσεις επιπέδου εικόνας όσο και κειμένου. + +Τρέξτε το πρόγραμμα με `dotnet run`. Θα πρέπει να δείτε το `output.png` να εμφανίζεται στον φάκελο του project, εμφανίζοντας μια ωραία αποδομένη παράγραφο “Hello, world!”. + +--- + +## Βήμα 3: Κατανόηση του Rendering Pipeline (How to Render HTML as PNG) + +Αν σας ενδιαφέρει το **how to render HTML as PNG** εσωτερικά, να μια σύντομη επισκόπηση: + +1. **HTML Parsing** – Το Aspose.HTML αναλύει το markup σε δέντρο DOM, όπως θα έκανε ένας browser. +2. **Layout Engine** – Υπολογίζει τα box models, επιλύει το CSS και καθορίζει την ακριβή θέση κάθε στοιχείου. +3. **Rasterization** – Η διάταξη ζωγραφίζεται πάνω σε bitmap χρησιμοποιώντας GDI+ (στα Windows) ή Skia (cross‑platform). Εδώ εφαρμόζονται τα `ImageRenderingOptions` και `TextOptions`. +4. **File Encoding** – Τέλος, το bitmap κωδικοποιείται ως PNG, διατηρώντας τη διαφάνεια και τις ρυθμίσεις συμπίεσης. + +Επειδή η βιβλιοθήκη αντικατοπτρίζει έναν πλήρη μηχανισμό browser, μπορείτε να βασιστείτε σε αυτή για σύνθετο CSS, SVG ή ακόμη και περιεχόμενο που δημιουργείται από JavaScript (εφόσον ενεργοποιήσετε τη μηχανή scripting). Γι' αυτό είναι μια αξιόπιστη επιλογή όταν χρειάζεται να **render html to png** για παραγωγικές εργασίες. + +--- + +## Βήμα 4: Επέκταση του Παραδείγματος – Σενάρια Πραγματικού Κόσμου + +### 4.1 Rendering μιας Πλήρους Ιστοσελίδας + +Αντί για μια μικρή παράγραφο, ίσως θέλετε να τραβήξετε στιγμιότυπο ολόκληρης σελίδας: + +```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, Images, Fonts) + +Το Aspose.HTML επιλύει αυτόματα σχετικές URL, αλλά ίσως χρειαστεί να ορίσετε **base URL** αν το HTML string σας περιέχει σχετικές διαδρομές: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Για προσαρμοσμένες γραμματοσειρές, ενσωματώστε τις μέσω `@font-face` σε ένα `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Αν η σελίδα σας αναφέρεται σε εξωτερικά CSS ή εικόνες, βεβαιωθείτε ότι αυτά τα αρχεία είναι προσβάσιμα από το `HTMLDocument` (π.χ. χρησιμοποιώντας `doc.Open` με base URL). Ο **προσαρμοσμένος διαχειριστής πόρων** θα τα συλλάβει αυτόματα όταν αποθηκεύσετε. + +--- + +## Βήμα 3: Διαμόρφωση Επιλογών Αποθήκευσης για Εξαγωγή HTML σε ZIP + +Τώρα λέμε στο Aspose.HTML να χρησιμοποιήσει τον **προσαρμοσμένο διαχειριστή πόρων** και να δημιουργήσει ένα αρχείο ZIP αντί για έναν χαλαρό φάκελο. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Τι συμβαίνει στο παρασκήνιο;** +Όταν εκτελείται το `doc.Save`, το Aspose.HTML στέλνει κάθε πόρο (HTML, CSS, εικόνες) στο `MemoryStream` που επιστρέφει η `MyHandler`. Μόλις γεμίσουν όλα τα streams, η βιβλιοθήκη τα συμπιέζει σε ένα ενιαίο πακέτο ZIP. + +--- + +## Βήμα 4: Αποθήκευση του HTML ZIP Αρχείου + +Τέλος, αποθηκεύστε το ZIP που βρίσκεται στη μνήμη σε δίσκο (ή σε οποιονδήποτε άλλο προορισμό). Η παρακάτω γραμμή γράφει το αρχείο σε έναν φάκελο που θα ορίσετε. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Αναμενόμενο αποτέλεσμα:** +Μετά την εκτέλεση του προγράμματος, θα δείτε το `output.zip` στον φάκελο του έργου σας. Ανοίξτε το και θα βρείτε: + +- `index.html` – το markup που ορίσαμε. +- `style.css` – το ενσωματωμένο στυλ που εξήχθη ως ξεχωριστό αρχείο (αν υπάρχει). +- Οποιαδήποτε εικόνα ή γραμματοσειρά που αναφέρεται (δεν υπάρχει σε αυτό το μικρό παράδειγμα). + +--- + +## Κατανόηση των Εσωτερικών Λειτουργιών του Προσαρμοσμένου Διαχειριστή Πόρων + +| Κατάσταση | Τι Κάνει ο Διαχειριστής | Γιατί Βοηθά | +|-----------|------------------------|--------------| +| **Μεγάλες εικόνες** | Επιστρέφει ένα νέο `MemoryStream` για κάθε εικόνα, αποφεύγοντας I/O στο σύστημα αρχείων. | Κρατά τη χρήση μνήμης προβλέψιμη· μπορείτε αργότερα να αντικαταστήσετε το stream με ένα cloud upload stream. | +| **Αποτυχία φόρτωσης πόρου** | Αν δεν μπορεί να ανακτηθεί ένας πόρος, το Aspose.HTML ρίχνει εξαίρεση πριν καλέσει το `HandleResource`. | Μπορείτε να πιάσετε την εξαίρεση στο `doc.Save` και να καταγράψετε το ελλιπές στοιχείο. | +| **Προσαρμοσμένη ονομασία** | Υπερκαλύπτετε το `Resource.Name` μέσα στο `HandleResource` για να μετονομάσετε αρχεία πριν μπουν στο ZIP. | Χρήσιμο όταν χρειάζεστε SEO‑φιλικά ονόματα ή θέλετε να αφαιρέσετε query strings. | + +Αν θέλετε να αποθηκεύετε τους πόρους σε Azure Blob Storage αντί για μνήμη, απλώς αντικαταστήστε τη γραμμή `return new MemoryStream();` με κώδικα που επιστρέφει ένα stream που υποστηρίζεται από το cloud SDK. + +--- + +## Συνηθισμένα Πιθανά Σφάλματα & Πώς να τα Αποφύγετε + +1. **Ξεχάσατε να ορίσετε `SaveFormat.Zip`** – Το Aspose.HTML προεπιλογή είναι έξοδος σε φάκελο. Πάντα ορίζετε `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Ο φάκελος εξόδου δεν υπάρχει** – Το `doc.Save` δεν δημιουργεί τον γονικό φάκελο. Χρησιμοποιήστε `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` εκ των προτέρων. +3. **Ο διαχειριστής επιστρέφει κλειστό stream** – Το stream πρέπει να είναι εγγράψιμο και ανοιχτό· διαφορετικά το ZIP θα είναι κατεστραμμένο. +4. **Μεγάλα έγγραφα εξαντλούν τη μνήμη** – Για τεράστιους ιστότοπους, σκεφτείτε να κάνετε streaming απευθείας σε file stream μέσα στο handler αντί για `MemoryStream`. + +--- + +## Επέκταση της Λύσης: Από Μνήμη σε Cloud + +Ας υποθέσουμε ότι θέλετε να **αποθηκεύσετε html zip** απευθείας σε ένα bucket AWS S3. Αντικαταστήστε τον διαχειριστή με κάτι όπως: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Τώρα η ίδια κλήση `doc.Save` θα σπρώχνει κάθε αρχείο κατευθείαν στο S3, και το τελικό ZIP μπορεί να συναρμολογηθεί αργότερα χρησιμοποιώντας το multipart upload του AWS SDK. Αυτό δείχνει την **ευελιξία** ενός **προσαρμοσμένου διαχειριστή πόρων**—ελέγχετε τον μηχανισμό αποθήκευσης από άκρη σε άκρη. + +--- + +## Πλήρες Παράδειγμα Εργασίας (Ready‑to‑Copy) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Τρέξτε το πρόγραμμα (`dotnet run`) και θα δείτε την ✅ επιβεβαίωση. Ανοίξτε το `output.zip` με οποιονδήποτε διαχειριστή αρχείων· θα βρείτε μια πλήρως λειτουργική σελίδα HTML έτοιμη για χρήση εκτός σύνδεσης. + +--- + +## Οπτική Επισκόπηση + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* + +Η παραπάνω εικονογράφηση αποτυπώνει τη ροή δεδομένων: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Συμπέρασμα + +Καλύψαμε όλα όσα χρειάζεστε για να **προσαρμόσετε τον διαχειριστή πόρων** και να δημιουργήσετε μια λύση **create html zip** σε C#. Με την υλοποίηση μιας μικρής υποκλάσης του `ResourceHandler`, τη διαμόρφωση του `HtmlSaveOptions` και την κλήση + +## Τι Πρέπει Να Μάθετε Στη Σύντομη Μελλοντική Περίοδο; + +Τα παρακάτω tutorials καλύπτουν στενά συναφή θέματα που επεκτείνουν τις τεχνικές που παρουσιάστηκαν σε αυτόν τον οδηγό. Κάθε πόρος περιλαμβάνει πλήρη κώδικα και βήμα‑βήμα εξηγήσεις για να κυριαρχήσετε σε επιπλέον δυνατότητες του API και να εξερευνήσετε εναλλακτικές προσεγγίσεις στα δικά σας έργα. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/net/generate-jpg-and-png-images/_index.md b/html/hindi/net/generate-jpg-and-png-images/_index.md index b35cbb62e1..d0b1b10f5a 100644 --- a/html/hindi/net/generate-jpg-and-png-images/_index.md +++ b/html/hindi/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ HTML दस्तावेज़ों में हेरफेर करने DOCX फ़ाइलों को PNG या JPG में परिवर्तित करते समय एंटीएलियासिंग को सक्षम करने के चरणों को जानें। ### [DOCX को PNG में परिवर्तित करें – ZIP आर्काइव बनाएं C# ट्यूटोरियल](./convert-docx-to-png-create-zip-archive-c-tutorial/) C# में DOCX फ़ाइलों को PNG छवियों में बदलें और उन्हें ZIP आर्काइव में संकलित करना सीखें। चरण-दर-चरण मार्गदर्शिका। +### [Aspose.HTML के साथ HTML से PNG बनाएं – .NET गाइड](./create-png-from-html-with-aspose-html-net-guide/) +Aspose.HTML का उपयोग करके HTML को PNG इमेज में बदलने की प्रक्रिया को चरण-दर-चरण सीखें। ## निष्कर्ष diff --git a/html/hindi/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/hindi/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..e45a8a7e18 --- /dev/null +++ b/html/hindi/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,258 @@ +--- +category: general +date: 2026-07-21 +description: Aspose.HTML का उपयोग करके .NET में HTML से PNG बनाएं। जानें कि 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: hi +lastmod: 2026-07-21 +og_description: Aspose.HTML के साथ HTML से PNG बनाएं। यह ट्यूटोरियल आपको दिखाता है + कि कैसे HTML को PNG में रेंडर करें, HTML को इमेज में बदलें, और कुछ ही मिनटों में + HTML को PNG के रूप में रेंडर करना सीखें। +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Aspose.HTML के साथ HTML से PNG बनाएं – .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: Aspose.HTML के साथ HTML से PNG बनाएं – .NET गाइड +url: /hi/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 >}} + +# Aspose.HTML के साथ HTML से PNG बनाएं – .NET गाइड + +क्या आप कभी यह सोचते रहे हैं कि **HTML से PNG कैसे बनाएं** बिना हेडलेस ब्राउज़रों से जूझे या कमांड‑लाइन टूल्स के साथ छेड़छाड़ किए? आप अकेले नहीं हैं। कई वेब‑केंद्रित एप्लिकेशनों में आपको पेज का त्वरित स्नैपशॉट चाहिए—जैसे ईमेल थंबनेल, PDF रिपोर्ट, या सोशल‑मीडिया प्रीव्यू। अच्छी खबर यह है कि Aspose.HTML पूरी प्रक्रिया को एक आसान सैर जैसा बना देता है। + +इस ट्यूटोरियल में हम HTML को PNG में रेंडर करने, HTML को इमेज में बदलने, और वह लगातार आने वाला “HTML को PNG के रूप में कैसे रेंडर करें” सवाल जिसका सामना हर हफ़्ते Stack Overflow पर होता है, का उत्तर देंगे। अंत तक आपके पास एक तैयार‑चलाने‑योग्य .NET कंसोल ऐप होगा जो किसी भी HTML स्ट्रिंग से एक स्पष्ट PNG फ़ाइल उत्पन्न करेगा। + +> **Pro tip:** Aspose.HTML .NET Framework, .NET Core, और .NET 5/6/7 पर काम करता है, इसलिए आप इसे लगभग किसी भी मौजूदा C# प्रोजेक्ट में डाल सकते हैं। + +--- + +## आप क्या चाहिए + +| Requirement | Why it matters | +|-------------|----------------| +| **.NET 6 SDK** (or newer) | नमूना कंसोल एप्लिकेशन के लिए रनटाइम प्रदान करता है। | +| **Aspose.HTML for .NET** NuGet package | HTML रेंडरिंग के भारी काम को संभालने वाली लाइब्रेरी। | +| **A code editor** (Visual Studio, VS Code, Rider…) | C# कोड लिखने और चलाने के लिए। | +| **Basic C# knowledge** | आप स्निपेट्स को बिना किसी क्रैश‑कोर्स के समझ पाएँगे। | + +यदि आपके पास पहले से प्रोजेक्ट है, तो बस NuGet पैकेज जोड़ें: + +```bash +dotnet add package Aspose.HTML +``` + +बस इतना ही—कोई अतिरिक्त DLLs नहीं, कोई नेटिव बाइनरी नहीं, मूल्यांकन संस्करण के लिए कोई लाइसेंसिंग सिरदर्द नहीं। + +--- + +## चरण 1: नया .NET कंसोल प्रोजेक्ट बनाएं + +पहले, एक नया कंसोल ऐप बनाएं ताकि हम रेंडरिंग लॉजिक पर अलग‑थलग ध्यान केंद्रित कर सकें। + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +जनरेट हुई `Program.cs` फ़ाइल खोलें; हम बाद में इसकी सामग्री को पूर्ण उदाहरण से बदल देंगे। यह साफ़ स्लेट यह सुनिश्चित करती है कि **create png from html** प्रक्रिया अनावश्यक कोड से दूषित न हो। + +--- + +## चरण 2: कोर रेंडरिंग कोड जोड़ें (HTML से PNG बनाएं) + +अब ट्यूटोरियल का मुख्य भाग आता है। हम एक `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` को चालू करने से तिरछी रेखाएँ और वक्र स्मूद होते हैं, जो बाद में उच्च‑DPI डिस्प्ले के लिए **html को इमेज में बदलने** के समय महत्वपूर्ण है। +* **TextOptions** – `UseHinting` ग्लिफ़ प्लेसमेंट को बेहतर बनाता है, जबकि `FontStyle` आपको स्रोत HTML को छुए बिना बोल्ड‑इटैलिक सिमुलेट करने देता है। यह तब उपयोगी है जब मूल मार्कअप में स्पष्ट स्टाइलिंग नहीं है। +* **ImageRenderer** – दोनों विकल्प ऑब्जेक्ट पास करने से आपको एक ही एकीकृत कॉल मिलता है जो इमेज‑लेवल और टेक्स्ट‑लेवल दोनों प्राथमिकताओं का सम्मान करता है। + +`dotnet run` के साथ प्रोग्राम चलाएँ। आपको प्रोजेक्ट फ़ोल्डर में `output.png` दिखाई देगा, जिसमें “Hello, world!” पैराग्राफ़ सुंदर रूप से रेंडर हुआ होगा। + +--- + +## चरण 3: रेंडरिंग पाइपलाइन को समझना (HTML को PNG के रूप में कैसे रेंडर करें) + +यदि आप **HTML को PNG के रूप में कैसे रेंडर करें** के पीछे की प्रक्रिया के बारे में जिज्ञासु हैं, तो यहाँ एक त्वरित सारांश है: + +1. **HTML Parsing** – Aspose.HTML मार्कअप को DOM ट्री में पार्स करता है, बिल्कुल उसी तरह जैसे कोई ब्राउज़र करता है। +2. **Layout Engine** – यह बॉक्स मॉडल की गणना करता है, CSS को हल करता है, और प्रत्येक एलिमेंट की सटीक स्थिति निर्धारित करता है। +3. **Rasterization** – लेआउट को GDI+ (Windows पर) या Skia (क्रॉस‑प्लेटफ़ॉर्म) का उपयोग करके बिटमैप पर पेंट किया जाता है। यहाँ `ImageRenderingOptions` और `TextOptions` प्रभावी होते हैं। +4. **File Encoding** – अंत में बिटमैप को PNG के रूप में एन्कोड किया जाता है, ट्रांसपैरेंसी और कम्प्रेशन सेटिंग्स का सम्मान करते हुए। + +क्योंकि लाइब्रेरी एक पूर्ण ब्राउज़र इंजन को प्रतिबिंबित करती है, आप इसे जटिल CSS, SVG, या यहाँ तक कि JavaScript‑जनित कंटेंट (यदि आप स्क्रिप्टिंग इंजन सक्षम करते हैं) के लिए भरोसा कर सकते हैं। यही कारण है कि जब आपको उत्पादन कार्यभार के लिए **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 हल करता है, लेकिन यदि आपके HTML स्ट्रिंग में रिलेटिव पाथ हैं तो आपको **base URL** सेट करना पड़ सकता है: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +कस्टम फ़ॉन्ट्स के लिए, उन्हें `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** यदि आपका पेज बाहरी CSS या इमेज़ रेफ़रेंस करता है, तो सुनिश्चित करें कि वे फ़ाइलें `HTMLDocument` के लिए एक्सेसिबल हों (जैसे `doc.Open` के साथ बेस URL देना)। **कस्टम रिसोर्स हैंडलर** उन्हें स्वचालित रूप से कैप्चर कर लेगा जब आप सेव करेंगे। + +--- + +## चरण 3: HTML को ZIP में एक्सपोर्ट करने के लिए सेव ऑप्शन कॉन्फ़िगर करें + +अब हम Aspose.HTML को बताते हैं कि वह हमारे **कस्टम रिसोर्स हैंडलर** का उपयोग करे और एक लूज़ फ़ोल्डर की बजाय ZIP आर्काइव आउटपुट करे। + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**अंदर क्या हो रहा है?** +जब `doc.Save` चलता है, तो Aspose.HTML प्रत्येक रिसोर्स (HTML फ़ाइल, CSS, इमेज़) को `MyHandler` द्वारा रिटर्न किए गए `MemoryStream` में स्ट्रीम करता है। सभी स्ट्रीम्स भर जाने के बाद, लाइब्रेरी उन्हें एक सिंगल ZIP पैकेज में कंप्रेस कर देती है। + +--- + +## चरण 4: HTML ZIP फ़ाइल को सेव करें + +अंत में, इन‑मे़मोरी ZIP को डिस्क (या किसी अन्य डेस्टिनेशन) पर लिखें। नीचे दिया गया लाइन आपके द्वारा निर्दिष्ट फ़ोल्डर में आर्काइव लिखता है। + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Expected output:** +प्रोग्राम चलाने के बाद, आपके प्रोजेक्ट डायरेक्टरी में `output.zip` दिखाई देगा। इसे खोलें और आपको मिलेगा: + +- `index.html` – वह मार्कअप जो हमने परिभाषित किया था। +- `style.css` – यदि कोई इनलाइन स्टाइल अलग फ़ाइल के रूप में एक्सट्रैक्ट हुई हो तो। +- कोई भी रेफ़रेंस्ड इमेज़ या फ़ॉन्ट्स (इस छोटे उदाहरण में नहीं)। + +--- + +## कस्टम रिसोर्स हैंडलर के इंटर्नल्स को समझना + +| Situation | What the Handler Does | Why It Helps | +|-----------|----------------------|--------------| +| **Large images** | Returns a fresh `MemoryStream` for each image, avoiding file‑system I/O. | Keeps memory usage predictable; you can later swap the stream for a cloud upload stream. | +| **Failed resource load** | If a resource cannot be retrieved, Aspose.HTML throws an exception before calling `HandleResource`. | You can catch the exception at `doc.Save` and log the missing asset. | +| **Custom naming** | Override `Resource.Name` inside `HandleResource` to rename files before they enter the ZIP. | Useful when you need SEO‑friendly filenames or want to strip query strings. | + +यदि आप रिसोर्सेज़ को मेमोरी की बजाय Azure Blob Storage पर स्टोर करना चाहते हैं, तो बस `return new MemoryStream();` लाइन को क्लाउड SDK कोड से बदल दें। + +--- + +## सामान्य गलतियाँ और उन्हें कैसे टालें + +1. **Forgot to set `SaveFormat.Zip`** – Aspose.HTML डिफ़ॉल्ट रूप से फ़ोल्डर आउटपुट देता है। हमेशा `saveOptions.SaveFormat = SaveFormat.Zip;` सेट करें। +2. **Output directory doesn’t exist** – `doc.Save` पैरेंट फ़ोल्डर नहीं बनाता। पहले `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` चलाएँ। +3. **Handler returns a closed stream** – स्ट्रीम writable और open होनी चाहिए; नहीं तो ZIP करप्ट हो जाएगा। +4. **Large documents exhaust memory** – बहुत बड़े साइट्स के लिए, हैंडलर के अंदर `MemoryStream` की बजाय फ़ाइल स्ट्रीम में सीधे स्ट्रीम करने पर विचार करें। + +--- + +## समाधान को एक्सटेंड करना: मेमोरी से क्लाउड तक + +मान लीजिए आप **save html zip** सीधे एक AWS S3 बकेट में सेव करना चाहते हैं। हैंडलर को इस तरह बदलें: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +अब वही `doc.Save` कॉल प्रत्येक फ़ाइल को सीधे S3 में पुश करेगा, और अंतिम ZIP को बाद में AWS SDK के मल्टीपार्ट अपलोड से असेंबल किया जा सकता है। यह **कस्टम रिसोर्स हैंडलर** की **लचीलापन** दिखाता है—आप स्टोरेज मैकेनिज़्म को एंड‑टू‑एंड कंट्रोल कर सकते हैं। + +--- + +## पूर्ण कार्यशील उदाहरण (कॉपी‑पेस्ट तैयार) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +प्रोग्राम चलाएँ (`dotnet run`), और आपको ✅ पुष्टि दिखाई देगी। `output.zip` को किसी भी आर्काइव मैनेजर से खोलें—आपको एक पूरी तरह से कार्यात्मक HTML पेज मिलेगा जो ऑफ़लाइन उपयोग के लिए तैयार है। + +--- + +## विज़ुअल ओवरव्यू + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* +*Alt text (हिंदी में): HTML को ZIP आर्काइव में एक्सपोर्ट करने के लिए कस्टम रिसोर्स हैंडलर फ्लो को दर्शाता डायग्राम* + +ऊपर की इल्युस्ट्रेशन डेटा फ्लो को कैप्चर करती है: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**। + +--- + +## निष्कर्ष + +हमने अभी-अभी सभी आवश्यक चीज़ें कवर कर ली हैं जिससे आप C# में **कस्टम रिसोर्स हैंडलर** का उपयोग करके **create html zip** समाधान बना सकें। `ResourceHandler` की एक छोटी सबक्लास इम्प्लीमेंट करके, `HtmlSaveOptions` को कॉन्फ़िगर करके, और `doc.Save` को कॉल करके आप पूरी प्रक्रिया पर नियंत्रण रख सकते हैं। + +## अगला क्या सीखें? + +निम्नलिखित ट्यूटोरियल्स उन विषयों को कवर करते हैं जो इस गाइड में दिखाए गए तकनीकों पर आधारित हैं। प्रत्येक रिसोर्स में पूर्ण कार्यशील कोड उदाहरण और स्टेप‑बाय‑स्टेप एक्सप्लैनेशन है, जिससे आप अतिरिक्त API फीचर्स में महारत हासिल कर सकें और अपने प्रोजेक्ट्स में वैकल्पिक इम्प्लीमेंटेशन अप्रोचेज़ को एक्सप्लोर कर सकें। + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/net/generate-jpg-and-png-images/_index.md b/html/hongkong/net/generate-jpg-and-png-images/_index.md index 33103bd045..8507c6f5cf 100644 --- a/html/hongkong/net/generate-jpg-and-png-images/_index.md +++ b/html/hongkong/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET 提供了一種將 HTML 轉換為映像的簡單方法。 了解如何在使用 Aspose.HTML for .NET 將 DOCX 轉換為 PNG 或 JPG 時啟用抗鋸齒,以提升圖像品質。 ### [使用 Aspose.HTML 在 .NET 中將 docx 轉換為 png 並建立 zip 壓縮檔 C# 教學](./convert-docx-to-png-create-zip-archive-c-tutorial/) 學習如何使用 Aspose.HTML for .NET 將 docx 轉換為 png,並將圖像打包成 zip 壓縮檔的完整步驟。 +### [使用 Aspose.HTML 在 .NET 中從 HTML 產生 PNG – 教學](./create-png-from-html-with-aspose-html-net-guide/) +學習如何使用 Aspose.HTML for .NET 將 HTML 直接轉換為 PNG 圖像,涵蓋設定、參數與最佳化技巧。 ## 結論 diff --git a/html/hongkong/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/hongkong/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..ac1dd923d6 --- /dev/null +++ b/html/hongkong/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,260 @@ +--- +category: general +date: 2026-07-21 +description: 使用 Aspose.HTML 於 .NET 建立 PNG 圖像。學習如何將 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: zh-hant +lastmod: 2026-07-21 +og_description: 使用 Aspose.HTML 從 HTML 產生 PNG。本教學將示範如何將 HTML 轉換為 PNG、將 HTML 轉為圖像,並在幾分鐘內掌握 + HTML 轉 PNG 的技巧。 +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: 使用 Aspose.HTML 從 HTML 建立 PNG – .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: 使用 Aspose.HTML 從 HTML 產生 PNG – .NET 指南 +url: /zh-hant/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 >}} + +# 使用 Aspose.HTML 於 .NET 建立 PNG 於 HTML – 指南 + +有沒有想過如何 **從 HTML 建立 PNG**,而不必與無頭瀏覽器搏鬥或玩弄命令列工具?你並非唯一有此需求的人。在許多以 Web 為中心的應用程式中,你需要快速截取頁面的畫面——例如電郵縮圖、PDF 報告或社交媒體預覽。好消息是 Aspose.HTML 讓整個流程變得輕鬆如散步。 + +> **小技巧:** Aspose.HTML 支援 .NET Framework、.NET Core 以及 .NET 5/6/7,讓你可以把它直接放入幾乎所有現有的 C# 專案中。 + +--- + +## 你需要的條件 + +在開始之前,請確保手邊有以下項目: + +| 需求 | 為什麼重要 | +|------|------------| +| **.NET 6 SDK**(或更新版本) | 為範例主控台應用程式提供執行環境。 | +| **Aspose.HTML for .NET** NuGet 套件 | 負責 HTML 呈現的核心函式庫。 | +| **程式碼編輯器**(Visual Studio、VS Code、Rider…) | 用來編寫與執行 C# 程式碼。 | +| **基本的 C# 知識** | 讓你能直接理解範例程式碼,無需額外快速入門。 | + +如果你已經有專案,只需加入 NuGet 套件: + +```bash +dotnet add package Aspose.HTML +``` + +就這樣——不需要額外的 DLL、原生二進位檔,也不會因評估版授權而頭痛。 + +--- + +## 步驟 1:建立新的 .NET 主控台專案 + +首先,建立一個全新的主控台應用程式,以便我們能在隔離的環境中專注於呈現邏輯。 + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +開啟產生的 `Program.cs` 檔案;稍後我們會把內容全部換成完整範例。這樣的乾淨起點可確保 **create png from html** 流程不會被其他程式碼干擾。 + +--- + +## 步驟 2:加入核心呈現程式碼(從 HTML 建立 PNG) + +現在進入本教學的核心。我們會實例化 `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` 可平滑對角線與曲線,對於之後在高 DPI 螢幕上 **convert html to image** 時尤為關鍵。 +* **TextOptions** – `UseHinting` 改善字形定位,`FontStyle` 讓你在不修改原始 HTML 的情況下模擬粗斜體。當原始標記缺乏明確樣式時特別有用。 +* **ImageRenderer** – 同時傳入兩個選項物件,即可一次呼叫完成,且同時遵守影像層級與文字層級的設定。 + +使用 `dotnet run` 執行程式。你應該會在專案資料夾看到 `output.png`,裡面呈現出一段精美的 “Hello, world!” 文字段落。 + +--- + +## 步驟 3:了解呈現管線(如何將 HTML 轉成 PNG) + +如果你對 **how to render HTML as PNG** 的底層原理感到好奇,以下是快速說明: + +1. **HTML 解析** – Aspose.HTML 會將標記解析成 DOM 樹,與瀏覽器的行為相同。 +2. **版面引擎** – 計算盒模型、解析 CSS,並確定每個元素的精確位置。 +3. **光柵化** – 版面會使用 GDI+(在 Windows)或 Skia(跨平台)繪製到位圖上。此階段會套用 `ImageRenderingOptions` 與 `TextOptions`。 +4. **檔案編碼** – 最後將位圖編碼為 PNG,保留透明度與壓縮設定。 + +由於此函式庫模擬完整的瀏覽器引擎,你可以放心使用它處理複雜的 CSS、SVG,甚至是 JavaScript 產生的內容(只要啟用腳本引擎)。因此在需要 **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,但若你的 HTML 字串內含相對路徑,可能需要設定 **base URL**: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +若要使用自訂字型,可在 `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **小技巧:** 若你的頁面引用了外部 CSS 或圖片,請確保這些檔案對 `HTMLDocument` 可存取(例如使用 `doc.Open` 並提供 base URL)。**custom resource handler** 會在儲存時自動捕捉它們。 + +--- + +## 步驟 3:設定儲存選項以匯出 HTML 為 ZIP + +現在告訴 Aspose.HTML 使用我們的 **custom resource handler**,並將輸出改為 ZIP 壓縮檔,而不是散落的資料夾。 + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**背後發生了什麼?** +當 `doc.Save` 執行時,Aspose.HTML 會把每個資源(HTML、CSS、圖片)串流至 `MyHandler` 回傳的 `MemoryStream`。所有串流完成後,函式庫會把它們壓縮成單一的 ZIP 套件。 + +--- + +## 步驟 4:儲存 HTML ZIP 檔案 + +最後,將記憶體中的 ZIP 寫入磁碟(或其他目的地)。以下程式碼會把壓縮檔寫入你指定的資料夾。 + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**預期輸出:** +執行程式後,你會在專案目錄看到 `output.zip`。解壓後會看到: + +- `index.html` – 我們先前定義的標記。 +- `style.css` – 若有內嵌樣式會被抽出為獨立檔案。 +- 任何被引用的圖片或字型(此簡易範例中沒有)。 + +--- + +## 了解自訂資源處理程式的內部運作 + +| 情境 | 處理程式的行為 | 為什麼有幫助 | +|-----------|----------------------|--------------| +| **大型圖片** | 為每張圖片回傳全新的 `MemoryStream`,避免檔案系統 I/O。 | 讓記憶體使用量可預測;之後可改為雲端上傳串流。 | +| **資源載入失敗** | 若資源無法取得,Aspose.HTML 會在呼叫 `HandleResource` 前拋出例外。 | 你可以在 `doc.Save` 時捕捉例外,記錄缺失的資產。 | +| **自訂命名** | 在 `HandleResource` 內覆寫 `Resource.Name` 以重新命名檔案再放入 ZIP。 | 需要 SEO 友好檔名或想去除查詢字串時非常實用。 | + +如果想把資源儲存到 Azure Blob Storage,只要把 `return new MemoryStream();` 那行換成使用雲端 SDK 回傳的串流即可。 + +--- + +## 常見陷阱與避免方式 + +1. **忘記設定 `SaveFormat.Zip`** – Aspose.HTML 預設輸出為資料夾。務必設定 `saveOptions.SaveFormat = SaveFormat.Zip;`。 +2. **輸出目錄不存在** – `doc.Save` 不會自動建立上層資料夾。事先使用 `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`。 +3. **處理程式回傳已關閉的串流** – 串流必須是可寫且開啟的,否則 ZIP 會損毀。 +4. **大型文件耗盡記憶體** – 對於龐大網站,考慮在處理程式內直接串流至檔案串流,而非 `MemoryStream`。 + +--- + +## 延伸應用:從記憶體到雲端 + +假設你想直接把 **save html zip** 存到 AWS S3。只要把處理程式換成類似以下的實作: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +現在相同的 `doc.Save` 呼叫會把每個檔案直接推送至 S3,最終的 ZIP 可使用 AWS SDK 的多段上傳組合。這正顯示了 **custom resource handler** 的 **彈性**——你可以端對端掌控儲存機制。 + +--- + +## 完整可執行範例(直接複製貼上) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +執行程式 (`dotnet run`),即可看到 ✅ 確認訊息。以任意壓縮檔管理工具開啟 `output.zip`,會發現一個可離線使用的完整 HTML 頁面。 + +--- + +## 視覺概覽 + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* +*說明文字:顯示自訂資源處理程式將 HTML 匯出為 ZIP 壓縮檔的流程圖* + +上述圖示說明了資料流向:**HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**。 + +--- + +## 結論 + +我們已完整說明如何透過 **custom resource handler** 在 C# 中打造 **create html zip** 解決方案。只要實作一個簡短的 `ResourceHandler` 子類別、設定 `HtmlSaveOptions`,再呼叫 `doc.Save`,即可自行掌控儲存機制,從記憶體到雲端皆可輕鬆切換。 + +## 接下來該學什麼? + +以下教學與本篇內容緊密相關,能進一步深化你對 API 的運用與其他實作方式: + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/net/generate-jpg-and-png-images/_index.md b/html/hungarian/net/generate-jpg-and-png-images/_index.md index dc2c2b0acd..d11f171c5c 100644 --- a/html/hungarian/net/generate-jpg-and-png-images/_index.md +++ b/html/hungarian/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Tanulja meg az Aspose.HTML for .NET használatát HTML-dokumentumok kezeléséhe Ismerje meg, hogyan állíthatja be az antialiasingot a DOCX dokumentumok PNG vagy JPG képekké konvertálásakor az Aspose.HTML for .NET használatával. ### [docx konvertálása png-re – zip archívum létrehozása C# oktatóanyag](./convert-docx-to-png-create-zip-archive-c-tutorial/) Ismerje meg, hogyan konvertálhat docx fájlokat png képekké, majd csomagolhatja őket zip archívumba C#-ban az Aspose.HTML segítségével. +### [PNG létrehozása HTML-ből az Aspose.HTML segítségével – .NET útmutató](./create-png-from-html-with-aspose-html-net-guide/) +Ismerje meg, hogyan konvertálhat HTML-t PNG képpé az Aspose.HTML for .NET használatával, lépésről lépésre útmutató. ## Következtetés diff --git a/html/hungarian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/hungarian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..0646d17b9d --- /dev/null +++ b/html/hungarian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,242 @@ +--- +category: general +date: 2026-07-21 +description: Készíts PNG-t HTML-ből az Aspose.HTML segítségével .NET-ben. Tanulja + meg, hogyan renderelhet HTML-t PNG-re, hogyan konvertálhat HTML-t képre, és sajátítsa + el a HTML PNG-ként történő renderelését teljes kóddal. +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: hu +lastmod: 2026-07-21 +og_description: Készíts PNG-t HTML-ből az Aspose.HTML segítségével. Ez az útmutató + megmutatja, hogyan renderelj HTML-t PNG-re, hogyan konvertálj HTML-t képpé, és néhány + perc alatt elsajátíthatod a HTML PNG-re történő renderelését. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: PNG létrehozása HTML‑ből az Aspose.HTML segítségével – .NET útmutató +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 létrehozása HTML-ből az Aspose.HTML segítségével – .NET útmutató +url: /hu/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 létrehozása HTML‑ből Aspose.HTML segítségével – .NET útmutató + +Valaha is elgondolkodtál, hogyan **hozz létre PNG-t HTML‑ből** anélkül, hogy fej nélküli böngészőkkel küzdenél vagy parancssori eszközökkel bajlódnál? Nem vagy egyedül. Sok web‑központú alkalmazásban gyors pillanatképre van szükség egy oldalról – gondolj e‑mail bélyegképekre, PDF‑jelentésekre vagy közösségi média előnézetekre. A jó hír, hogy az Aspose.HTML a teljes folyamatot olyan egyszerűvé teszi, mint egy séta a parkban. + +> **Pro tipp:** Az Aspose.HTML működik .NET Framework‑on, .NET Core‑on és .NET 5/6/7‑en, így szinte bármely meglévő C# projektbe beillesztheted. + +--- + +## Amire szükséged lesz + +| Követelmény | Miért fontos | +|-------------|----------------| +| **.NET 6 SDK** (vagy újabb) | Biztosítja a futtatókörnyezetet a minta konzolalkalmazáshoz. | +| **Aspose.HTML for .NET** NuGet package | Az a könyvtár, amely a HTML renderelés nehéz feladatait végzi. | +| **Kódszerkesztő** (Visual Studio, VS Code, Rider…) | A C# kód írásához és futtatásához. | +| **Alap C# ismeretek** | Megérted a kódrészleteket anélkül, hogy bevezető kurzusra lenne szükséged. | + +Ha már van projekted, csak add hozzá a NuGet csomagot: + +```bash +dotnet add package Aspose.HTML +``` + +Ennyi—nincs extra DLL, nincs natív bináris, nincs licencelési fejfájás az értékelő verzióhoz. + +## 1. lépés: Új .NET konzolprojekt létrehozása + +Először hozzunk létre egy friss konzolalkalmazást, hogy a renderelési logikára koncentrálhassunk elszigetelten. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Nyisd meg a generált `Program.cs` fájlt; később a teljes példával fogjuk felülírni a tartalmát. Ez a tiszta kiindulási állapot biztosítja, hogy a **create png from html** folyamat ne legyen szennyezve más kóddal. + +## 2. lépés: A fő renderelési kód hozzáadása (PNG létrehozása HTML‑ből) + +Most jön a tutorial szíve. Létrehozzuk az `HTMLDocument` példányt, finomhangolunk néhány renderelési beállítást, majd végül megkérjük az Aspose.HTML‑t, hogy PNG fájlt írjon a lemezre. + +```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}"); + } +} +``` + +### Miért fontosak ezek a beállítások + +* **ImageRenderingOptions** – A vászon méretét és a vizuális minőséget szabályozza. A `UseAntialiasing` bekapcsolása simítja a diagonális vonalakat és görbéket, ami kulcsfontosságú, amikor később **convert html to image** magas DPI‑s kijelzőkhöz. +* **TextOptions** – A `UseHinting` javítja a glif elhelyezését, míg a `FontStyle` lehetővé teszi a félkövér‑dőlt szimulálását anélkül, hogy a forrás HTML‑t módosítanád. Ez különösen hasznos, ha az eredeti jelölőnyelv nem tartalmaz explicit stílusokat. +* **ImageRenderer** – Mindkét opcióobjektum átadásával egyetlen, egységes hívást kapsz, amely figyelembe veszi mind a képszintű, mind a szövegszintű beállításokat. + +A programot `dotnet run` paranccsal futtasd. A projekt mappájában meg kell jelennie az `output.png` fájlnak, amely egy szépen renderelt „Hello, world!” bekezdést mutat. + +## 3. lépés: A renderelési csővezeték megértése (Hogyan rendereljünk HTML‑t PNG‑ként) + +Ha kíváncsi vagy arra, hogy **how to render HTML as PNG** hogyan működik a háttérben, itt egy gyors áttekintés: + +1. **HTML Parsing** – Az Aspose.HTML a jelölőnyelvet egy DOM‑fává dolgozza fel, akárcsak egy böngésző. +2. **Layout Engine** – Számolja a dobozmodelleket, feloldja a CSS‑t, és meghatározza minden elem pontos elhelyezkedését. +3. **Rasterization** – A layoutot egy bitmapre festi GDI+ (Windows-on) vagy Skia (keresztplatformos) segítségével. Itt lépnek életbe az `ImageRenderingOptions` és a `TextOptions`. +4. **File Encoding** – Végül a bitmap PNG‑ként kerül kódolásra, tiszteletben tartva az átlátszóságot és a tömörítési beállításokat. + +Mivel a könyvtár egy teljes böngészőmotorra hasonlít, megbízhatsz benne összetett CSS, SVG vagy akár JavaScript‑generált tartalom esetén is (ha engedélyezed a szkriptmotorot). Ezért erős választás, amikor **render html to png** kell a termelési feladatokhoz. + +## 4. lépés: A példa kiterjesztése – Valós világ szcenáriók + +### 4.1 Teljes weboldal renderelése + +Egy apró bekezdés helyett lehet, hogy egy teljes oldal pillanatképét szeretnéd elkészíteni: + +```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 Külső erőforrások kezelése (CSS, képek, betűkészletek) + +Az Aspose.HTML automatikusan feloldja a relatív URL‑eket, de előfordulhat, hogy **base URL**‑t kell beállítanod, ha a HTML‑szöveged relatív útvonalakat tartalmaz: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Egyedi betűkészletekhez ágyazd be őket `@font-face`‑el egy `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tipp:** Ha az oldalad külső CSS‑t vagy képeket hivatkozik, győződj meg róla, hogy ezek a fájlok elérhetők a `HTMLDocument` számára (pl. `doc.Open`‑nal egy alap‑URL‑t megadva). A **egyedi erőforráskezelő** automatikusan elkapja őket a mentéskor. + +--- + +## 3. lépés: Mentési beállítások konfigurálása HTML‑ZIP‑re exportáláshoz + +Most megmondjuk az Aspose.HTML‑nek, hogy használja az **egyedi erőforráskezelő**‑t, és ZIP‑archívumot állítson elő egy laza mappa helyett. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Mi történik a háttérben?** +Amikor a `doc.Save` lefut, az Aspose.HTML minden erőforrást (HTML‑fájl, CSS, képek) a `MyHandler` által visszaadott `MemoryStream`‑be stream‑eli. Miután minden folyamot feltöltött, a könyvtár egyetlen ZIP‑csomaggá tömöríti őket. + +--- + +## 4. lépés: HTML‑ZIP fájl mentése + +Végül a memóriában lévő ZIP‑et lemezre (vagy bármely más célra) írjuk. Az alábbi sor az általad megadott mappába helyezi az archívumot. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Várt kimenet:** +A program futtatása után a projekt könyvtárában megtalálod a `output.zip` fájlt. Nyisd meg, és a következőket fogod látni: + +- `index.html` – a definiált markup. +- `style.css` – az inline stílus külön fájlként kinyerve (ha van). +- Bármely hivatkozott kép vagy betűkészlet (ebben a kis példában nincs). + +--- + +## Az egyedi erőforráskezelő belső működésének megértése + +| Helyzet | Mit csinál a kezelő | Miért segít | +|-----------|----------------------|--------------| +| **Nagy képek** | Minden képhez új `MemoryStream`‑et ad vissza, elkerülve a fájlrendszer‑I/O‑t. | A memóriahasználat kiszámítható marad; később a streamet felhő‑feltöltő stream‑re cserélheted. | +| **Erőforrás betöltése sikertelen** | Ha egy erőforrás nem érhető el, az Aspose.HTML kivételt dob, mielőtt a `HandleResource` meghívódna. | A `doc.Save`‑nél elkapott kivételt naplózhatod, és feljegyezheted a hiányzó eszközt. | +| **Egyedi névadás** | A `HandleResource`‑ben felülírhatod a `Resource.Name`‑t, hogy átnevezd a fájlokat a ZIP‑be kerülés előtt. | Hasznos SEO‑barát fájlnevekhez vagy a lekérdezési karakterláncok eltávolításához. | + +Ha Azure Blob Storage‑ra szeretnéd tárolni az erőforrásokat a memória helyett, egyszerűen cseréld le a `return new MemoryStream();` sort olyan kóddal, amely a felhő SDK‑ja által biztosított stream‑et adja vissza. + +--- + +## Gyakori hibák és elkerülésük + +1. **Elfelejtetted beállítani a `SaveFormat.Zip`‑et** – Az Aspose.HTML alapértelmezés szerint mappakimenetet használ. Mindig állítsd be `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **A kimeneti könyvtár nem létezik** – A `doc.Save` nem hozza létre a szülő mappát. Használd előtte a `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`‑t. +3. **A kezelő zárt streamet ad vissza** – A streamnek írhatónak és nyitottnak kell lennie; ellenkező esetben a ZIP sérült lesz. +4. **Nagy dokumentumok kimerítik a memóriát** – Nagy méretű oldalak esetén fontold meg, hogy a kezelő közvetlenül fájl‑stream‑be ír, a `MemoryStream` helyett. + +--- + +## A megoldás kiterjesztése: Memóriáról felhőre + +Tegyük fel, hogy a **html zip mentését** közvetlenül egy AWS S3 bucket‑be szeretnéd. Cseréld le a kezelőt valami ilyesmire: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Most már a `doc.Save` hívás minden fájlt közvetlenül az S3‑ba tölt, a végső ZIP‑et pedig később az AWS SDK multipart‑upload funkciójával állíthatod össze. Ez mutatja a **egyedi erőforráskezelő** **rugalmas** jellegét – te irányítod a tárolási mechanizmust a teljes folyamat során. + +--- + +## Teljes, működő példa (másolás‑beillesztés kész) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Futtasd a programot (`dotnet run`), és a ✅ megerősítést fogod látni. Nyisd meg az `output.zip`‑et bármely archívumkezelővel – egy teljesen működő HTML‑oldalt találsz benne, amely offline használatra készen áll. + +--- + +## Vizuális áttekintés + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt szöveg: Diagram, amely bemutatja az egyedi erőforráskezelő adatfolyamát a HTML ZIP‑archívumba exportálás során* + +A fenti ábra a következő adatfolyamot ábrázolja: **HTMLDocument → Egyedi erőforráskezelő → Memória‑streamek → ZIP‑csomagolás**. + +--- + +## Összegzés + +Most már mindent megtanultál, amire szükséged van ahhoz, hogy **egyedi erőforráskezelő** segítségével **html zip létrehozás** megoldást valósíts meg C#‑ban. Egy apró `ResourceHandler` alosztály implementálásával, a `HtmlSaveOptions` beállításával és a `doc.Save` meghívásával elérheted a kívánt eredményt. + +## Mit tanulj meg legközelebb? + +A következő oktatóanyagok szorosan kapcsolódó témákat dolgoznak fel, amelyek tovább építenek a jelen útmutatóban bemutatott technikákra. Minden forrás komplett, működő kódrészleteket és lépésről‑lépésre magyarázatokat tartalmaz, hogy könnyedén elsajátíthasd az API további funkcióit és alternatív megvalósítási módokat a saját projektjeidben. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/net/generate-jpg-and-png-images/_index.md b/html/indonesian/net/generate-jpg-and-png-images/_index.md index 4e885ce325..ef5be8bb9c 100644 --- a/html/indonesian/net/generate-jpg-and-png-images/_index.md +++ b/html/indonesian/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Pelajari cara menggunakan Aspose.HTML untuk .NET guna memanipulasi dokumen HTML, Pelajari cara mengaktifkan antialiasing untuk meningkatkan kualitas gambar PNG atau JPG saat mengonversi dokumen DOCX menggunakan Aspose.HTML. ### [Konversi DOCX ke PNG – Membuat Arsip ZIP dengan C# Tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Pelajari cara mengonversi file DOCX menjadi PNG dan mengemasnya ke dalam arsip ZIP menggunakan C# dengan Aspose.HTML. +### [Buat PNG dari HTML dengan Aspose.HTML – Panduan .NET](./create-png-from-html-with-aspose-html-net-guide/) +Pelajari cara mengonversi HTML menjadi gambar PNG menggunakan Aspose.HTML untuk .NET dalam panduan langkah demi langkah. ## Kesimpulan diff --git a/html/indonesian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/indonesian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..ff8f5bb60a --- /dev/null +++ b/html/indonesian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,260 @@ +--- +category: general +date: 2026-07-21 +description: Buat PNG dari HTML menggunakan Aspose.HTML di .NET. Pelajari cara merender + HTML ke PNG, mengonversi HTML ke gambar, dan kuasai cara merender HTML sebagai PNG + dengan kode lengkap. +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: id +lastmod: 2026-07-21 +og_description: Buat PNG dari HTML dengan Aspose.HTML. Tutorial ini menunjukkan cara + merender HTML ke PNG, mengonversi HTML menjadi gambar, dan menguasai cara merender + HTML sebagai PNG dalam beberapa menit. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Buat PNG dari HTML dengan Aspose.HTML – Panduan .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: Buat PNG dari HTML dengan Aspose.HTML – Panduan .NET +url: /id/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 >}} + +# Buat PNG dari HTML dengan Aspose.HTML – Panduan .NET + +Pernah bertanya-tanya bagaimana cara **membuat PNG dari HTML** tanpa harus berurusan dengan browser headless atau mengutak‑atik alat baris perintah? Anda tidak sendirian. Dalam banyak aplikasi berbasis web, Anda membutuhkan snapshot cepat dari sebuah halaman—misalnya thumbnail email, laporan PDF, atau pratinjau media sosial. Kabar baiknya, Aspose.HTML membuat seluruh proses terasa seperti berjalan di taman. + +Pada tutorial ini kami akan membahas cara merender HTML menjadi PNG, mengonversi HTML ke gambar, dan bahkan menjawab pertanyaan yang terus muncul “bagaimana cara merender HTML sebagai PNG” di Stack Overflow setiap minggu. Pada akhir tutorial, Anda akan memiliki aplikasi konsol .NET yang siap dijalankan dan menghasilkan file PNG yang tajam dari string HTML apa pun yang Anda berikan. + +> **Pro tip:** Aspose.HTML bekerja pada .NET Framework, .NET Core, dan .NET 5/6/7, sehingga Anda dapat menambahkan ini ke hampir semua proyek C# yang sudah Anda miliki. + +--- + +## Apa yang Anda Butuhkan + +Sebelum kita mulai, pastikan Anda memiliki hal‑hal berikut: + +| Persyaratan | Mengapa penting | +|-------------|-----------------| +| **.NET 6 SDK** (atau lebih baru) | Menyediakan runtime untuk contoh aplikasi konsol. | +| **Aspose.HTML for .NET** paket NuGet | Perpustakaan yang melakukan pekerjaan berat dalam merender HTML. | +| **Editor kode** (Visual Studio, VS Code, Rider…) | Untuk menulis dan menjalankan kode C#. | +| **Pengetahuan dasar C#** | Anda akan memahami potongan kode tanpa perlu kursus kilat. | + +Jika Anda sudah memiliki proyek, cukup tambahkan paket NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +Itu saja—tanpa DLL tambahan, tanpa binary native, tanpa masalah lisensi untuk versi evaluasi. + +--- + +## Langkah 1: Buat Proyek Konsol .NET Baru + +Pertama, buat aplikasi konsol baru agar kita dapat fokus pada logika rendering secara terisolasi. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Buka file `Program.cs` yang dihasilkan; nanti kita akan mengganti isinya dengan contoh lengkap. Kanvas bersih ini menjamin proses **create png from html** tidak tercemar oleh kode yang tidak terkait. + +--- + +## Langkah 2: Tambahkan Kode Rendering Inti (Buat PNG dari HTML) + +Sekarang masuk ke inti tutorial. Kita akan menginstansiasi sebuah `HTMLDocument`, menyesuaikan beberapa opsi rendering, dan akhirnya meminta Aspose.HTML menulis file PNG ke disk. + +```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}"); + } +} +``` + +### Mengapa Pengaturan Ini Penting + +* **ImageRenderingOptions** – Mengontrol ukuran kanvas dan kualitas visual. Mengaktifkan `UseAntialiasing` membuat garis diagonal dan kurva lebih halus, yang penting ketika Anda kemudian **convert html to image** untuk tampilan DPI tinggi. +* **TextOptions** – `UseHinting` meningkatkan penempatan glyph, sementara `FontStyle` memungkinkan Anda mensimulasikan bold‑italic tanpa mengubah HTML sumber. Ini sangat berguna ketika markup asli tidak memiliki styling eksplisit. +* **ImageRenderer** – Dengan memberikan kedua objek opsi, Anda mendapatkan satu panggilan terpadu yang menghormati preferensi baik pada level gambar maupun teks. + +Jalankan program dengan `dotnet run`. Anda akan melihat `output.png` muncul di folder proyek, menampilkan paragraf “Hello, world!” yang dirender dengan baik. + +--- + +## Langkah 3: Memahami Pipeline Rendering (Cara Merender HTML sebagai PNG) + +Jika Anda penasaran tentang **how to render HTML as PNG** di balik layar, berikut rangkuman singkatnya: + +1. **HTML Parsing** – Aspose.HTML mengurai markup menjadi pohon DOM, seperti yang dilakukan browser. +2. **Layout Engine** – Menghitung model kotak, menyelesaikan CSS, dan menentukan penempatan tepat setiap elemen. +3. **Rasterization** – Layout dilukis ke bitmap menggunakan GDI+ (di Windows) atau Skia (lintas‑platform). Di sinilah `ImageRenderingOptions` dan `TextOptions` berperan. +4. **File Encoding** – Akhirnya bitmap dienkode sebagai PNG, mempertahankan transparansi dan pengaturan kompresi. + +Karena perpustakaan ini meniru mesin browser lengkap, Anda dapat mengandalkannya untuk CSS kompleks, SVG, atau bahkan konten yang dihasilkan JavaScript (asalkan Anda mengaktifkan mesin skrip). Itulah mengapa ini pilihan solid ketika Anda perlu **render html to png** untuk beban kerja produksi. + +--- + +## Langkah 4: Memperluas Contoh – Skenario Dunia Nyata + +### 4.1 Merender Halaman Web Lengkap + +Alih‑alih paragraf kecil, Anda mungkin ingin mengambil snapshot seluruh halaman: + +```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 Menangani Sumber Daya Eksternal (CSS, Gambar, Font) + +Aspose.HTML secara otomatis menyelesaikan URL relatif, tetapi Anda mungkin perlu mengatur **base URL** jika string HTML Anda berisi jalur relatif: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Untuk font khusus, sematkan mereka melalui `@font-face` dalam blok `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Jika halaman Anda merujuk ke CSS atau gambar eksternal, pastikan file‑file tersebut dapat diakses oleh `HTMLDocument` (misalnya dengan menggunakan `doc.Open` bersama base URL). **Custom resource handler** akan menangkapnya secara otomatis saat Anda menyimpan. + +--- + +## Step 3: Configure Save Options to Export HTML to ZIP + +Sekarang kita memberi tahu Aspose.HTML untuk menggunakan **custom resource handler** kita dan menghasilkan arsip ZIP alih‑alih folder terpisah. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Apa yang terjadi di balik layar?** +Ketika `doc.Save` dijalankan, Aspose.HTML menyalurkan setiap sumber daya (file HTML, CSS, gambar) ke dalam `MemoryStream` yang dikembalikan oleh `MyHandler`. Setelah semua stream terisi, library mengompresnya menjadi satu paket ZIP. + +--- + +## Step 4: Save the HTML ZIP File + +Akhirnya, simpan ZIP yang berada di memori ke disk (atau tujuan lain). Baris berikut menulis arsip ke folder yang Anda tentukan. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Output yang diharapkan:** +Setelah menjalankan program, Anda akan melihat `output.zip` di direktori proyek Anda. Buka file tersebut dan Anda akan menemukan: + +- `index.html` – markup yang kami definisikan. +- `style.css` – style inline yang diekstrak sebagai file terpisah (jika ada). +- Gambar atau font yang direferensikan (tidak ada dalam contoh kecil ini). + +--- + +## Understanding the Custom Resource Handler Internals + +| Situation | What the Handler Does | Why It Helps | +|-----------|----------------------|--------------| +| **Large images** | Returns a fresh `MemoryStream` for each image, avoiding file‑system I/O. | Keeps memory usage predictable; you can later swap the stream for a cloud upload stream. | +| **Failed resource load** | If a resource cannot be retrieved, Aspose.HTML throws an exception before calling `HandleResource`. | You can catch the exception at `doc.Save` and log the missing asset. | +| **Custom naming** | Override `Resource.Name` inside `HandleResource` to rename files before they enter the ZIP. | Useful when you need SEO‑friendly filenames or want to strip query strings. | + +Jika Anda perlu menyimpan sumber daya di Azure Blob Storage alih‑alih memori, cukup ganti baris `return new MemoryStream();` dengan kode yang mengembalikan stream yang didukung SDK cloud. + +--- + +## Common Pitfalls & How to Avoid Them + +1. **Forgot to set `SaveFormat.Zip`** – Aspose.HTML defaults to a folder output. Always set `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Output directory doesn’t exist** – `doc.Save` won’t create the parent folder. Use `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` beforehand. +3. **Handler returns a closed stream** – The stream must be writable and open; otherwise the ZIP will be corrupted. +4. **Large documents exhaust memory** – For massive sites, consider streaming directly to a file stream inside the handler instead of `MemoryStream`. + +--- + +## Extending the Solution: From Memory to Cloud + +Misalkan Anda ingin **save html zip** langsung ke bucket AWS S3. Ganti handler dengan sesuatu seperti: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Sekarang pemanggilan `doc.Save` yang sama akan mengirim setiap file langsung ke S3, dan ZIP final dapat dirakit kemudian menggunakan multipart upload dari AWS SDK. Ini menunjukkan **fleksibilitas** dari **custom resource handler**—Anda mengontrol mekanisme penyimpanan dari ujung ke ujung. + +--- + +## Full Working Example (Copy‑Paste Ready) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Jalankan program (`dotnet run`), dan Anda akan melihat konfirmasi ✅. Buka `output.zip` dengan pengelola arsip apa pun—Anda akan menemukan halaman HTML yang berfungsi penuh siap untuk penggunaan offline. + +--- + +## Visual Overview + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* + +Ilustrasi di atas menggambarkan alur data: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Conclusion + +Kami baru saja membahas semua yang Anda perlukan untuk **custom resource handler** menuju solusi **create html zip** di C#. Dengan mengimplementasikan subclass kecil dari `ResourceHandler`, mengonfigurasi `HtmlSaveOptions`, dan memanggil + +## What Should You Learn Next? + +Tutorial berikutnya membahas topik‑topik terkait yang memperluas teknik yang ditunjukkan dalam panduan ini. Setiap sumber daya menyertakan contoh kode lengkap dengan penjelasan langkah‑demi‑langkah untuk membantu Anda menguasai fitur API tambahan dan mengeksplorasi pendekatan implementasi alternatif dalam proyek Anda sendiri. + +- [Cara Menyimpan HTML di C# – Panduan Lengkap Menggunakan Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Membuat HTML dari String di C# – Panduan Custom Resource Handler](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [Cara Meng‑ZIP HTML di C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/net/generate-jpg-and-png-images/_index.md b/html/italian/net/generate-jpg-and-png-images/_index.md index f6e8b2d8a7..3ff16317fd 100644 --- a/html/italian/net/generate-jpg-and-png-images/_index.md +++ b/html/italian/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Impara a usare Aspose.HTML per .NET per manipolare documenti HTML, convertire HT Scopri come abilitare l'antialiasing durante la conversione di documenti DOCX in immagini PNG o JPG con Aspose.HTML per .NET. ### [Converti docx in PNG – crea archivio zip C# tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Impara a convertire documenti DOCX in PNG e a comprimerli in un archivio ZIP usando C# e Aspose.HTML. +### [Crea PNG da HTML con Aspose.HTML – Guida .NET](./create-png-from-html-with-aspose-html-net-guide/) +Impara a generare file PNG a partire da contenuti HTML usando Aspose.HTML per .NET in questa guida passo‑passo. ## Conclusione diff --git a/html/italian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/italian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..75e33c4e30 --- /dev/null +++ b/html/italian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,246 @@ +--- +category: general +date: 2026-07-21 +description: Crea PNG da HTML usando Aspose.HTML in .NET. Scopri come renderizzare + HTML in PNG, convertire HTML in immagine e padroneggiare come renderizzare HTML + come PNG con codice completo. +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: it +lastmod: 2026-07-21 +og_description: Crea PNG da HTML con Aspose.HTML. Questo tutorial ti mostra come rendere + HTML in PNG, convertire HTML in immagine e padroneggiare la conversione di HTML + in PNG in pochi minuti. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Crea PNG da HTML con Aspose.HTML – Guida .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: Crea PNG da HTML con Aspose.HTML – Guida .NET +url: /it/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 >}} + +# Crea PNG da HTML con Aspose.HTML – Guida .NET + +Ti sei mai chiesto come **create PNG from HTML** senza lottare con browser headless o armeggiare con strumenti da riga di comando? Non sei il solo. In molte applicazioni web‑centriche hai bisogno di un'istantanea rapida di una pagina — pensa a miniature di email, report PDF o anteprime per i social media. La buona notizia è che Aspose.HTML rende l'intero processo un vero gioco da ragazzi. + +In questo tutorial vedremo come renderizzare HTML in PNG, convertire HTML in immagine, e risponderemo anche alla persistente domanda “how to render HTML as PNG” che compare su Stack Overflow ogni settimana. Alla fine avrai un'app console .NET pronta all'uso che genera un file PNG nitido da qualsiasi stringa HTML le fornisci. + +> **Consiglio professionale:** Aspose.HTML funziona su .NET Framework, .NET Core e .NET 5/6/7, quindi puoi inserirlo in quasi qualsiasi progetto C# che possiedi già. + +--- + +## Cosa ti servirà + +Prima di immergerci, assicurati di avere a disposizione quanto segue: + +| Requisito | Perché è importante | +|-----------|----------------------| +| **.NET 6 SDK** (or newer) | Fornisce l'ambiente di esecuzione per l'app console di esempio. | +| **Aspose.HTML for .NET** NuGet package | La libreria che gestisce il rendering HTML. | +| **A code editor** (Visual Studio, VS Code, Rider…) | Per scrivere ed eseguire il codice C#. | +| **Basic C# knowledge** | Ti permetterà di comprendere gli snippet senza un corso intensivo. | + +If you already have a project, just add the NuGet package: + +```bash +dotnet add package Aspose.HTML +``` + +Tutto qui—nessun DLL extra, nessun binario nativo, nessun problema di licenza per la versione di valutazione. + +## Passo 1: Crea un nuovo progetto console .NET + +Per prima cosa, crea una nuova app console così da poterci concentrare sulla logica di rendering in isolamento. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Apri il file `Program.cs` generato; sostituiremo il suo contenuto con l'esempio completo più avanti. Questa base pulita garantisce che il processo **create png from html** non sia contaminato da codice non correlato. + +## Passo 2: Aggiungi il codice di rendering principale (Create PNG from HTML) + +Ora arriva il cuore del tutorial. Istanzieremo un `HTMLDocument`, modificheremo un paio di opzioni di rendering e infine chiederemo ad Aspose.HTML di scrivere un file PNG su disco. + +```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}"); + } +} +``` + +### Perché queste impostazioni sono importanti + +* **ImageRenderingOptions** – Controlla le dimensioni della tela e la qualità visiva. Attivare `UseAntialiasing` leviga le linee diagonali e le curve, cosa cruciale quando in seguito **convert html to image** per display ad alta DPI. +* **TextOptions** – `UseHinting` migliora il posizionamento dei glifi, mentre `FontStyle` consente di simulare grassetto‑corsivo senza modificare l'HTML di origine. È particolarmente utile quando il markup originale non ha stili espliciti. +* **ImageRenderer** – Passando entrambi gli oggetti di opzione ottieni una chiamata unica e unificata che rispetta sia le preferenze a livello di immagine sia quelle a livello di testo. + +Esegui il programma con `dotnet run`. Dovresti vedere `output.png` apparire nella cartella del progetto, mostrando un paragrafo “Hello, world!” ben renderizzato. + +## Passo 3: Comprendere la pipeline di rendering (How to Render HTML as PNG) + +Se sei curioso di sapere **how to render HTML as PNG** dietro le quinte, ecco una rapida panoramica: + +1. **HTML Parsing** – Aspose.HTML analizza il markup in un albero DOM, proprio come farebbe un browser. +2. **Layout Engine** – Calcola i modelli di box, risolve il CSS e determina il posizionamento esatto di ogni elemento. +3. **Rasterization** – Il layout viene dipinto su una bitmap usando GDI+ (su Windows) o Skia (cross‑platform). Qui entrano in gioco `ImageRenderingOptions` e `TextOptions`. +4. **File Encoding** – Infine la bitmap viene codificata come PNG, rispettando le impostazioni di trasparenza e compressione. + +Poiché la libreria replica un motore browser completo, puoi fare affidamento su di essa per CSS complessi, SVG o anche contenuti generati da JavaScript (a condizione di abilitare il motore di scripting). Per questo è una scelta solida quando devi **render html to png** per carichi di lavoro di produzione. + +## Passo 4: Estendere l'esempio – Scenari reali + +### 4.1 Renderizzare una pagina web completa + +Invece di un piccolo paragrafo, potresti voler catturare un'intera pagina: + +```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 Gestione delle risorse esterne (CSS, Immagini, Font) + +Aspose.HTML risolve automaticamente gli URL relativi, ma potresti dover impostare una **base URL** se la tua stringa HTML contiene percorsi relativi: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Per i font personalizzati, incorporali tramite `@font-face` in un blocco `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Consiglio:** Se la tua pagina fa riferimento a CSS o immagini esterne, assicurati che quei file siano accessibili al `HTMLDocument` (ad esempio usando `doc.Open` con un URL di base). Il **custom resource handler** li catturerà automaticamente al momento del salvataggio. + +--- + +## Passo 3: Configurare le Opzioni di Salvataggio per Esportare HTML in ZIP + +Ora diciamo ad Aspose.HTML di usare il nostro **custom resource handler** e di produrre un archivio ZIP invece di una cartella sparsa. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Cosa succede dietro le quinte?** +Quando `doc.Save` viene eseguito, Aspose.HTML invia ogni risorsa (file HTML, CSS, immagini) nello `MemoryStream` restituito da `MyHandler`. Una volta popolati tutti gli stream, la libreria li comprime in un unico pacchetto ZIP. + +--- + +## Passo 4: Salvare il File ZIP HTML + +Infine, persisti lo ZIP in memoria su disco (o su qualsiasi altra destinazione). La riga seguente scrive l’archivio nella cartella che specifichi. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Output previsto:** +Dopo aver eseguito il programma, vedrai `output.zip` nella directory del progetto. Aprendolo troverai: + +- `index.html` – il markup che abbiamo definito. +- `style.css` – lo stile inline estratto come file separato (se presente). +- Eventuali immagini o font referenziati (nessuno in questo piccolo esempio). + +--- + +## Comprendere il Funzionamento Interno del Custom Resource Handler + +| Situazione | Cosa Fa il Handler | Perché è Utile | +|------------|--------------------|----------------| +| **Immagini di grandi dimensioni** | Restituisce un nuovo `MemoryStream` per ogni immagine, evitando I/O su file system. | Mantiene l’utilizzo della memoria prevedibile; in seguito puoi sostituire lo stream con uno stream di upload cloud. | +| **Caricamento risorsa fallito** | Se una risorsa non può essere recuperata, Aspose.HTML lancia un’eccezione prima di chiamare `HandleResource`. | Puoi intercettare l’eccezione in `doc.Save` e registrare l’asset mancante. | +| **Naming personalizzato** | Sovrascrivi `Resource.Name` dentro `HandleResource` per rinominare i file prima che entrino nello ZIP. | Utile quando servono nomi SEO‑friendly o vuoi rimuovere query string. | + +Se desideri memorizzare le risorse su Azure Blob Storage invece che in memoria, sostituisci semplicemente la riga `return new MemoryStream();` con del codice che restituisce uno stream gestito dal SDK cloud. + +--- + +## Problemi Comuni & Come Evitarli + +1. **Dimenticato di impostare `SaveFormat.Zip`** – Aspose.HTML usa per default l’output in cartella. Imposta sempre `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **La directory di output non esiste** – `doc.Save` non crea la cartella padre. Usa `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` prima. +3. **Il handler restituisce uno stream chiuso** – Lo stream deve essere scrivibile e aperto; altrimenti lo ZIP sarà corrotto. +4. **Documenti molto grandi esauriscono la memoria** – Per siti ingombranti, considera lo streaming diretto verso un `FileStream` all’interno del handler invece di `MemoryStream`. + +--- + +## Estendere la Soluzione: Da Memoria a Cloud + +Supponiamo di voler **save html zip** direttamente in un bucket AWS S3. Sostituisci il gestore con qualcosa di simile: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Ora la stessa chiamata `doc.Save` invierà ogni file direttamente su S3, e lo ZIP finale potrà essere assemblato successivamente usando il multipart upload dell’AWS SDK. Questo dimostra la **flessibilità** di un **custom resource handler**—controlli il meccanismo di storage end‑to‑end. + +--- + +## Esempio Completo (Pronto per il Copia‑Incolla) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Esegui il programma (`dotnet run`) e vedrai la conferma ✅. Apri `output.zip` con qualsiasi gestore di archivi: troverai una pagina HTML completamente funzionante pronta per l’uso offline. + +--- + +## Panoramica Visiva + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Testo alternativo: Diagramma che mostra il flusso del custom resource handler per l’esportazione di HTML in un archivio ZIP* + +L’illustrazione sopra cattura il flusso dei dati: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Conclusione + +Abbiamo appena coperto tutto ciò che ti serve per **custom resource handler** la tua soluzione **create html zip** in C#. Implementando una piccola sottoclasse di `ResourceHandler`, configurando `HtmlSaveOptions` e chiamando + +## Cosa Dovresti Imparare Dopo? + + +I tutorial seguenti trattano argomenti strettamente correlati che si basano sulle tecniche dimostrate in questa guida. Ogni risorsa include esempi di codice completi con spiegazioni passo‑passo per aiutarti a padroneggiare ulteriori funzionalità dell’API ed esplorare approcci alternativi nei tuoi progetti. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/net/generate-jpg-and-png-images/_index.md b/html/japanese/net/generate-jpg-and-png-images/_index.md index 57de57175f..7c17dd66d0 100644 --- a/html/japanese/net/generate-jpg-and-png-images/_index.md +++ b/html/japanese/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,7 @@ Aspose.HTML for .NET を使用して HTML ドキュメントを操作したり DOCX 文書を PNG または JPG 画像に変換する際に、アンチエイリアシングを有効にして高品質な出力を得る手順を解説します。 ### [DOCX を PNG に変換 – ZIP アーカイブを作成する C# チュートリアル](./convert-docx-to-png-create-zip-archive-c-tutorial/) C# で DOCX を PNG に変換し、ZIP アーカイブを作成する方法を学びます。 +### [Aspose.HTML を使用して .NET で HTML から PNG を作成する – ガイド](./create-png-from-html-with-aspose-html-net-guide/) ## 結論 diff --git a/html/japanese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/japanese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..033f494937 --- /dev/null +++ b/html/japanese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,245 @@ +--- +category: general +date: 2026-07-21 +description: .NETでAspose.HTMLを使用してHTMLからPNGを作成します。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: ja +lastmod: 2026-07-21 +og_description: Aspose.HTML を使用して HTML から PNG を作成します。このチュートリアルでは、HTML を PNG にレンダリングする方法、HTML + を画像に変換する方法、そして数分で HTML を PNG としてレンダリングするコツをマスターできます。 +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Aspose.HTML を使用して HTML から PNG を作成する – .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: Aspose.HTML を使用して HTML から PNG を作成する – .NET ガイド +url: /ja/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 >}} + +# Aspose.HTML を使用して HTML から PNG を作成 – .NET ガイド + +ヘッドレスブラウザと格闘したり、コマンドラインツールをいじったりせずに **HTML から PNG を作成** できるか、考えたことはありませんか? あなただけではありません。多くの Web 中心のアプリではページのスナップショットがすぐに必要です—メールのサムネイル、PDF レポート、ソーシャルメディアのプレビューなどを想像してください。良いニュースは、Aspose.HTML を使えばこのプロセス全体が散歩のように簡単になる、ということです。 + +このチュートリアルでは、HTML を PNG にレンダリングする方法、HTML を画像に変換する方法、そして毎週 Stack Overflow に現れる「HTML を PNG としてレンダリングする方法」という疑問に答えるまでを順を追って解説します。最後まで進めば、任意の HTML 文字列を渡すだけで鮮明な PNG ファイルを出力する、すぐに実行できる .NET コンソールアプリが手に入ります。 + +> **Pro tip:** Aspose.HTML は .NET Framework、.NET Core、そして .NET 5/6/7 で動作するため、既存のほぼすべての C# プロジェクトに組み込むことができます。 + +--- + +## 必要なもの + +作業に入る前に、以下のものが揃っていることを確認してください。 + +| 要件 | なぜ重要か | +|------|------------| +| **.NET 6 SDK** (またはそれ以降) | サンプルコンソールアプリのランタイムを提供します。 | +| **Aspose.HTML for .NET** NuGet パッケージ | HTML レンダリングの重い処理を行うライブラリです。 | +| **コードエディタ** (Visual Studio、VS Code、Rider など) | C# コードを書いて実行するためです。 | +| **基本的な C# 知識** | スニペットを予備講座なしで理解できます。 | + +既にプロジェクトがある場合は、NuGet パッケージを追加するだけです。 + +```bash +dotnet add package Aspose.HTML +``` + +これだけです—余計な DLL やネイティブバイナリは不要、評価版のライセンスに関する頭痛もありません。 + +## 手順 1: 新しい .NET コンソールプロジェクトを作成 + +まず、レンダリングロジックに集中できるように、クリーンなコンソールアプリを作成します。 + +```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** して高 DPI ディスプレイ向けにする際に重要です。 +* **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 Parsing** – Aspose.HTML はマークアップを DOM ツリーに解析します。まさにブラウザと同様です。 +2. **Layout Engine** – ボックスモデルを計算し、CSS を解決し、各要素の正確な配置を決定します。 +3. **Rasterization** – レイアウトは Windows の GDI+ またはクロスプラットフォームの Skia を使用してビットマップに描画されます。ここで `ImageRenderingOptions` と `TextOptions` が効果を発揮します。 +4. **File Encoding** – 最後にビットマップが PNG としてエンコードされ、透過性や圧縮設定が保持されます。 + +このライブラリはフルブラウザエンジンを模倣しているため、複雑な CSS、SVG、あるいは JavaScript で生成されたコンテンツ(スクリプトエンジンを有効にすれば)にも信頼して利用できます。したがって、**render html to png** が本番ワークロードで必要な場合に堅実な選択肢となります。 + +## 手順 4: サンプルの拡張 – 実務シナリオ + +### 4.1 完全な Web ページをレンダリング + +小さな段落ではなく、ページ全体をスナップショットしたい場合: + +```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 を自動的に解決しますが、HTML 文字列に相対パスが含まれる場合は **base URL** を設定する必要があります: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +カスタムフォントを使用する場合は、`@font-face` を `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **プロのコツ:** ページが外部 CSS や画像を参照している場合は、`HTMLDocument` がそれらにアクセスできるように(例: `doc.Open` にベース URL を指定)してください。**カスタムリソースハンドラ** が保存時に自動的に取得します。 + +--- + +## 手順 3: HTML を ZIP にエクスポートするための保存オプション設定 + +ここで Aspose.HTML に **カスタムリソースハンドラ** を使用させ、フォルダーではなく ZIP アーカイブを出力させます。 + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**内部で何が起きているか:** +`doc.Save` が実行されると、Aspose.HTML は各リソース(HTML ファイル、CSS、画像)を `MyHandler` が返す `MemoryStream` に流し込みます。すべてのストリームが埋められた後、ライブラリはそれらを単一の ZIP パッケージに圧縮します。 + +--- + +## 手順 4: HTML ZIP ファイルの保存 + +最後に、メモリ上の ZIP をディスク(または任意の宛先)に永続化します。以下の行が指定したフォルダーにアーカイブを書き込みます。 + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**期待される出力:** +プログラム実行後、プロジェクトディレクトリに `output.zip` が作成されます。解凍すると次のようになります。 + +- `index.html` – 定義したマークアップ。 +- `style.css` – 別ファイルとして抽出されたインラインスタイル(存在する場合)。 +- 参照された画像やフォント(この小さな例ではなし)。 + +--- + +## カスタムリソースハンドラ内部の仕組み + +| 状況 | ハンドラの動作 | 役割 | +|-----------|----------------------|--------------| +| **大容量画像** | 各画像に対して新しい `MemoryStream` を返し、ファイルシステム I/O を回避。 | メモリ使用量を予測可能に保ち、後でクラウドアップロードストリームに差し替え可能。 | +| **リソース取得失敗** | リソース取得に失敗すると、`HandleResource` が呼ばれる前に Aspose.HTML が例外をスロー。 | `doc.Save` で例外を捕捉し、欠損アセットをログに記録できる。 | +| **カスタム命名** | `HandleResource` 内で `Resource.Name` を上書きし、ZIP に入る前にファイル名を変更。 | SEO フレンドリーなファイル名が必要なときやクエリ文字列を除去したいときに便利。 | + +Azure Blob Storage にメモリではなくクラウドに保存したい場合は、`return new MemoryStream();` 行をクラウド SDK が提供するストリームに置き換えるだけです。 + +--- + +## よくある落とし穴と回避策 + +1. **`SaveFormat.Zip` を設定し忘れた** – Aspose.HTML のデフォルトはフォルダー出力です。必ず `saveOptions.SaveFormat = SaveFormat.Zip;` を設定してください。 +2. **出力ディレクトリが存在しない** – `doc.Save` は親フォルダーを自動作成しません。事前に `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` を呼び出しましょう。 +3. **ハンドラが閉じたストリームを返す** – ストリームは書き込み可能で開いた状態である必要があります。閉じていると ZIP が破損します。 +4. **大規模ドキュメントでメモリ枯渇** – 巨大サイトの場合、ハンドラ内で `MemoryStream` の代わりにファイルストリームへ直接書き込むことを検討してください。 + +--- + +## ソリューションの拡張: メモリからクラウドへ + +例えば **save html zip** を直接 AWS S3 バケットに保存したい場合、ハンドラを次のように置き換えます。 + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +これで同じ `doc.Save` 呼び出しが各ファイルを即座に S3 にプッシュし、最終的な ZIP は AWS SDK のマルチパートアップロードで後から組み立てられます。これが **カスタムリソースハンドラ** の **柔軟性** であり、ストレージメカニズムをエンドツーエンドで制御できることを示しています。 + +--- + +## 完全動作サンプル(コピペ可能) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +プログラムを実行(`dotnet run`)すると ✅ の確認メッセージが表示されます。任意のアーカイブマネージャで `output.zip` を開くと、オフラインで使用できる完全な HTML ページが確認できます。 + +--- + +## ビジュアル概要 + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: HTML を ZIP アーカイブにエクスポートするカスタムリソースハンドラのフロー図* + +上図はデータフローを示しています: **HTMLDocument → カスタムリソースハンドラ → メモリストリーム → ZIP パッケージ**。 + +--- + +## 結論 + +ここまでで、C# で **custom resource handler** を使って **create html zip** ソリューションを構築するために必要なすべてを網羅しました。`ResourceHandler` の小さなサブクラスを実装し、`HtmlSaveOptions` を設定し、`doc.Save` を呼び出すだけで、保存先をメモリ、ローカル、クラウドと自由に切り替えられるようになります。 + +## 次に学ぶべきこと + +以下のチュートリアルは、本ガイドで示したテクニックを応用した関連トピックを扱っています。各リソースには完全なコード例とステップバイステップの解説が含まれており、API の追加機能をマスターしたり、独自の実装アプローチを探求したりするのに役立ちます。 + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/net/generate-jpg-and-png-images/_index.md b/html/korean/net/generate-jpg-and-png-images/_index.md index 2f2fd11d08..ae520f1c03 100644 --- a/html/korean/net/generate-jpg-and-png-images/_index.md +++ b/html/korean/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aspose.HTML for .NET을 .NET 프로젝트에 통합하는 것은 번거롭지 DOCX 문서를 PNG 또는 JPG 이미지로 변환할 때 안티앨리어싱을 적용하는 방법을 단계별로 안내합니다. ### [DOCX를 PNG로 변환하고 ZIP 아카이브 만들기 C# 튜토리얼](./convert-docx-to-png-create-zip-archive-c-tutorial/) C#을 사용해 DOCX 파일을 PNG 이미지로 변환하고, 결과를 ZIP 파일로 압축하는 방법을 단계별로 안내합니다. +### [Aspose.HTML을 사용하여 HTML에서 PNG 생성 – .NET 가이드](./create-png-from-html-with-aspose-html-net-guide/) +Aspose.HTML for .NET을 사용해 HTML을 PNG 이미지로 변환하는 방법을 단계별로 안내합니다. ## 결론 diff --git a/html/korean/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/korean/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..eb0534c19b --- /dev/null +++ b/html/korean/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,258 @@ +--- +category: general +date: 2026-07-21 +description: .NET에서 Aspose.HTML을 사용하여 HTML을 PNG로 만들기. 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: ko +lastmod: 2026-07-21 +og_description: Aspose.HTML를 사용하여 HTML에서 PNG 만들기. 이 튜토리얼에서는 HTML을 PNG로 렌더링하는 방법, HTML을 + 이미지로 변환하는 방법, 그리고 몇 분 안에 HTML을 PNG로 렌더링하는 방법을 마스터하는 방법을 보여줍니다. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Aspose.HTML로 HTML에서 PNG 만들기 – .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: Aspose.HTML를 사용하여 HTML에서 PNG 만들기 – .NET 가이드 +url: /ko/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 >}} + +# Aspose.HTML을 사용하여 HTML에서 PNG 만들기 – .NET 가이드 + +헤드리스 브라우저와 씨름하거나 명령줄 도구를 다루지 않고 **HTML에서 PNG 만들기**가 궁금하셨나요? 당신만 그런 것이 아닙니다. 많은 웹 중심 애플리케이션에서 페이지의 빠른 스냅샷이 필요합니다—예를 들어 이메일 썸네일, PDF 보고서, 소셜 미디어 미리보기 등. 좋은 소식은 Aspose.HTML을 사용하면 전체 과정이 마치 산책처럼 쉬워진다는 것입니다. + +이 튜토리얼에서는 HTML을 PNG로 렌더링하고, HTML을 이미지로 변환하며, 매주 Stack Overflow에 올라오는 “HTML을 PNG로 렌더링하는 방법” 질문까지 답변해 드립니다. 끝까지 따라오시면 어떤 HTML 문자열이든 입력하면 선명한 PNG 파일을 출력하는 .NET 콘솔 앱을 바로 실행할 수 있게 됩니다. + +> **Pro tip:** Aspose.HTML은 .NET Framework, .NET Core, .NET 5/6/7에서 모두 동작하므로 기존 C# 프로젝트에 거의 바로 넣어 사용할 수 있습니다. + +--- + +## 준비 사항 + +시작하기 전에 아래 항목들을 준비해 주세요: + +| Requirement | Why it matters | +|-------------|----------------| +| **.NET 6 SDK** (또는 최신 버전) | 샘플 콘솔 앱을 실행하기 위한 런타임을 제공합니다. | +| **Aspose.HTML for .NET** NuGet 패키지 | HTML 렌더링이라는 무거운 작업을 수행하는 라이브러리입니다. | +| **코드 편집기** (Visual Studio, VS Code, Rider 등) | C# 코드를 작성하고 실행하기 위해 필요합니다. | +| **기본 C# 지식** | 별도 강의 없이도 코드 스니펫을 이해할 수 있습니다. | + +이미 프로젝트가 있다면 NuGet 패키지만 추가하면 됩니다: + +```bash +dotnet add package Aspose.HTML +``` + +그게 전부입니다—추가 DLL, 네이티브 바이너리, 평가 버전 라이선스 문제 없이 바로 사용할 수 있습니다. + +--- + +## Step 1: 새 .NET 콘솔 프로젝트 만들기 + +먼저, 렌더링 로직에만 집중할 수 있도록 깨끗한 콘솔 앱을 하나 생성합니다. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +생성된 `Program.cs` 파일을 열고, 나중에 전체 예제로 교체할 내용을 준비합니다. 이렇게 하면 **create png from html** 과정이 다른 코드에 방해받지 않습니다. + +--- + +## Step 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`을 켜면 대각선 및 곡선이 부드러워져 고 DPI 디스플레이용 **convert html to image** 시 중요한 역할을 합니다. +* **TextOptions** – `UseHinting`은 글리프 배치를 개선하고, `FontStyle`은 원본 HTML을 수정하지 않고도 굵은‑이탤릭 효과를 시뮬레이션합니다. 원본 마크업에 스타일이 없을 때 특히 유용합니다. +* **ImageRenderer** – 두 옵션 객체를 함께 전달하면 이미지 수준과 텍스트 수준 설정을 모두 반영하는 단일 호출을 할 수 있습니다. + +`dotnet run`으로 프로그램을 실행해 보세요. 프로젝트 폴더에 `output.png`가 생성되고, “Hello, world!” 문단이 깔끔하게 렌더링된 것을 확인할 수 있습니다. + +--- + +## Step 3: 렌더링 파이프라인 이해하기 (How to Render HTML as PNG) + +**how to render HTML as PNG**가 내부적으로 어떻게 동작하는지 궁금하시다면, 다음과 같이 요약할 수 있습니다: + +1. **HTML 파싱** – Aspose.HTML은 브라우저와 마찬가지로 마크업을 DOM 트리로 파싱합니다. +2. **레이아웃 엔진** – 박스 모델을 계산하고 CSS를 적용해 각 요소의 정확한 위치를 결정합니다. +3. **래스터화** – 레이아웃을 비트맵에 그리는데, Windows에서는 GDI+, 크로스‑플랫폼에서는 Skia를 사용합니다. 이 단계에서 `ImageRenderingOptions`와 `TextOptions`가 적용됩니다. +4. **파일 인코딩** – 최종 비트맵을 PNG 형식으로 인코딩하면서 투명도와 압축 설정을 반영합니다. + +라이브러리가 전체 브라우저 엔진을 모방하기 때문에 복잡한 CSS, SVG, 혹은 스크립트 엔진을 활성화했을 때 생성되는 JavaScript‑generated 콘텐츠도 신뢰하고 처리할 수 있습니다. 그래서 **render html to png**가 필요한 프로덕션 워크로드에 적합합니다. + +--- + +## Step 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을 자동으로 해석하지만, HTML 문자열에 상대 경로가 포함된 경우 **base URL**을 지정해야 할 수도 있습니다: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +커스텀 폰트가 필요하다면 `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** 페이지가 외부 CSS나 이미지를 참조한다면 `HTMLDocument`가 해당 파일에 접근할 수 있도록(예: `doc.Open`에 기본 URL 지정) 해야 합니다. **custom resource handler**가 저장 시 자동으로 이를 캡처합니다. + +--- + +## Step 3: Configure Save Options to Export HTML to ZIP + +이제 Aspose.HTML에 **custom resource handler**를 사용하도록 지정하고, 폴더가 아닌 ZIP 아카이브를 출력하도록 설정합니다. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**무슨 일이 일어나나요?** +`doc.Save`가 실행되면 Aspose.HTML은 각 리소스(HTML 파일, CSS, 이미지)를 `MyHandler`가 반환한 `MemoryStream`으로 스트리밍합니다. 모든 스트림이 채워지면 라이브러리가 이를 하나의 ZIP 패키지로 압축합니다. + +--- + +## Step 4: Save the HTML ZIP File + +마지막으로 메모리 상의 ZIP을 디스크(또는 다른 목적지)에 저장합니다. 아래 코드는 지정한 폴더에 아카이브를 기록합니다. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**예상 출력:** +프로그램을 실행하면 프로젝트 디렉터리에 `output.zip`이 생성됩니다. 압축을 열어 보면 다음과 같은 파일이 들어 있습니다: + +- `index.html` – 정의한 마크업. +- `style.css` – 별도 파일로 추출된 인라인 스타일(있는 경우). +- 참조된 이미지나 폰트(이 작은 예제에서는 없음). + +--- + +## Understanding the Custom Resource Handler Internals + +| 상황 | 핸들러가 수행하는 작업 | 도움이 되는 이유 | +|-----------|----------------------|--------------| +| **대용량 이미지** | 각 이미지마다 새로운 `MemoryStream`을 반환해 파일 시스템 I/O를 회피 | 메모리 사용량을 예측 가능하게 유지; 이후 스트림을 클라우드 업로드 스트림으로 교체 가능 | +| **리소스 로드 실패** | 리소스를 가져올 수 없으면 `HandleResource` 호출 전에 Aspose.HTML이 예외를 발생 | `doc.Save`에서 예외를 잡아 누락된 자산을 로그에 기록할 수 있음 | +| **커스텀 파일명** | `HandleResource` 내부에서 `Resource.Name`을 재정의해 ZIP에 들어가기 전 파일명을 변경 | SEO 친화적인 파일명 필요 시 또는 쿼리 문자열을 제거하고 싶을 때 유용 | + +Azure Blob Storage에 메모리 대신 저장하고 싶다면 `return new MemoryStream();` 라인을 클라우드 SDK 기반 스트림을 반환하도록 교체하면 됩니다. + +--- + +## Common Pitfalls & How to Avoid Them + +1. **`SaveFormat.Zip` 설정을 잊음** – Aspose.HTML은 기본적으로 폴더 출력을 사용합니다. 항상 `saveOptions.SaveFormat = SaveFormat.Zip;`을 설정하세요. +2. **출력 디렉터리가 존재하지 않음** – `doc.Save`는 상위 폴더를 자동 생성하지 않습니다. 미리 `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`를 호출하세요. +3. **핸들러가 닫힌 스트림을 반환** – 스트림은 쓰기 가능하고 열려 있어야 합니다; 그렇지 않으면 ZIP이 손상됩니다. +4. **대형 문서가 메모리를 초과** – 규모가 큰 사이트의 경우 핸들러에서 `MemoryStream` 대신 파일 스트림으로 직접 스트리밍하는 방식을 고려하세요. + +--- + +## Extending the Solution: From Memory to Cloud + +예를 들어 **save html zip**을 바로 AWS S3 버킷에 저장하고 싶다면 핸들러를 다음과 같이 교체합니다: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +이제 동일한 `doc.Save` 호출이 각 파일을 바로 S3에 전송하고, 최종 ZIP은 AWS SDK의 multipart upload를 이용해 나중에 조립할 수 있습니다. 이는 **custom resource handler**의 **유연성**을 보여주는 예시이며, 저장 메커니즘을 처음부터 끝까지 직접 제어할 수 있습니다. + +--- + +## Full Working Example (Copy‑Paste Ready) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +프로그램을 실행(`dotnet run`)하면 ✅ 확인 메시지가 표시됩니다. `output.zip`을 아무 아카이브 관리 프로그램으로 열면 오프라인 사용이 가능한 완전한 HTML 페이지를 확인할 수 있습니다. + +--- + +## Visual Overview + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: HTML을 ZIP 아카이브로 내보내는 커스텀 리소스 핸들러 흐름을 보여주는 다이어그램* + +위 그림은 데이터 흐름을 요약합니다: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP 패키징**. + +--- + +## Conclusion + +우리는 C#에서 **custom resource handler**를 활용해 **create html zip** 솔루션을 구현하는 전체 과정을 살펴보았습니다. `ResourceHandler`의 작은 서브클래스를 구현하고, `HtmlSaveOptions`를 설정한 뒤 `doc.Save`를 호출하기만 하면 됩니다. + +## What Should You Learn Next? + +다음 튜토리얼들은 이 가이드에서 다룬 기술을 기반으로 하여 관련 주제를 심도 있게 다룹니다. 각 자료에는 완전한 코드 예제와 단계별 설명이 포함되어 있어 추가 API 기능을 마스터하고 프로젝트에 다양한 구현 방식을 적용하는 데 도움이 됩니다. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/net/generate-jpg-and-png-images/_index.md b/html/polish/net/generate-jpg-and-png-images/_index.md index fff5f7a92b..67e99eb179 100644 --- a/html/polish/net/generate-jpg-and-png-images/_index.md +++ b/html/polish/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Naucz się używać Aspose.HTML dla .NET do manipulowania dokumentami HTML, konw Dowiedz się, jak włączyć antyaliasing przy konwersji dokumentów DOCX do formatów PNG i JPG przy użyciu Aspose.HTML. ### [Konwertuj docx do png – utwórz archiwum zip w C# – samouczek](./convert-docx-to-png-create-zip-archive-c-tutorial/) Dowiedz się, jak konwertować pliki DOCX na obrazy PNG i spakować je do archiwum ZIP przy użyciu C# i Aspose.HTML. +### [Utwórz PNG z HTML przy użyciu Aspose.HTML – przewodnik .NET](./create-png-from-html-with-aspose-html-net-guide/) +Dowiedz się, jak konwertować HTML na obrazy PNG w .NET przy użyciu Aspose.HTML w kilku prostych krokach. ## Wniosek diff --git a/html/polish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/polish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..8932d4d413 --- /dev/null +++ b/html/polish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,264 @@ +--- +category: general +date: 2026-07-21 +description: Utwórz PNG z HTML przy użyciu Aspose.HTML w .NET. Dowiedz się, jak renderować + HTML do PNG, konwertować HTML na obraz oraz opanuj renderowanie HTML jako PNG z + pełnym kodem. +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: pl +lastmod: 2026-07-21 +og_description: Utwórz PNG z HTML za pomocą Aspose.HTML. Ten tutorial pokazuje, jak + renderować HTML do PNG, konwertować HTML na obraz oraz opanować renderowanie HTML + jako PNG w kilka minut. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Utwórz PNG z HTML przy użyciu Aspose.HTML – przewodnik .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: Utwórz PNG z HTML przy użyciu Aspose.HTML – przewodnik .NET +url: /pl/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 >}} + +# Utwórz PNG z HTML przy użyciu Aspose.HTML – Przewodnik .NET + +Zastanawiałeś się kiedyś, jak **utworzyć PNG z HTML** bez walki z przeglądarkami headless czy kombinowania z narzędziami wiersza poleceń? Nie jesteś jedyny. W wielu aplikacjach web‑centric potrzebny jest szybki zrzut strony — pomyśl o miniaturkach e‑maili, raportach PDF czy podglądach w mediach społecznościowych. Dobra wiadomość jest taka, że Aspose.HTML sprawia, że cały proces jest jak spacer po parku. + +W tym samouczku przeprowadzimy Cię przez renderowanie HTML do PNG, konwersję HTML do obrazu, a także odpowiemy na nurtujące pytanie „jak renderować HTML jako PNG”, które pojawia się na Stack Overflow co tydzień. Po zakończeniu będziesz mieć gotową do uruchomienia aplikację konsolową .NET, która wygeneruje wyraźny plik PNG z dowolnego ciągu HTML, który jej przekażesz. + +> **Wskazówka:** Aspose.HTML działa na .NET Framework, .NET Core oraz .NET 5/6/7, więc możesz wstawić to prawie do każdego projektu C#, który już posiadasz. + +--- + +## Czego będziesz potrzebować + +Zanim zaczniemy, upewnij się, że masz pod ręką następujące elementy: + +| Wymaganie | Dlaczego jest ważne | +|-------------|----------------| +| **.NET 6 SDK (lub nowszy)** | Zapewnia środowisko uruchomieniowe dla przykładowej aplikacji konsolowej. | +| **Aspose.HTML for .NET** NuGet package | Biblioteka, która wykonuje ciężką pracę renderowania HTML. | +| **Edytor kodu** (Visual Studio, VS Code, Rider…) | Do pisania i uruchamiania kodu C#. | +| **Podstawowa znajomość C#** | Zrozumiesz fragmenty kodu bez konieczności szybkiego kursu. | + +Jeśli już masz projekt, po prostu dodaj pakiet NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +To wszystko — bez dodatkowych DLL‑ów, natywnych binarek i problemów z licencjonowaniem wersji ewaluacyjnej. + +--- + +## Krok 1: Utwórz nowy projekt konsolowy .NET + +Najpierw uruchom nową aplikację konsolową, abyśmy mogli skupić się wyłącznie na logice renderowania. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Otwórz wygenerowany plik `Program.cs`; później zastąpimy jego zawartość pełnym przykładem. Ten czysty start zapewnia, że proces **create png from html** nie zostanie zanieczyszczony niepowiązanym kodem. + +--- + +## Krok 2: Dodaj podstawowy kod renderujący (Utwórz PNG z HTML) + +Teraz przychodzi serce samouczka. Utworzymy `HTMLDocument`, dostosujemy kilka opcji renderowania i w końcu poprosimy Aspose.HTML o zapisanie pliku PNG na dysku. + +```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}"); + } +} +``` + +### Dlaczego te ustawienia są ważne + +* **ImageRenderingOptions** – Kontroluje rozmiar płótna i jakość wizualną. Włączenie `UseAntialiasing` wygładza linie ukośne i krzywe, co jest kluczowe, gdy później **convert html to image** dla wyświetlaczy wysokiej rozdzielczości. +* **TextOptions** – `UseHinting` poprawia pozycjonowanie glifów, a `FontStyle` pozwala symulować pogrubienie‑pochylenie bez modyfikacji źródłowego HTML. Jest to szczególnie przydatne, gdy oryginalny znacznik nie zawiera wyraźnego stylu. +* **ImageRenderer** – Przekazując oba obiekty opcji, otrzymujesz pojedyncze, jednolite wywołanie, które respektuje zarówno preferencje na poziomie obrazu, jak i tekstu. + +Uruchom program poleceniem `dotnet run`. Powinieneś zobaczyć plik `output.png` pojawiający się w folderze projektu, przedstawiający ładnie wyrenderowany akapit „Hello, world!”. + +--- + +## Krok 3: Zrozumienie potoku renderowania (Jak renderować HTML jako PNG) + +Jeśli jesteś ciekawy, **jak renderować HTML jako PNG** „pod maską”, oto szybkie podsumowanie: + +1. **HTML Parsing** – Aspose.HTML analizuje znacznik do drzewa DOM, tak jak przeglądarka. +2. **Layout Engine** – Oblicza modele pudełek, rozwiązuje CSS i określa dokładne położenie każdego elementu. +3. **Rasterization** – Układ jest malowany na bitmapę przy użyciu GDI+ (na Windows) lub Skia (cross‑platform). To tutaj wchodzą w grę `ImageRenderingOptions` i `TextOptions`. +4. **File Encoding** – Na koniec bitmapa jest kodowana jako PNG, zachowując przezroczystość i ustawienia kompresji. + +Ponieważ biblioteka odzwierciedla pełny silnik przeglądarki, możesz na niej polegać przy skomplikowanym CSS, SVG czy nawet treściach generowanych przez JavaScript (oczywiście po włączeniu silnika skryptowego). Dlatego jest to solidny wybór, gdy potrzebujesz **render html to png** w środowiskach produkcyjnych. + +--- + +## Krok 4: Rozszerzenie przykładu – scenariusze rzeczywiste + +### 4.1 Renderowanie pełnej strony internetowej + +Zamiast małego akapitu, możesz chcieć zrobić zrzut całej strony: + +```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 Obsługa zasobów zewnętrznych (CSS, obrazy, czcionki) + +Aspose.HTML automatycznie rozwiązuje względne URL‑e, ale możesz potrzebować ustawić **base URL**, jeśli Twój ciąg HTML zawiera ścieżki względne: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Aby używać własnych czcionek, osadź je za pomocą `@font-face` w bloku `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Jeśli Twoja strona odwołuje się do zewnętrznych plików CSS lub obrazków, upewnij się, że są one dostępne dla `HTMLDocument` (np. używając `doc.Open` z bazowym URL). **Niestandardowy handler zasobów** automatycznie je przechwyci podczas zapisu. + +--- + +## Krok 3: Konfiguracja opcji zapisu, aby wyeksportować HTML do ZIP + +Teraz informujemy Aspose.HTML, aby używał naszego **niestandardowego handlera zasobów** i generował archiwum ZIP zamiast luźnego folderu. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Co się dzieje w tle?** +Gdy wywołujesz `doc.Save`, Aspose.HTML przesyła każdy zasób (plik HTML, CSS, obrazy) do `MemoryStream` zwróconego przez `MyHandler`. Po wypełnieniu wszystkich strumieni biblioteka kompresuje je do jednego pakietu ZIP. + +--- + +## Krok 4: Zapis pliku ZIP z HTML + +Na koniec zapisujemy w pamięci ZIP na dysk (lub dowolne inne miejsce). Poniższa linia zapisuje archiwum w wybranym folderze. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Oczekiwany wynik:** +Po uruchomieniu programu zobaczysz `output.zip` w katalogu projektu. Otwórz go, a znajdziesz: + +- `index.html` – znacznik, który zdefiniowaliśmy. +- `style.css` – styl wstawiony inline, wyodrębniony jako osobny plik (jeśli istnieje). +- Wszystkie odwołane obrazy lub czcionki (w tym małym przykładzie ich nie ma). + +--- + +## Zrozumienie wewnętrznych mechanizmów niestandardowego handlera zasobów + +| Sytuacja | Co robi handler | Dlaczego pomaga | +|-----------|----------------------|--------------| +| **Duże obrazy** | Zwraca nowy `MemoryStream` dla każdego obrazu, unikając operacji I/O na dysku. | Utrzymuje przewidywalne zużycie pamięci; później możesz zamienić strumień na strumień uploadu do chmury. | +| **Niepowodzenie wczytania zasobu** | Jeśli zasób nie może zostać pobrany, Aspose.HTML rzuca wyjątek przed wywołaniem `HandleResource`. | Możesz przechwycić wyjątek przy `doc.Save` i zalogować brakujący zasób. | +| **Niestandardowe nazewnictwo** | Nadpisz `Resource.Name` w `HandleResource`, aby zmienić nazwy plików przed ich umieszczeniem w ZIP. | Przydatne, gdy potrzebujesz przyjaznych SEO nazw plików lub chcesz usunąć ciągi zapytań. | + +Jeśli chcesz przechowywać zasoby w Azure Blob Storage zamiast w pamięci, po prostu zamień linię `return new MemoryStream();` na kod zwracający strumień obsługiwany przez SDK chmury. + +--- + +## Typowe pułapki i jak ich unikać + +1. **Zapomniano ustawić `SaveFormat.Zip`** – Domyślnie Aspose.HTML zapisuje do folderu. Zawsze ustaw `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Katalog docelowy nie istnieje** – `doc.Save` nie tworzy katalogu nadrzędnego. Użyj wcześniej `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`. +3. **Handler zwraca zamknięty strumień** – Strumień musi być otwarty i zapisywalny; w przeciwnym razie ZIP będzie uszkodzony. +4. **Duże dokumenty wyczerpują pamięć** – Dla bardzo rozbudowanych stron rozważ strumieniowanie bezpośrednio do `FileStream` w handlerze zamiast `MemoryStream`. + +--- + +## Rozszerzanie rozwiązania: z pamięci do chmury + +Załóżmy, że chcesz **zapisować HTML ZIP** bezpośrednio do bucketu AWS S3. Zamień handler na coś w stylu: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Teraz to samo wywołanie `doc.Save` będzie przesyłać każdy plik prosto do S3, a ostateczny ZIP może zostać złożony później przy użyciu multipart upload z AWS SDK. To pokazuje **elastyczność** **niestandardowego handlera zasobów** — kontrolujesz mechanizm przechowywania od początku do końca. + +--- + +## Pełny działający przykład (gotowy do kopiowania) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Uruchom program (`dotnet run`), a zobaczysz ✅ potwierdzenie. Otwórz `output.zip` w dowolnym menedżerze archiwów — znajdziesz w pełni funkcjonalną stronę HTML gotową do użycia offline. + +--- + +## Przegląd wizualny + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* + +Ilustracja powyżej przedstawia przepływ danych: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Zakończenie + +Omówiliśmy wszystko, co potrzebne, aby **niestandardowy handler zasobów** umożliwił Ci **tworzenie ZIP z HTML** w C#. Implementując małą podklasę `ResourceHandler`, konfigurując `HtmlSaveOptions` i wywołując `doc.Save`, zyskujesz pełną kontrolę nad procesem. + +## Co powinieneś nauczyć się dalej? + +Poniższe samouczki dotyczą ściśle powiązanych tematów, które rozwijają techniki przedstawione w tym przewodniku. Każdy zasób zawiera kompletne przykłady kodu oraz szczegółowe wyjaśnienia, aby pomóc Ci opanować dodatkowe funkcje API i odkrywać alternatywne podejścia w własnych projektach. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/net/generate-jpg-and-png-images/_index.md b/html/portuguese/net/generate-jpg-and-png-images/_index.md index 25a4d8da7a..1bed2396ad 100644 --- a/html/portuguese/net/generate-jpg-and-png-images/_index.md +++ b/html/portuguese/net/generate-jpg-and-png-images/_index.md @@ -41,6 +41,8 @@ Integrar o Aspose.HTML para .NET em seus projetos .NET é descomplicado. A bibli Aprenda a criar páginas web dinâmicas usando Aspose.HTML para .NET. Este tutorial passo a passo abrange pré-requisitos, namespaces e renderização de HTML para imagens. ### [Gerar imagens PNG por ImageDevice em .NET com Aspose.HTML](./generate-png-images-by-imagedevice/) Aprenda a usar Aspose.HTML para .NET para manipular documentos HTML, converter HTML em imagens e muito mais. Tutorial passo a passo com FAQs. +### [Criar PNG a partir de HTML com Aspose.HTML – Guia .NET](./create-png-from-html-with-aspose-html-net-guide/) +Aprenda a gerar arquivos PNG a partir de HTML usando Aspose.HTML para .NET em um tutorial passo a passo. ### [Como habilitar antialiasing ao converter DOCX para PNG/JPG](./how-to-enable-antialiasing-when-converting-docx-to-png-jpg/) Aprenda a ativar antialiasing ao converter documentos DOCX em imagens PNG ou JPG usando Aspose.HTML para .NET. ### [Converter docx para png – criar arquivo zip em C# tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) diff --git a/html/portuguese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/portuguese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..5ded0b3194 --- /dev/null +++ b/html/portuguese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,264 @@ +--- +category: general +date: 2026-07-21 +description: Crie PNG a partir de HTML usando Aspose.HTML em .NET. Aprenda como renderizar + HTML para PNG, converter HTML em imagem e domine como renderizar HTML como PNG com + código completo. +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: pt +lastmod: 2026-07-21 +og_description: Crie PNG a partir de HTML com Aspose.HTML. Este tutorial mostra como + renderizar HTML para PNG, converter HTML em imagem e dominar a renderização de HTML + como PNG em poucos minutos. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Criar PNG a partir de HTML com Aspose.HTML – Guia .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: Criar PNG a partir de HTML com Aspose.HTML – Guia .NET +url: /pt/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 >}} + +# Criar PNG a partir de HTML com Aspose.HTML – Guia .NET + +Já se perguntou como **criar PNG a partir de HTML** sem lutar com navegadores headless ou mexer com ferramentas de linha de comando? Você não está sozinho. Em muitas aplicações centradas na web você precisa de uma captura rápida de uma página — pense em miniaturas de e‑mail, relatórios PDF ou pré‑visualizações para redes sociais. A boa notícia é que o Aspose.HTML faz todo o processo parecer um passeio no parque. + +Neste tutorial vamos percorrer a renderização de HTML para PNG, a conversão de HTML para imagem, e ainda responder àquela pergunta persistente “como renderizar HTML como PNG” que aparece no Stack Overflow toda semana. Ao final, você terá um aplicativo console .NET pronto‑para‑executar que gera um arquivo PNG nítido a partir de qualquer string HTML que você fornecer. + +> **Dica profissional:** Aspose.HTML funciona em .NET Framework, .NET Core e .NET 5/6/7, então você pode inserir isso em quase qualquer projeto C# que já possua. + +--- + +## O que você precisará + +Antes de mergulharmos, certifique‑se de ter o seguinte à mão: + +| Requisito | Por que é importante | +|-----------|----------------------| +| **.NET 6 SDK** (ou mais recente) | Fornece o runtime para o aplicativo console de exemplo. | +| **Aspose.HTML for .NET** pacote NuGet | A biblioteca que faz o trabalho pesado de renderização de HTML. | +| **Um editor de código** (Visual Studio, VS Code, Rider…) | Para escrever e executar o código C#. | +| **Conhecimento básico de C#** | Você entenderá os trechos sem precisar de um curso intensivo. | + +Se já tem um projeto, basta adicionar o pacote NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +É isso — sem DLLs extras, sem binários nativos, sem dores de cabeça de licenciamento para a versão de avaliação. + +--- + +## Etapa 1: Criar um Novo Projeto Console .NET + +Primeiro, crie um aplicativo console novo para que possamos focar na lógica de renderização isoladamente. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Abra o arquivo `Program.cs` gerado; substituiremos seu conteúdo pelo exemplo completo mais adiante. Essa tela limpa garante que o processo de **criar png a partir de html** não seja contaminado por código não relacionado. + +--- + +## Etapa 2: Adicionar o Código Central de Renderização (Criar PNG a partir de HTML) + +Agora vem o coração do tutorial. Instanciaremos um `HTMLDocument`, ajustaremos algumas opções de renderização e, por fim, pediremos ao Aspose.HTML que grave um arquivo PNG no disco. + +```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}"); + } +} +``` + +### Por que essas configurações são importantes + +* **ImageRenderingOptions** – Controla o tamanho da tela e a qualidade visual. Ativar `UseAntialiasing` suaviza linhas diagonais e curvas, o que é crucial quando você depois **converte html para imagem** em telas de alta DPI. +* **TextOptions** – `UseHinting` melhora o posicionamento dos glifos, enquanto `FontStyle` permite simular negrito‑itálico sem tocar no HTML original. Isso é especialmente útil quando o markup original não possui estilos explícitos. +* **ImageRenderer** – Ao passar ambos os objetos de opção você obtém uma única chamada unificada que respeita tanto as preferências de nível de imagem quanto de texto. + +Execute o programa com `dotnet run`. Você deverá ver `output.png` aparecer na pasta do projeto, exibindo um parágrafo “Hello, world!” renderizado de forma agradável. + +--- + +## Etapa 3: Entendendo o Pipeline de Renderização (Como Renderizar HTML como PNG) + +Se você está curioso sobre **como renderizar HTML como PNG** nos bastidores, aqui vai um resumo rápido: + +1. **Parsing de HTML** – O Aspose.HTML analisa o markup e cria uma árvore DOM, assim como um navegador faria. +2. **Motor de Layout** – Calcula os modelos de caixa, resolve o CSS e determina a posição exata de cada elemento. +3. **Rasterização** – O layout é pintado em um bitmap usando GDI+ (no Windows) ou Skia (multiplataforma). É aqui que `ImageRenderingOptions` e `TextOptions` entram em ação. +4. **Codificação do Arquivo** – Finalmente o bitmap é codificado como PNG, preservando transparência e configurações de compressão. + +Como a biblioteca espelha um motor de navegador completo, você pode confiar nela para CSS complexo, SVG ou até conteúdo gerado por JavaScript (desde que habilite o motor de script). Por isso ela é uma escolha sólida quando você precisa **renderizar html para png** em cargas de trabalho de produção. + +--- + +## Etapa 4: Estendendo o Exemplo – Cenários do Mundo Real + +### 4.1 Renderizando uma Página Web Completa + +Em vez de um pequeno parágrafo, talvez você queira capturar uma página inteira: + +```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 Manipulando Recursos Externos (CSS, Imagens, Fontes) + +Aspose.HTML resolve URLs relativas automaticamente, mas pode ser necessário definir uma **URL base** se sua string HTML contiver caminhos relativos: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Para fontes personalizadas, incorpore‑as via `@font-face` em um bloco `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Dica de especialista:** Se sua página referencia CSS ou imagens externas, certifique‑se de que esses arquivos estejam acessíveis ao `HTMLDocument` (por exemplo, usando `doc.Open` com uma URL base). O **custom resource handler** os capturará automaticamente ao salvar. + +--- + +## Etapa 3: Configurar Opções de Salvamento para Exportar HTML como ZIP + +Agora instruímos o Aspose.HTML a usar nosso **custom resource handler** e a gerar um arquivo ZIP em vez de uma pasta solta. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**O que está acontecendo nos bastidores?** +Quando `doc.Save` é executado, o Aspose.HTML envia cada recurso (arquivo HTML, CSS, imagens) para o `MemoryStream` retornado por `MyHandler`. Depois que todos os fluxos são preenchidos, a biblioteca os compacta em um único pacote ZIP. + +--- + +## Etapa 4: Salvar o Arquivo ZIP do HTML + +Por fim, persista o ZIP em memória no disco (ou em qualquer outro destino). A linha a seguir grava o pacote na pasta que você especificar. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Saída esperada:** +Após executar o programa, você verá `output.zip` no diretório do seu projeto. Abra‑lo e encontrará: + +- `index.html` – a marcação que definimos. +- `style.css` – o estilo inline extraído como um arquivo separado (se houver). +- Quaisquer imagens ou fontes referenciadas (nenhuma neste exemplo pequeno). + +--- + +## Entendendo os Internos do Custom Resource Handler + +| Situação | O que o Handler Faz | Por que Ajuda | +|----------|---------------------|---------------| +| **Imagens grandes** | Retorna um novo `MemoryStream` para cada imagem, evitando I/O no sistema de arquivos. | Mantém o uso de memória previsível; você pode depois substituir o stream por um de upload na nuvem. | +| **Falha ao carregar recurso** | Se um recurso não puder ser obtido, o Aspose.HTML lança uma exceção antes de chamar `HandleResource`. | Você pode capturar a exceção em `doc.Save` e registrar o ativo ausente. | +| **Nomeação personalizada** | Substitui `Resource.Name` dentro de `HandleResource` para renomear arquivos antes de entrarem no ZIP. | Útil quando você precisa de nomes amigáveis para SEO ou deseja remover strings de consulta. | + +Se precisar armazenar recursos no Azure Blob Storage em vez de memória, basta substituir a linha `return new MemoryStream();` por código que devolva um stream suportado pelo SDK da nuvem. + +--- + +## Armadilhas Comuns & Como Evitá‑las + +1. **Esquecer de definir `SaveFormat.Zip`** – O Aspose.HTML usa, por padrão, saída em pasta. Sempre configure `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Diretório de saída inexistente** – `doc.Save` não cria a pasta pai. Use `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` antes. +3. **Handler devolve um stream fechado** – O stream deve estar aberto e ser gravável; caso contrário, o ZIP ficará corrompido. +4. **Documentos muito grandes esgotam a memória** – Para sites massivos, considere fazer streaming direto para um `FileStream` dentro do handler ao invés de `MemoryStream`. + +--- + +## Estendendo a Solução: Da Memória para a Nuvem + +Suponha que você queira **save html zip** diretamente em um bucket AWS S3. Substitua o handler por algo como: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Agora a mesma chamada `doc.Save` enviará cada arquivo direto para o S3, e o ZIP final pode ser montado posteriormente usando o upload multipart do AWS SDK. Isso demonstra a **flexibilidade** de um **custom resource handler** — você controla o mecanismo de armazenamento de ponta a ponta. + +--- + +## Exemplo Completo (Pronto para Copiar e Colar) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Execute o programa (`dotnet run`) e você verá a confirmação ✅. Abra `output.zip` com qualquer gerenciador de arquivos — encontrará uma página HTML totalmente funcional pronta para uso offline. + +--- + +## Visão Geral Visual + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Texto alternativo: Diagrama mostrando o fluxo do custom resource handler para exportar HTML como um arquivo ZIP* + +A ilustração acima captura o fluxo de dados: **HTMLDocument → Custom Resource Handler → Memory Streams → Empacotamento ZIP**. + +--- + +## Conclusão + +Acabamos de cobrir tudo que você precisa para **custom resource handler** sua maneira de criar uma solução **create html zip** em C#. Implementando uma pequena subclasse de `ResourceHandler`, configurando `HtmlSaveOptions` e chamando `doc.Save`, você tem total controle sobre como os recursos são armazenados. + +## O Que Você Deve Aprender a Seguir? + +Os tutoriais a seguir abordam tópicos intimamente relacionados que ampliam as técnicas demonstradas neste guia. Cada recurso inclui exemplos de código completos com explicações passo a passo para ajudá‑lo a dominar recursos adicionais da API e explorar abordagens alternativas em seus próprios projetos. + +- [Como Salvar HTML em C# – Guia Completo Usando um Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Criar HTML a partir de String em C# – Guia de Custom Resource Handler](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [Como Compactar HTML em C# – Salvar HTML em ZIP](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/net/generate-jpg-and-png-images/_index.md b/html/russian/net/generate-jpg-and-png-images/_index.md index 74f0059491..8ef78d8e52 100644 --- a/html/russian/net/generate-jpg-and-png-images/_index.md +++ b/html/russian/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aspose.HTML для .NET предлагает простой метод прео Узнайте, как включить сглаживание при преобразовании DOCX в PNG или JPG с помощью Aspose.HTML для .NET. ### [Конвертация 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/) +Узнайте, как преобразовать HTML в PNG с помощью Aspose.HTML в .NET, следуя пошаговым инструкциям. ## Заключение diff --git a/html/russian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/russian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..2ce5c8f76d --- /dev/null +++ b/html/russian/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,260 @@ +--- +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: ru +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: /ru/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 каждую неделю. К концу вы получите готовое к запуску .NET консольное приложение, которое выводит чёткий PNG‑файл из любой строки HTML, которую вы передадите. + +> **Pro tip:** Aspose.HTML работает на .NET Framework, .NET Core и .NET 5/6/7, поэтому вы можете добавить его почти в любой ваш C#‑проект. + +--- + +## Что вам понадобится + +Прежде чем приступить, убедитесь, что у вас есть следующее: + +| Требование | Почему это важно | +|------------|-------------------| +| **.NET 6 SDK** (или новее) | Обеспечивает среду выполнения для примера консольного приложения. | +| **Aspose.HTML for .NET** NuGet‑пакет | Библиотека, которая выполняет тяжёлую работу по рендерингу HTML. | +| **Редактор кода** (Visual Studio, VS Code, Rider…) | Для написания и запуска C#‑кода. | +| **Базовые знания C#** | Вы сможете понять фрагменты кода без дополнительного курса. | + +Если у вас уже есть проект, просто добавьте NuGet‑пакет: + +```bash +dotnet add package Aspose.HTML +``` + +И всё — никаких дополнительных DLL, нативных бинарных файлов и проблем с лицензией в оценочной версии. + +--- + +## Шаг 1: Создать новый .NET консольный проект + +Сначала создайте свежий консольный проект, чтобы сосредоточиться только на логике рендеринга. + +```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** для дисплеев с высоким DPI. +* **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. **Кодирование файла** — В конце bitmap кодируется в PNG, сохраняя прозрачность и параметры сжатия. + +Поскольку библиотека имитирует полноценный браузерный движок, вы можете полагаться на неё для сложных CSS, SVG или даже контента, генерируемого JavaScript (при включённом движке скриптов). Поэтому это надёжный выбор, когда нужно **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` в блоке `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Если ваша страница ссылается на внешние CSS или изображения, убедитесь, что эти файлы доступны `HTMLDocument` (например, используя `doc.Open` с базовым URL). **Пользовательский обработчик ресурсов** автоматически захватит их при сохранении. + +--- + +## Шаг 3: Настроить параметры сохранения для экспорта HTML в ZIP + +Теперь указываем Aspose.HTML использовать наш **пользовательский обработчик ресурсов** и выводить ZIP‑архив вместо разрозненной папки. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Что происходит под капотом?** +Когда вызывается `doc.Save`, Aspose.HTML передаёт каждый ресурс (HTML‑файл, CSS, изображения) в `MemoryStream`, возвращаемый `MyHandler`. После заполнения всех потоков библиотека упаковывает их в единый ZIP‑пакет. + +--- + +## Шаг 4: Сохранить HTML‑ZIP‑файл + +Наконец, сохраняем ZIP‑архив из памяти на диск (или в любое другое место). Следующая строка записывает архив в указанную папку. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Ожидаемый результат:** +После запуска программы в каталоге проекта появится `output.zip`. Открыв его, вы увидите: + +- `index.html` — разметка, которую мы задали. +- `style.css` — встроенный стиль, извлечённый в отдельный файл (если был). +- Любые подключённые изображения или шрифты (в этом небольшом примере их нет). + +--- + +## Понимание внутренностей пользовательского обработчика ресурсов + +| Ситуация | Что делает обработчик | Почему это полезно | +|-----------|----------------------|--------------------| +| **Большие изображения** | Возвращает новый `MemoryStream` для каждого изображения, избегая файлового ввода‑вывода. | Делает использование памяти предсказуемым; позже можно заменить поток на поток облачного SDK. | +| **Не удалось загрузить ресурс** | Если ресурс недоступен, Aspose.HTML бросает исключение до вызова `HandleResource`. | Вы можете перехватить исключение в `doc.Save` и залогировать недостающий актив. | +| **Пользовательское именование** | Переопределите `Resource.Name` внутри `HandleResource`, чтобы переименовать файлы перед добавлением в ZIP. | Удобно, когда нужны SEO‑дружественные имена файлов или нужно убрать параметры запроса. | + +Если нужно хранить ресурсы в Azure Blob Storage вместо памяти, просто замените строку `return new MemoryStream();` на код, возвращающий поток, поддерживаемый облачным SDK. + +--- + +## Распространённые подводные камни и как их избежать + +1. **Не установили `SaveFormat.Zip`** — по умолчанию Aspose.HTML сохраняет в папку. Всегда задавайте `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Отсутствует целевая директория** — `doc.Save` не создаёт родительскую папку. Сначала выполните `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));`. +3. **Обработчик возвращает закрытый поток** — поток должен быть открытым и доступным для записи; иначе ZIP будет повреждён. +4. **Большие документы исчерпывают память** — для огромных сайтов рассматривайте возможность прямой записи в файловый поток внутри обработчика вместо `MemoryStream`. + +--- + +## Расширение решения: от памяти к облаку + +Предположим, вы хотите **сохранять html zip** напрямую в бакет AWS S3. Замените обработчик, например, на такой: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Теперь тот же вызов `doc.Save` будет отправлять каждый файл сразу в S3, а окончательный ZIP можно собрать позже с помощью multipart‑загрузки AWS SDK. Это демонстрирует **гибкость** **пользовательского обработчика ресурсов** — вы контролируете механизм хранения от начала до конца. + +--- + +## Полный рабочий пример (готовый к копированию) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Запустите программу (`dotnet run`), и вы увидите подтверждение ✅. Откройте `output.zip` любой программой‑архиватором — внутри будет полностью функционирующая HTML‑страница, готовая к офлайн‑использованию. + +--- + +## Визуальный обзор + +![Диаграмма, показывающая поток пользовательского обработчика ресурсов при экспорте HTML в ZIP‑архив](image.png) + +*Alt text: Диаграмма, показывающая поток пользовательского обработчика ресурсов при экспорте HTML в ZIP‑архив* + +Иллюстрация выше отображает поток данных: **HTMLDocument → Пользовательский обработчик ресурсов → Потоки памяти → Упаковка в ZIP**. + +--- + +## Заключение + +Мы рассмотрели всё, что нужно для создания решения **custom resource handler** для **create html zip** в C#. Реализовав небольшое подкласс `ResourceHandler`, настроив `HtmlSaveOptions` и вызвав `doc.Save`, вы получаете полный контроль над процессом упаковки. + +## Что изучать дальше? + +Следующие руководства охватывают тесно связанные темы, расширяющие техники, продемонстрированные в этом пособии. Каждый ресурс включает полностью работающие примеры кода с пошаговыми объяснениями, чтобы помочь вам освоить дополнительные возможности API и исследовать альтернативные подходы в собственных проектах. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/net/generate-jpg-and-png-images/_index.md b/html/spanish/net/generate-jpg-and-png-images/_index.md index 4323c45918..53d291e535 100644 --- a/html/spanish/net/generate-jpg-and-png-images/_index.md +++ b/html/spanish/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Aprenda a utilizar Aspose.HTML para .NET para manipular documentos HTML, convert Aprenda a activar el antialiasing al convertir documentos DOCX a imágenes PNG o JPG usando Aspose.HTML para .NET. ### [Convertir docx a PNG – crear archivo ZIP con C# tutorial](./convert-docx-to-png-create-zip-archive-c-tutorial/) Aprenda a convertir documentos DOCX a imágenes PNG y empaquetarlos en un archivo ZIP usando C#. +### [Crear PNG a partir de HTML con Aspose.HTML – Guía .NET](./create-png-from-html-with-aspose-html-net-guide/) +Aprenda a generar imágenes PNG desde código HTML usando Aspose.HTML para .NET en este tutorial paso a paso. ## Conclusión diff --git a/html/spanish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/spanish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..50c813f40a --- /dev/null +++ b/html/spanish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,252 @@ +--- +category: general +date: 2026-07-21 +description: Crear PNG a partir de HTML usando Aspose.HTML en .NET. Aprende cómo renderizar + HTML a PNG, convertir HTML a imagen y domina cómo renderizar HTML como PNG con código + completo. +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: es +lastmod: 2026-07-21 +og_description: Crea PNG a partir de HTML con Aspose.HTML. Este tutorial te muestra + cómo renderizar HTML a PNG, convertir HTML a imagen y dominar cómo renderizar HTML + como PNG en unos minutos. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Crear PNG a partir de HTML con Aspose.HTML – Guía .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: Crear PNG a partir de HTML con Aspose.HTML – Guía .NET +url: /es/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 >}} + +# Crear PNG a partir de HTML con Aspose.HTML – Guía .NET + +¿Alguna vez te has preguntado cómo **crear PNG a partir de HTML** sin luchar con navegadores sin cabeza o juguetear con herramientas de línea de comandos? No eres el único. En muchas aplicaciones centradas en la web necesitas una captura rápida de una página—piensa en miniaturas de correos electrónicos, informes PDF o vistas previas para redes sociales. La buena noticia es que Aspose.HTML hace que todo el proceso sea como dar un paseo por el parque. + +En este tutorial recorreremos el renderizado de HTML a PNG, la conversión de HTML a imagen, y responderemos incluso a la persistente pregunta “cómo renderizar HTML como PNG” que aparece en Stack Overflow cada semana. Al final tendrás una aplicación de consola .NET lista para ejecutarse que genera un archivo PNG nítido a partir de cualquier cadena HTML que le proporciones. + +> **Consejo profesional:** Aspose.HTML funciona en .NET Framework, .NET Core y .NET 5/6/7, por lo que puedes incorporarlo en casi cualquier proyecto C# que ya tengas. + +--- + +## Lo que necesitarás + +Antes de sumergirnos, asegúrate de tener lo siguiente a mano: + +| Requisito | Por qué es importante | +|-------------|----------------| +| **.NET 6 SDK** (or newer) | Proporciona el runtime para la aplicación de consola de ejemplo. | +| **Aspose.HTML for .NET** NuGet package | La biblioteca que realiza el trabajo pesado de renderizado de HTML. | +| **A code editor** (Visual Studio, VS Code, Rider…) | Para escribir y ejecutar el código C#. | +| **Basic C# knowledge** | Entenderás los fragmentos sin necesidad de un curso intensivo. | + +Si ya tienes un proyecto, simplemente agrega el paquete NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +Eso es todo—sin DLLs extra, sin binarios nativos, sin dolores de cabeza de licencias para la versión de evaluación. + +## Paso 1: Crear un nuevo proyecto de consola .NET + +Primero, crea una nueva aplicación de consola fresca para que podamos centrarnos en la lógica de renderizado de forma aislada. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Abre el archivo `Program.cs` generado; más adelante reemplazaremos su contenido con el ejemplo completo. Esta hoja en blanco garantiza que el proceso **create png from html** no se contamine con código no relacionado. + +## Paso 2: Añadir el código central de renderizado (Crear PNG a partir de HTML) + +Ahora llega el corazón del tutorial. Instancia un `HTMLDocument`, ajusta un par de opciones de renderizado y, finalmente, pide a Aspose.HTML que escriba un archivo PNG en disco. + +```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}"); + } +} +``` + +### Por qué son importantes estas configuraciones + +* **ImageRenderingOptions** – Controla el tamaño del lienzo y la calidad visual. Activar `UseAntialiasing` suaviza líneas diagonales y curvas, lo cual es crucial cuando luego **convert html to image** para pantallas de alta DPI. +* **TextOptions** – `UseHinting` mejora la colocación de glifos, mientras que `FontStyle` te permite simular negrita‑cursiva sin tocar el HTML fuente. Esto es especialmente útil cuando el marcado original carece de estilos explícitos. +* **ImageRenderer** – Al pasar ambos objetos de opciones obtienes una única llamada unificada que respeta tanto las preferencias a nivel de imagen como a nivel de texto. + +Ejecuta el programa con `dotnet run`. Deberías ver `output.png` aparecer en la carpeta del proyecto, mostrando un párrafo “Hello, world!” renderizado de forma agradable. + +## Paso 3: Entender la canalización de renderizado (Cómo renderizar HTML como PNG) + +Si tienes curiosidad sobre **how to render HTML as PNG** bajo el capó, aquí tienes un resumen rápido: + +1. **HTML Parsing** – Aspose.HTML analiza el marcado en un árbol DOM, al igual que lo haría un navegador. +2. **Layout Engine** – Calcula los modelos de caja, resuelve CSS y determina la ubicación exacta de cada elemento. +3. **Rasterization** – El diseño se pinta sobre un bitmap usando GDI+ (en Windows) o Skia (multiplataforma). Aquí es donde `ImageRenderingOptions` y `TextOptions` entran en juego. +4. **File Encoding** – Finalmente el bitmap se codifica como PNG, respetando la transparencia y la configuración de compresión. + +Debido a que la biblioteca replica un motor de navegador completo, puedes confiar en ella para CSS complejo, SVG o incluso contenido generado por JavaScript (si habilitas el motor de scripting). Por eso es una opción sólida cuando necesitas **render html to png** para cargas de trabajo de producción. + +## Paso 4: Extender el ejemplo – Escenarios del mundo real + +### 4.1 Renderizar una página web completa + +En lugar de un párrafo diminuto, quizás quieras capturar una página completa: + +```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 Manejo de recursos externos (CSS, imágenes, fuentes) + +Aspose.HTML resuelve automáticamente URLs relativas, pero puede que necesites establecer una **base URL** si tu cadena HTML contiene rutas relativas: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Para fuentes personalizadas, incrústalas mediante `@font-face` en un bloque `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Si tu página hace referencia a CSS o imágenes externas, asegúrate de que esos archivos sean accesibles para el `HTMLDocument` (p. ej., usando `doc.Open` con una URL base). El **custom resource handler** los capturará automáticamente al guardar. + +--- + +## Paso 3: Configurar las opciones de guardado para exportar HTML a ZIP + +Ahora indicamos a Aspose.HTML que use nuestro **custom resource handler** y que genere un archivo ZIP en lugar de una carpeta suelta. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**¿Qué ocurre tras bambalinas?** +Cuando se ejecuta `doc.Save`, Aspose.HTML envía cada recurso (archivo HTML, CSS, imágenes) al `MemoryStream` devuelto por `MyHandler`. Una vez que todos los flujos están poblados, la biblioteca los comprime en un único paquete ZIP. + +--- + +## Paso 4: Guardar el archivo ZIP de HTML + +Finalmente, persiste el ZIP en memoria a disco (o a cualquier otro destino). La siguiente línea escribe el archivo en la carpeta que especifiques. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Salida esperada:** +Después de ejecutar el programa, verás `output.zip` en el directorio de tu proyecto. Ábrelo y encontrarás: + +- `index.html` – el marcado que definimos. +- `style.css` – el estilo en línea extraído como archivo separado (si lo hay). +- Cualquier imagen o fuente referenciada (ninguna en este pequeño ejemplo). + +--- + +## Entendiendo el interior del Custom Resource Handler + +| Situación | Qué hace el controlador | Por qué ayuda | +|-----------|------------------------|--------------| +| **Imágenes grandes** | Devuelve un nuevo `MemoryStream` para cada imagen, evitando I/O en el sistema de archivos. | Mantiene el uso de memoria predecible; luego puedes sustituir el flujo por uno de carga en la nube. | +| **Fallo al cargar un recurso** | Si un recurso no se puede obtener, Aspose.HTML lanza una excepción antes de llamar a `HandleResource`. | Puedes capturar la excepción en `doc.Save` y registrar el activo faltante. | +| **Nomenclatura personalizada** | Sobrescribe `Resource.Name` dentro de `HandleResource` para renombrar archivos antes de que entren al ZIP. | Útil cuando necesitas nombres SEO‑amigables o deseas eliminar cadenas de consulta. | + +Si necesitas almacenar los recursos en Azure Blob Storage en lugar de memoria, simplemente reemplaza la línea `return new MemoryStream();` por código que devuelva un flujo respaldado por el SDK de la nube. + +--- + +## Problemas comunes y cómo evitarlos + +1. **Olvidaste establecer `SaveFormat.Zip`** – Aspose.HTML por defecto genera una salida en carpeta. Siempre asigna `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **El directorio de salida no existe** – `doc.Save` no crea la carpeta padre. Usa `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` antes. +3. **El controlador devuelve un flujo cerrado** – El flujo debe estar abierto y ser escribible; de lo contrario el ZIP quedará corrupto. +4. **Documentos muy grandes agotan la memoria** – Para sitios masivos, considera transmitir directamente a un `FileStream` dentro del controlador en lugar de usar `MemoryStream`. + +--- + +## Extender la solución: de memoria a la nube + +Supongamos que deseas **save html zip** directamente en un bucket de AWS S3. Reemplaza el controlador con algo como: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Ahora la misma llamada `doc.Save` enviará cada archivo directamente a S3, y el ZIP final podrá ensamblarse más tarde usando la carga multipart del SDK de AWS. Esto muestra la **flexibilidad** de un **custom resource handler**: controlas el mecanismo de almacenamiento de extremo a extremo. + +--- + +## Ejemplo completo listo para copiar y pegar + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Ejecuta el programa (`dotnet run`) y verás la ✅ confirmación. Abre `output.zip` con cualquier gestor de archivos comprimidos; encontrarás una página HTML totalmente funcional lista para uso sin conexión. + +--- + +## Visión general visual + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Texto alternativo: Diagrama que muestra el flujo del controlador de recursos personalizado para exportar HTML a un archivo ZIP* + +La ilustración anterior captura el flujo de datos: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Conclusión + +Acabamos de cubrir todo lo que necesitas para **custom resource handler** tu camino hacia una solución **create html zip** en C#. Implementando una pequeña subclase de `ResourceHandler`, configurando `HtmlSaveOptions` y llamando + +## ¿Qué deberías aprender a continuación? + +Los tutoriales siguientes tratan temas estrechamente relacionados que amplían las técnicas demostradas en esta guía. Cada recurso incluye ejemplos de código completos con explicaciones paso a paso para ayudarte a dominar funciones adicionales de la API y explorar enfoques de implementación alternativos en tus propios proyectos. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/net/generate-jpg-and-png-images/_index.md b/html/swedish/net/generate-jpg-and-png-images/_index.md index 39785fb465..234a198cd3 100644 --- a/html/swedish/net/generate-jpg-and-png-images/_index.md +++ b/html/swedish/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ Lär dig att använda Aspose.HTML för .NET för att manipulera HTML-dokument, k Lär dig hur du aktiverar kantutjämning för att förbättra bildkvaliteten när du konverterar DOCX-dokument till PNG eller JPG med Aspose.HTML. ### [Konvertera DOCX till PNG – skapa zip‑arkiv C#‑handledning](./convert-docx-to-png-create-zip-archive-c-tutorial/) Lär dig hur du konverterar DOCX-filer till PNG-bilder och packar dem i ett zip‑arkiv med C# och Aspose.HTML. +### [Skapa PNG från HTML med Aspose.HTML – .NET-guide](./create-png-from-html-with-aspose-html-net-guide/) +Lär dig hur du konverterar HTML till PNG-bilder med Aspose.HTML för .NET i en steg-för-steg guide. ## Slutsats diff --git a/html/swedish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/swedish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..22462a9228 --- /dev/null +++ b/html/swedish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,258 @@ +--- +category: general +date: 2026-07-21 +description: Skapa PNG från HTML med Aspose.HTML i .NET. Lär dig hur du renderar HTML + till PNG, konverterar HTML till bild och behärskar hur du renderar HTML som PNG + med fullständig kod. +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: sv +lastmod: 2026-07-21 +og_description: Skapa PNG från HTML med Aspose.HTML. Den här handledningen visar dig + hur du renderar HTML till PNG, konverterar HTML till bild och behärskar hur du renderar + HTML som PNG på några minuter. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Skapa PNG från HTML med Aspose.HTML – .NET‑guide +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: Skapa PNG från HTML med Aspose.HTML – .NET‑guide +url: /sv/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 >}} + +# Skapa PNG från HTML med Aspose.HTML – .NET Guide + +Har du någonsin undrat hur man **skapar PNG från HTML** utan att kämpa med headless‑webbläsare eller pilla med kommandoradsverktyg? Du är inte ensam. I många webb‑centrerade appar behöver du en snabb ögonblicksbild av en sida—tänk e‑post‑miniatyrer, PDF‑rapporter eller förhandsvisningar för sociala medier. Den goda nyheten är att Aspose.HTML får hela processen att kännas som en promenad i parken. + +> **Proffstips:** Aspose.HTML fungerar på .NET Framework, .NET Core och .NET 5/6/7, så du kan släppa in detta i nästan vilket C#‑projekt du redan har. + +--- + +## Vad du behöver + +Innan vi dyker ner, se till att du har följande till hands: + +| Krav | Varför det är viktigt | +|------|-----------------------| +| **.NET 6 SDK** (eller nyare) | Tillhandahåller runtime för exempel‑konsolappen. | +| **Aspose.HTML for .NET** NuGet‑paket | Biblioteket som utför det tunga arbetet med HTML‑rendering. | +| **En kodredigerare** (Visual Studio, VS Code, Rider…) | För att skriva och köra C#‑koden. | +| **Grundläggande C#‑kunskaper** | Du kommer att förstå kodsnuttarna utan en intensivkurs. | + +Om du redan har ett projekt, lägg bara till NuGet‑paketet: + +```bash +dotnet add package Aspose.HTML +``` + +Det är allt—inga extra DLL‑filer, inga inhemska binärer, inga licensproblem för evalueringsversionen. + +--- + +## Steg 1: Skapa ett nytt .NET‑konsolprojekt + +Först, skapa en ny konsolapp så att vi kan fokusera på renderingslogiken i isolering. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Öppna den genererade `Program.cs`‑filen; vi kommer senare att ersätta dess innehåll med hela exemplet. Denna rena start garanterar att **create png from html**‑processen inte blir förorenad av orelaterad kod. + +--- + +## Steg 2: Lägg till kärnrenderingskoden (Skapa PNG från HTML) + +Nu kommer hjärtat i handledningen. Vi kommer att instansiera ett `HTMLDocument`, justera ett par renderingsalternativ och slutligen be Aspose.HTML att skriva en PNG‑fil till disk. + +```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}"); + } +} +``` + +### Varför dessa inställningar är viktiga + +* **ImageRenderingOptions** – Styr canvas‑storlek och visuell kvalitet. Att slå på `UseAntialiasing` jämnar ut diagonala linjer och kurvor, vilket är avgörande när du senare **convert html to image** för hög‑DPI‑skärmar. +* **TextOptions** – `UseHinting` förbättrar teckenglyfplacering, medan `FontStyle` låter dig simulera fet‑kursiv utan att röra käll‑HTML. Detta är särskilt praktiskt när den ursprungliga markupen saknar explicit styling. +* **ImageRenderer** – Genom att skicka båda alternativobjekten får du ett enda, enhetligt anrop som respekterar både bild‑nivå och text‑nivå preferenser. + +Kör programmet med `dotnet run`. Du bör se `output.png` dyka upp i projektmappen, som visar ett snyggt renderat “Hello, world!”‑stycke. + +--- + +## Steg 3: Förstå renderingspipeline (Hur man renderar HTML som PNG) + +Om du är nyfiken på **how to render HTML as PNG** under huven, här är en snabb genomgång: + +1. **HTML‑parsing** – Aspose.HTML analyserar markupen till ett DOM‑träd, precis som en webbläsare. +2. **Layout‑motor** – Den beräknar box‑modeller, löser CSS och bestämmer exakt placering för varje element. +3. **Rasterisering** – Layouten målas på en bitmap med GDI+ (på Windows) eller Skia (plattform‑oberoende). Här träder `ImageRenderingOptions` och `TextOptions` i kraft. +4. **Fil‑kodning** – Slutligen kodas bitmapen som PNG, med stöd för transparens och komprimeringsinställningar. + +Eftersom biblioteket speglar en fullständig webbläsarmotor kan du lita på det för komplex CSS, SVG eller till och med JavaScript‑genererat innehåll (förutsatt att du aktiverar skriptmotorn). Det är därför det är ett stabilt val när du behöver **render html to png** för produktionsarbetsbelastningar. + +--- + +## Steg 4: Utöka exemplet – Verkliga scenarier + +### 4.1 Rendera en hel webbsida + +Istället för ett litet stycke kanske du vill ta en ögonblicksbild av en hel sida: + +```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 Hantera externa resurser (CSS, bilder, teckensnitt) + +Aspose.HTML löser automatiskt relativa URL:er, men du kan behöva ange en **base URL** om din HTML‑sträng innehåller relativa sökvägar: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +För anpassade teckensnitt, bädda in dem via `@font-face` i ett `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Proffstips:** Om din sida refererar till extern CSS eller bilder, se till att dessa filer är tillgängliga för `HTMLDocument` (t.ex. genom att använda `doc.Open` med en bas‑URL). **custom resource handler** kommer att fånga dem automatiskt när du sparar. + +## Steg 3: Konfigurera sparalternativ för att exportera HTML till ZIP + +Nu instruerar vi Aspose.HTML att använda vår **custom resource handler** och att producera ett ZIP‑arkiv istället för en lös mapp. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Vad som händer under huven?** +När `doc.Save` körs, strömmar Aspose.HTML varje resurs (HTML‑fil, CSS, bilder) in i den `MemoryStream` som returneras av `MyHandler`. När alla strömmar är fyllda komprimerar biblioteket dem till ett enda ZIP‑paket. + +## Steg 4: Spara HTML‑ZIP‑filen + +Till sist sparar du den minnes‑ZIP‑filen till disk (eller någon annan destination). Följande rad skriver arkivet till en mapp du anger. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Förväntat resultat:** +Efter att programmet har körts ser du `output.zip` i din projektkatalog. Öppna den så hittar du: + +- `index.html` – markupen vi definierade. +- `style.css` – den inbäddade stilen extraherad som en separat fil (om någon). +- Alla refererade bilder eller teckensnitt (inga i detta lilla exempel). + +## Förstå den anpassade resurs‑hanterarens interna funktion + +| Situation | Vad hanteraren gör | Varför det är bra | +|-----------|--------------------|-------------------| +| **Stora bilder** | Returnerar en ny `MemoryStream` för varje bild, vilket undviker filsystem‑I/O. | Håller minnesanvändningen förutsägbar; du kan senare byta strömmen mot en moln‑uppladdningsström. | +| **Misslyckad resursladdning** | Om en resurs inte kan hämtas kastar Aspose.HTML ett undantag innan `HandleResource` anropas. | Du kan fånga undantaget vid `doc.Save` och logga den saknade tillgången. | +| **Anpassad namngivning** | Åsidosätt `Resource.Name` i `HandleResource` för att byta namn på filer innan de läggs i ZIP‑filen. | Användbart när du behöver SEO‑vänliga filnamn eller vill ta bort frågesträngar. | + +Om du behöver lagra resurser på Azure Blob Storage istället för i minnet, ersätt helt enkelt raden `return new MemoryStream();` med kod som returnerar en ström som stöds av moln‑SDK:n. + +## Vanliga fallgropar & hur man undviker dem + +1. **Glömt att sätta `SaveFormat.Zip`** – Aspose.HTML använder som standard en mapputmatning. Sätt alltid `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Utdatamappen finns inte** – `doc.Save` skapar inte föräldramappen. Använd `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` i förväg. +3. **Hanteraren returnerar en stängd ström** – Strömmen måste vara skrivbar och öppen; annars blir ZIP‑filen korrupt. +4. **Stora dokument tömmer minnet** – För enorma webbplatser, överväg att strömma direkt till en filström i hanteraren istället för `MemoryStream`. + +## Utöka lösningen: Från minne till moln + +Anta att du vill **save html zip** direkt till en AWS S3‑bucket. Ersätt hanteraren med något liknande: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Nu kommer samma `doc.Save`‑anrop att skicka varje fil direkt till S3, och den slutgiltiga ZIP‑filen kan sättas ihop senare med AWS SDK:s multipart‑uppladdning. Detta visar **flexibiliteten** hos en **custom resource handler** — du styr lagringsmekanismen från början till slut. + +## Fullt fungerande exempel (kopiera‑klistra klart) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Kör programmet (`dotnet run`), så ser du ✅‑bekräftelsen. Öppna `output.zip` med någon arkivhanterare — du hittar en fullt funktionell HTML‑sida klar för offline‑användning. + +## Visuell översikt + +![Diagram som visar flödet för anpassad resurs‑hanterare vid export av HTML till ett ZIP‑arkiv](image.png) + +*Alt text: Diagram som visar flödet för anpassad resurs‑hanterare vid export av HTML till ett ZIP‑arkiv* + +## Slutsats + +Vi har precis gått igenom allt du behöver för att **custom resource handler** din väg till en **create html zip**‑lösning i C#. Genom att implementera en liten subklass av `ResourceHandler`, konfigurera `HtmlSaveOptions` och anropa + +## Vad bör du lära dig härnäst? + +Följande handledningar täcker närliggande ämnen som bygger på teknikerna som demonstrerats i denna guide. Varje resurs innehåller kompletta fungerande kodexempel med steg‑för‑steg‑förklaringar för att hjälpa dig bemästra ytterligare API‑funktioner och utforska alternativa implementationsmetoder i dina egna projekt. + +- [Hur man sparar HTML i C# – Komplett guide med en anpassad resurs‑hanterare](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Skapa HTML från sträng i C# – Guide för anpassad resurs‑hanterare](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [Hur man zippar HTML i C# – Spara HTML till ZIP](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/net/generate-jpg-and-png-images/_index.md b/html/thai/net/generate-jpg-and-png-images/_index.md index bb3254275c..a065254c32 100644 --- a/html/thai/net/generate-jpg-and-png-images/_index.md +++ b/html/thai/net/generate-jpg-and-png-images/_index.md @@ -18,7 +18,7 @@ Aspose.HTML สำหรับ .NET เป็นไลบรารีที่ ## เหตุใดจึงต้องใช้ Aspose.HTML สำหรับ .NET? -ก่อนแรก มาพูดคุยกันก่อนว่าทำไมคุณควรเลือก Aspose.HTML สำหรับ .NET เพื่อสร้างรูปภาพ ไลบรารีนี้ช่วยให้แปลง HTML เป็นรูปแบบรูปภาพต่างๆ ได้อย่างราบรื่นและมีประสิทธิภาพ รวมถึง JPG และ PNG ไม่ว่าคุณต้องการสร้างตัวอย่างเว็บไซต์ที่น่าดึงดูด สร้างภาพขนาดย่อ หรือสร้างรายงานที่ดึงดูดสายตา Aspose.HTML สำหรับ .NET จะช่วยคุณได้ +ก่อนแรก มาพูดคุยกันก่อนว่าทำไมคุณควรเลือก Aspose.HTML สำหรับ .NET เพื่อสร้างรูปภาพ ไลบรารีนี้ช่วยให้แปลง HTML เป็นรูปแบบรูปภาพต่างๆ ได้อย่างราบรื่นและมีประสิทธิภาพ รวมถึง JPG และ PNG ไม่ว่าคุณต้องการสร้างตัวอย่างเว็บไซต์ที่น่าดึงดูด สร้างภาพขนาดย่อ หรือสร้างรายงานที่ดึงดึงสายตา Aspose.HTML สำหรับ .NET จะช่วยคุณได้ ## การเริ่มต้น @@ -45,6 +45,8 @@ Aspose.HTML สำหรับ .NET นำเสนอวิธีการง เรียนรู้วิธีเปิดใช้งาน Antialiasing เพื่อให้ภาพ PNG/JPG ที่แปลงจาก DOCX มีความคมชัดและลื่นไหล ### [แปลง 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/) +เรียนรู้วิธีแปลง HTML เป็นไฟล์ PNG อย่างง่ายด้วย Aspose.HTML สำหรับ .NET ในคู่มือขั้นตอนนี้ ## บทสรุป diff --git a/html/thai/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/thai/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..d94e95da7f --- /dev/null +++ b/html/thai/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,246 @@ +--- +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: th +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: /th/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 + +เคยสงสัยไหมว่าจะแปลง **create PNG from HTML** อย่างไรโดยไม่ต้องต่อสู้กับ headless browsers หรือจัดการกับเครื่องมือบรรทัดคำสั่ง? คุณไม่ได้เป็นคนเดียว ในแอปพลิเคชันที่เน้นเว็บหลาย ๆ ตัวคุณต้องการภาพสแนปช็อตของหน้าอย่างรวดเร็ว — เช่น ภาพย่ออีเมล, รายงาน PDF, หรือพรีวิวโซเชียลมีเดีย ข่าวดีคือ Aspose.HTML ทำให้กระบวนการทั้งหมดรู้สึกเหมือนเดินเล่นในสวน + +ในบทแนะนำนี้เราจะพาคุณผ่านการเรนเดอร์ HTML เป็น PNG, การแปลง HTML เป็นภาพ, และแม้กระทั่งตอบคำถาม “how to render HTML as PNG” ที่มักปรากฏบน Stack Overflow ทุกสัปดาห์ เมื่อจบคุณจะมีแอปคอนโซล .NET ที่พร้อมรันและสร้างไฟล์ PNG คมชัดจากสตริง HTML ใด ๆ ที่คุณป้อนเข้าไป + +> **Pro tip:** Aspose.HTML ทำงานบน .NET Framework, .NET Core, และ .NET 5/6/7, ดังนั้นคุณสามารถใส่โค้ดนี้ลงในโปรเจกต์ C# ใดก็ได้ที่คุณมีอยู่แล้ว + +--- + +## สิ่งที่คุณต้องเตรียม + +ก่อนที่เราจะเริ่มลงมือ, ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้พร้อมใช้งาน: + +| ความต้องการ | ทำไมถึงสำคัญ | +|-------------|----------------| +| **.NET 6 SDK** (หรือใหม่กว่า) | ให้ runtime สำหรับแอปคอนโซลตัวอย่าง | +| **Aspose.HTML for .NET** NuGet package | ไลบรารีที่ทำหน้าที่เรนเดอร์ HTML | +| **โปรแกรมแก้ไขโค้ด** (Visual Studio, VS Code, Rider…) | เพื่อเขียนและรันโค้ด C# | +| **ความรู้พื้นฐาน C#** | คุณจะเข้าใจสแนปโค้ดโดยไม่ต้องเรียนใหม่จากศูนย์ | + +หากคุณมีโปรเจกต์อยู่แล้ว, เพียงเพิ่มแพคเกจ NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +แค่นั้นเอง — ไม่ต้องเพิ่ม DLL เพิ่มเติม, ไม่ต้องใช้ไบนารีเนทีฟ, ไม่ต้องกังวลเรื่องลิขสิทธิ์สำหรับเวอร์ชันประเมินผล + +## ขั้นตอนที่ 1: สร้างโปรเจกต์คอนโซล .NET ใหม่ + +เริ่มต้นด้วยการสร้างแอปคอนโซลใหม่เพื่อให้เรามุ่งเน้นที่ตรรกะการเรนเดอร์โดยแยกออกจากโค้ดอื่น ๆ + +```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** สำหรับจอแสดงผล DPI สูง +* **TextOptions** – `UseHinting` ปรับตำแหน่ง glyph ให้แม่นยำ, ส่วน `FontStyle` ช่วยจำลองตัวหนา‑เอียงโดยไม่ต้องแก้ไข HTML ต้นฉบับ เหมาะมากเมื่อ markup ดั้งเดิมไม่มีสไตล์ที่ชัดเจน +* **ImageRenderer** – การส่งอ็อบเจ็กต์ตัวเลือกทั้งสองพร้อมกันทำให้เราเรียกครั้งเดียวที่เคารพการตั้งค่าระดับภาพและระดับข้อความ + +รันโปรแกรมด้วย `dotnet run`. คุณควรเห็นไฟล์ `output.png` ปรากฏในโฟลเดอร์โปรเจกต์, แสดงย่อหน้าที่เขียนว่า “Hello, world!” อย่างสวยงาม + +## ขั้นตอนที่ 3: ทำความเข้าใจกระบวนการเรนเดอร์ (How to Render HTML as PNG) + +หากคุณสนใจ **how to render HTML as PNG** ภายใน, นี่คือสรุปสั้น ๆ: + +1. **HTML Parsing** – Aspose.HTML แยกวิเคราะห์ markup เป็นต้นไม้ DOM เหมือนเบราว์เซอร์ +2. **Layout Engine** – คำนวณ box model, แก้ไข CSS, และกำหนดตำแหน่งที่แน่นอนของแต่ละองค์ประกอบ +3. **Rasterization** – Layout ถูกวาดลงบนบิตแมพโดยใช้ GDI+ (บน Windows) หรือ Skia (ข้ามแพลตฟอร์ม) ที่นี่ `ImageRenderingOptions` และ `TextOptions` มีผล +4. **File Encoding** – สุดท้ายบิตแมพถูกเข้ารหัสเป็น PNG, รองรับความโปร่งใสและการบีบอัด + +เนื่องจากไลบรารีนี้จำลองเครื่องยนต์เบราว์เซอร์เต็มรูปแบบ, คุณสามารถพึ่งพาได้สำหรับ CSS ซับซ้อน, SVG, หรือแม้แต่เนื้อหาที่สร้างด้วย JavaScript (หากเปิดใช้งาน scripting engine) นั่นทำให้มันเป็นตัวเลือกที่มั่นคงเมื่อคุณต้อง **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, Images, Fonts) + +Aspose.HTML จะแก้ไข URL แบบ relative ให้อัตโนมัติ, แต่คุณอาจต้องตั้ง **base URL** หากสตริง HTML ของคุณมี path แบบ relative: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +สำหรับฟอนต์แบบกำหนดเอง, ฝังฟอนต์ผ่าน `@font-face` ในบล็อก `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** หากหน้าของคุณอ้างอิง CSS หรือรูปภาพภายนอก ให้แน่ใจว่าไฟล์เหล่านั้นเข้าถึงได้โดย `HTMLDocument` (เช่น ใช้ `doc.Open` พร้อม base URL) **custom resource handler** จะจับไฟล์เหล่านั้นโดยอัตโนมัติเมื่อคุณบันทึก + +--- + +## ขั้นตอนที่ 3: ตั้งค่า Save Options เพื่อ Export HTML เป็น ZIP + +ตอนนี้เราบอก Aspose.HTML ให้ใช้ **custom resource handler** ของเราและส่งออกเป็นไฟล์ ZIP แทนโฟลเดอร์แยก + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**สิ่งที่เกิดขึ้นเบื้องหลัง:** +เมื่อ `doc.Save` ทำงาน Aspose.HTML จะสตรีมแต่ละทรัพยากร (ไฟล์ HTML, CSS, รูปภาพ) ไปยัง `MemoryStream` ที่ `MyHandler` คืนค่า หลังจากทุกสตรีมถูกเติมเต็ม ไลบรารีจะบีบอัดพวกมันเป็นแพ็กเกจ ZIP เดียว + +--- + +## ขั้นตอนที่ 4: บันทึกไฟล์ HTML ZIP + +สุดท้ายให้บันทึก ZIP ที่อยู่ในหน่วยความจำลงดิสก์ (หรือที่อื่นตามที่ต้องการ) บรรทัดต่อไปนี้จะเขียนไฟล์เก็บไว้ในโฟลเดอร์ที่คุณระบุ + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**ผลลัพธ์ที่คาดหวัง:** +หลังจากรันโปรแกรม คุณจะเห็น `output.zip` ในไดเรกทอรีของโปรเจกต์ เปิดไฟล์แล้วคุณจะพบ: + +- `index.html` – markup ที่เรากำหนดไว้ +- `style.css` – สไตล์อินไลน์ที่แยกเป็นไฟล์ (ถ้ามี) +- รูปภาพหรือฟอนต์ที่อ้างอิง (ไม่มีในตัวอย่างเล็ก ๆ นี้) + +--- + +## ทำความเข้าใจภายในของ Custom Resource Handler + +| Situation | What the Handler Does | Why It Helps | +|-----------|----------------------|--------------| +| **Large images** | Returns a fresh `MemoryStream` for each image, avoiding file‑system I/O. | Keeps memory usage predictable; you can later swap the stream for a cloud upload stream. | +| **Failed resource load** | If a resource cannot be retrieved, Aspose.HTML throws an exception before calling `HandleResource`. | You can catch the exception at `doc.Save` and log the missing asset. | +| **Custom naming** | Override `Resource.Name` inside `HandleResource` to rename files before they enter the ZIP. | Useful when you need SEO‑friendly filenames or want to strip query strings. | + +หากต้องการเก็บทรัพยากรบน Azure Blob Storage แทนหน่วยความจำ เพียงเปลี่ยนบรรทัด `return new MemoryStream();` ให้เป็นโค้ดที่คืนสตรีมจาก SDK ของคลาวด์ + +--- + +## ข้อผิดพลาดทั่วไป & วิธีหลีกเลี่ยง + +1. **Forgot to set `SaveFormat.Zip`** – Aspose.HTML defaults to a folder output. Always set `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Output directory doesn’t exist** – `doc.Save` won’t create the parent folder. Use `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` beforehand. +3. **Handler returns a closed stream** – The stream must be writable and open; otherwise the ZIP will be corrupted. +4. **Large documents exhaust memory** – For massive sites, consider streaming directly to a file stream inside the handler instead of `MemoryStream`. + +--- + +## ขยายโซลูชัน: จากหน่วยความจำสู่คลาวด์ + +สมมติว่าคุณต้องการ **save html zip** โดยตรงไปยัง bucket ของ AWS S3 ให้แทนที่ handler ด้วยโค้ดประมาณนี้: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +ตอนนี้การเรียก `doc.Save` เดียวกันจะผลักไฟล์แต่ละไฟล์ตรงเข้าสู่ S3 และ ZIP สุดท้ายสามารถประกอบขึ้นภายหลังโดยใช้ multipart upload ของ AWS SDK นี่แสดงให้เห็นถึง **ความยืดหยุ่น** ของ **custom resource handler** — คุณควบคุมกลไกการจัดเก็บตั้งแต่ต้นจนจบ + +--- + +## ตัวอย่างทำงานเต็มรูปแบบ (พร้อมคัดลอก‑วาง) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +รันโปรแกรม (`dotnet run`) แล้วคุณจะเห็นการยืนยัน ✅ เปิด `output.zip` ด้วยโปรแกรมจัดการไฟล์ใดก็ได้ คุณจะพบหน้า HTML ที่ทำงานได้เต็มที่พร้อมใช้งานแบบออฟไลน์ + +--- + +## ภาพรวมเชิงภาพ + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*ข้อความแทนภาพ: แผนภาพแสดงการไหลของ custom resource handler สำหรับการส่งออก HTML ไปเป็นไฟล์ ZIP* + +ภาพด้านบนสรุปการไหลของข้อมูล: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## สรุป + +เราได้ครอบคลุมทุกอย่างที่คุณต้องการเพื่อ **custom resource handler** เส้นทางสู่การ **create html zip** ใน C# ด้วยการสร้าง subclass เล็ก ๆ ของ `ResourceHandler` ตั้งค่า `HtmlSaveOptions` และเรียกใช้ `doc.Save` + +## คุณควรเรียนรู้อะไรต่อไป? + +บทแนะนำต่อไปนี้เกี่ยวกับหัวข้อที่ใกล้เคียงและต่อยอดจากเทคนิคที่แสดงในคู่มือนี้ แต่ละแหล่งรวมโค้ดทำงานเต็มรูปแบบพร้อมคำอธิบายขั้นตอนเพื่อช่วยให้คุณเชี่ยวชาญฟีเจอร์ API เพิ่มเติมและสำรวจวิธีการทำงานแบบอื่นในโปรเจกต์ของคุณ + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/net/generate-jpg-and-png-images/_index.md b/html/turkish/net/generate-jpg-and-png-images/_index.md index a918363c42..c607d8fb99 100644 --- a/html/turkish/net/generate-jpg-and-png-images/_index.md +++ b/html/turkish/net/generate-jpg-and-png-images/_index.md @@ -45,6 +45,8 @@ HTML belgelerini düzenlemek, HTML'yi resimlere dönüştürmek ve daha fazlası DOCX belgelerini PNG veya JPG formatına dönüştürürken antialiasing'i etkinleştirerek daha net ve pürüzsüz görüntüler elde edin. ### [docx'i png'ye dönüştür – zip arşivi oluşturma C# eğitimi](./convert-docx-to-png-create-zip-archive-c-tutorial/) C# kullanarak docx dosyalarını png formatına dönüştürüp, sonuçları zip arşivi içinde paketlemeyi öğrenin. +### [Aspose.HTML ile HTML'den PNG Oluşturma – .NET Rehberi](./create-png-from-html-with-aspose-html-net-guide/) +Aspose.HTML for .NET kullanarak HTML içeriğinden PNG görüntüsü oluşturmayı adım adım öğrenin. ## Çözüm diff --git a/html/turkish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/turkish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..a9d1aa7ec0 --- /dev/null +++ b/html/turkish/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,264 @@ +--- +category: general +date: 2026-07-21 +description: Aspose.HTML kullanarak .NET’te HTML’den PNG oluşturun. HTML’yi PNG’ye + nasıl render edeceğinizi, HTML’yi görüntüye nasıl dönüştüreceğinizi öğrenin ve tam + kodla HTML’yi PNG olarak nasıl render edeceğinizi ustalaşın. +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: tr +lastmod: 2026-07-21 +og_description: Aspose.HTML ile HTML'den PNG oluşturun. Bu öğretici, HTML'yi PNG'ye + nasıl render edeceğinizi, HTML'yi görüntüye nasıl dönüştüreceğinizi ve birkaç dakika + içinde HTML'yi PNG olarak nasıl render edeceğinizi gösterir. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Aspose.HTML ile HTML'den PNG Oluşturma – .NET Rehberi +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: Aspose.HTML ile HTML'den PNG Oluşturma – .NET Rehberi +url: /tr/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 >}} + +# HTML'den PNG Oluşturma – .NET Kılavuzu + +Hiç **HTML'den PNG oluşturma** işlemini başsız tarayıcılarla uğraşmadan ya da komut satırı araçlarıyla oynayarak yapmayı düşündünüz mü? Tek başınıza değilsiniz. Birçok web‑odaklı uygulamada bir sayfanın hızlı bir anlık görüntüsüne ihtiyacınız olur—e‑posta küçük resimleri, PDF raporları ya da sosyal medya ön izlemeleri gibi. İyi haber şu ki Aspose.HTML, tüm süreci bir parkta yürümek gibi hissettiriyor. + +Bu öğreticide HTML'yi PNG'ye render etme, HTML'yi görüntüye dönüştürme adımlarını inceleyecek ve Stack Overflow'da her hafta karşımıza çıkan “HTML nasıl PNG olarak render edilir” sorusuna yanıt vereceğiz. Sonunda, herhangi bir HTML dizesini beslediğinizde net bir PNG dosyası üreten çalıştırılabilir bir .NET konsol uygulamanız olacak. + +> **Pro ipucu:** Aspose.HTML, .NET Framework, .NET Core ve .NET 5/6/7 üzerinde çalışır, bu yüzden mevcut C# projenize neredeyse sorunsuz bir şekilde ekleyebilirsiniz. + +--- + +## İhtiyacınız Olanlar + +İlerlemeye başlamadan önce aşağıdakilerin elinizde olduğundan emin olun: + +| Gereksinim | Neden Önemli | +|------------|--------------| +| **.NET 6 SDK** (veya daha yeni) | Örnek konsol uygulaması için çalışma zamanını sağlar. | +| **Aspose.HTML for .NET** NuGet paketi | HTML render işleminin ağır işini yapan kütüphane. | +| **Bir kod editörü** (Visual Studio, VS Code, Rider…) | C# kodunu yazıp çalıştırmak için. | +| **Temel C# bilgisi** | Kesintisiz bir kursa ihtiyaç duymadan kod parçacıklarını anlayacaksınız. | + +Eğer zaten bir projeniz varsa, sadece NuGet paketini ekleyin: + +```bash +dotnet add package Aspose.HTML +``` + +Hepsi bu—ekstra DLL, yerel ikili dosya ya da değerlendirme sürümü için lisans sorunları yok. + +--- + +## Adım 1: Yeni bir .NET Konsol Projesi Oluşturun + +İlk olarak, render mantığını izole bir şekilde inceleyebilmek için temiz bir konsol uygulaması başlatalım. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Oluşturulan `Program.cs` dosyasını açın; içeriğini daha sonra tam örnekle değiştireceğiz. Bu temiz sayfa, **HTML'den PNG oluşturma** sürecinin başka kodlarla kirlenmemesini sağlar. + +--- + +## Adım 2: Çekirdek Render Kodunu Ekleyin (HTML'den PNG Oluşturma) + +Şimdi öğreticinin kalbine geliyoruz. Bir `HTMLDocument` nesnesi oluşturacağız, birkaç render seçeneğini ayarlayacağız ve sonunda Aspose.HTML'ye bir PNG dosyasını diske yazdıracağız. + +```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}"); + } +} +``` + +### Bu Ayarların Önemi + +* **ImageRenderingOptions** – Tuval boyutunu ve görsel kaliteyi kontrol eder. `UseAntialiasing` özelliğini açmak, diyagonal çizgileri ve eğrileri yumuşatır; bu, yüksek DPI ekranlar için **HTML'yi görüntüye dönüştürürken** kritik öneme sahiptir. +* **TextOptions** – `UseHinting` karakter yerleşimini iyileştirir, `FontStyle` ise kaynak HTML'ye dokunmadan kalın‑eğik simülasyonu yapmanıza olanak tanır. Orijinal işaretlemede stil eksikliği olduğunda çok işe yarar. +* **ImageRenderer** – Her iki seçenek nesnesini de geçirerek, hem görüntü‑seviyesi hem de metin‑seviyesi tercihlerini tek bir birleşik çağrıyla uygular. + +Programı `dotnet run` ile çalıştırın. Proje klasöründe `output.png` adlı bir dosyanın belirdiğini ve güzel bir şekilde render edilmiş “Hello, world!” paragrafını gösterdiğini göreceksiniz. + +--- + +## Adım 3: Render İşlem Hattını Anlamak (HTML nasıl PNG olarak render edilir) + +**HTML nasıl PNG olarak render edilir** sorusunun arka planını merak ediyorsanız, işte hızlı bir özet: + +1. **HTML Ayrıştırma** – Aspose.HTML, işaretlemi bir tarayıcının yaptığı gibi DOM ağacına dönüştürür. +2. **Yerleşim Motoru** – Kutu modellerini hesaplar, CSS'i çözer ve her öğenin kesin konumunu belirler. +3. **Rasterizasyon** – Yerleşim, Windows'ta GDI+ (veya çapraz‑platformda Skia) kullanılarak bir bitmap üzerine boyanır. İşte `ImageRenderingOptions` ve `TextOptions` burada devreye girer. +4. **Dosya Kodlaması** – Son olarak bitmap, şeffaflık ve sıkıştırma ayarlarını koruyarak PNG olarak kodlanır. + +Kütüphane tam bir tarayıcı motorunu taklit ettiğinden, karmaşık CSS, SVG ya da hatta JavaScript‑tarafından oluşturulan içeriklere (betik motorunu etkinleştirirseniz) güvenebilirsiniz. Bu yüzden **HTML'yi PNG'ye render etmek** üretim ortamları için sağlam bir seçimdir. + +--- + +## Adım 4: Örneği Genişletmek – Gerçek‑Dünya Senaryoları + +### 4.1 Tam Bir Web Sayfasını Render Etmek + +Küçük bir paragraf yerine tüm bir sayfanın anlık görüntüsünü almak isteyebilirsiniz: + +```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 Dış Kaynakları (CSS, Görseller, Yazı Tipleri) Yönetmek + +Aspose.HTML, göreceli URL'leri otomatik olarak çözer, ancak HTML dizesi göreceli yollar içeriyorsa bir **base URL** ayarlamanız gerekebilir: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Özel yazı tipleri için, bir `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Sayfanız dış CSS veya resimlere referans veriyorsa, bu dosyaların `HTMLDocument` tarafından erişilebilir olduğundan emin olun (örneğin, temel bir URL ile `doc.Open` kullanarak). **custom resource handler**, kaydettiğinizde bunları otomatik olarak yakalar. + +## Adım 3: HTML'i ZIP Olarak Dışa Aktarmak İçin Kaydetme Seçeneklerini Yapılandırın + +Şimdi Aspose.HTML'e **custom resource handler**'ımızı kullanmasını ve gevşek bir klasör yerine bir ZIP arşivi oluşturmasını söylüyoruz. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Arka planda neler oluyor?** +`doc.Save` çalıştığında, Aspose.HTML her kaynağı (HTML dosyası, CSS, resimler) `MyHandler` tarafından döndürülen `MemoryStream`'e akıtır. Tüm akışlar doldurulduktan sonra, kütüphane bunları tek bir ZIP paketine sıkıştırır. + +## Adım 4: HTML ZIP Dosyasını Kaydedin + +Son olarak, bellek içindeki ZIP'i diske (veya başka bir hedefe) kalıcı hale getirin. Aşağıdaki satır arşivi belirttiğiniz bir klasöre yazar. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Beklenen çıktı:** +Programı çalıştırdıktan sonra proje dizininizde `output.zip` dosyasını göreceksiniz. Açtığınızda şunları bulacaksınız: + +- `index.html` – tanımladığımız işaretleme. +- `style.css` – ayrı bir dosya olarak çıkarılan satır içi stil (varsa). +- Referans verilen tüm resimler veya yazı tipleri (bu küçük örnekte yok). + +## Özel Kaynak İşleyicisinin İç Yapısını Anlamak + +| Durum | İşleyicinin Yaptığı | Neden Yardımcı Olur | +|-----------|----------------------|--------------| +| **Büyük resimler** | Her resim için yeni bir `MemoryStream` döndürür, dosya sistemi I/O'sını önler. | Bellek kullanımını öngörülebilir tutar; daha sonra akışı bulut yükleme akışıyla değiştirebilirsiniz. | +| **Kaynak yükleme hatası** | Bir kaynak alınamazsa, Aspose.HTML `HandleResource` çağrılmadan bir istisna fırlatır. | `doc.Save` sırasında istisnayı yakalayabilir ve eksik varlığı kaydedebilirsiniz. | +| **Özel adlandırma** | `HandleResource` içinde `Resource.Name`'i geçersiz kılarak dosyaları ZIP'e girmeden önce yeniden adlandırabilirsiniz. | SEO‑dostu dosya adlarına ihtiyacınız olduğunda veya sorgu dizelerini kaldırmak istediğinizde faydalıdır. | + +Eğer kaynakları bellekte tutmak yerine Azure Blob Storage'da saklamanız gerekiyorsa, sadece `return new MemoryStream();` satırını bulut SDK'sı tarafından desteklenen bir akış döndüren kodla değiştirin. + +## Yaygın Tuzaklar ve Nasıl Kaçınılır + +1. **`SaveFormat.Zip` ayarlamayı unutmak** – Aspose.HTML varsayılan olarak bir klasör çıktısı verir. Her zaman `saveOptions.SaveFormat = SaveFormat.Zip;` ayarlayın. +2. **Çıktı dizini mevcut değil** – `doc.Save` üst klasörü oluşturmaz. Önceden `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` kullanın. +3. **İşleyici kapalı bir akış döndürür** – Akış yazılabilir ve açık olmalıdır; aksi takdirde ZIP bozulur. +4. **Büyük belgeler belleği tüketir** – Çok büyük siteler için, `MemoryStream` yerine işleyici içinde doğrudan bir dosya akışına akıtmayı düşünün. + +## Çözümü Genişletmek: Bellekten Buluta + +Diyelim ki **save html zip**'i doğrudan bir AWS S3 bucket'ına kaydetmek istiyorsunuz. İşleyiciyi aşağıdaki gibi bir şeyle değiştirin: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Artık aynı `doc.Save` çağrısı her dosyayı doğrudan S3'e itecek ve son ZIP, AWS SDK'nın çok parçalı yükleme özelliğiyle daha sonra birleştirilebilir. Bu, bir **custom resource handler**'ın **esnekliğini** gösterir—depolama mekanizmasını uçtan uca kontrol edersiniz. + +## Tam Çalışan Örnek (Kopyala‑Yapıştır Hazır) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Programı çalıştırın (`dotnet run`) ve ✅ onayını göreceksiniz. `output.zip` dosyasını herhangi bir arşiv yöneticisiyle açın—çevrim dışı kullanım için tamamen işlevsel bir HTML sayfası bulacaksınız. + +## Görsel Genel Bakış + +![HTML'i ZIP arşivine dışa aktarma için custom resource handler akış diyagramı](image.png) + +*Alt metin: HTML'i ZIP arşivine dışa aktarma için custom resource handler akış diyagramı* + +## Sonuç + +C#'ta **custom resource handler** kullanarak bir **create html zip** çözümü oluşturmak için ihtiyacınız olan her şeyi ele aldık. `ResourceHandler`'ın küçük bir alt sınıfını uygulayarak, `HtmlSaveOptions`'ı yapılandırarak ve çağırarak + +## Sonra Ne Öğrenmelisiniz? + +Aşağıdaki öğreticiler, bu rehberde gösterilen tekniklere dayanan ve yakından ilgili konuları kapsar. Her kaynak, ek API özelliklerini öğrenmenize ve kendi projelerinizde alternatif uygulama yaklaşımlarını keşfetmenize yardımcı olacak adım adım açıklamalar içeren tam çalışan kod örnekleri sunar. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/net/generate-jpg-and-png-images/_index.md b/html/vietnamese/net/generate-jpg-and-png-images/_index.md index 364f751610..e4b463d024 100644 --- a/html/vietnamese/net/generate-jpg-and-png-images/_index.md +++ b/html/vietnamese/net/generate-jpg-and-png-images/_index.md @@ -41,6 +41,8 @@ Tích hợp Aspose.HTML cho .NET vào các dự án .NET của bạn thật dễ Tìm hiểu cách tạo trang web động bằng Aspose.HTML cho .NET. Hướng dẫn từng bước này bao gồm các điều kiện tiên quyết, không gian tên và kết xuất HTML thành hình ảnh. ### [Tạo hình ảnh PNG bằng ImageDevice trong .NET với Aspose.HTML](./generate-png-images-by-imagedevice/) Học cách sử dụng Aspose.HTML cho .NET để thao tác với các tài liệu HTML, chuyển đổi HTML thành hình ảnh và nhiều hơn nữa. Hướng dẫn từng bước có Câu hỏi thường gặp. +### [Tạo PNG từ HTML với Aspose.HTML – Hướng dẫn .NET](./create-png-from-html-with-aspose-html-net-guide/) +Hướng dẫn chi tiết cách chuyển đổi HTML thành ảnh PNG bằng Aspose.HTML cho .NET, bao gồm các bước cấu hình và ví dụ mã. ### [Cách bật khử răng cưa khi chuyển đổi DOCX sang PNG/JPG](./how-to-enable-antialiasing-when-converting-docx-to-png-jpg/) Hướng dẫn chi tiết cách bật khử răng cưa để cải thiện chất lượng hình ảnh khi chuyển đổi tài liệu DOCX sang PNG hoặc JPG bằng Aspose.HTML. ### [Chuyển đổi DOCX sang PNG – tạo tệp ZIP bằng C# – Hướng dẫn](./convert-docx-to-png-create-zip-archive-c-tutorial/) diff --git a/html/vietnamese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md b/html/vietnamese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md new file mode 100644 index 0000000000..c1c5b1bc17 --- /dev/null +++ b/html/vietnamese/net/generate-jpg-and-png-images/create-png-from-html-with-aspose-html-net-guide/_index.md @@ -0,0 +1,260 @@ +--- +category: general +date: 2026-07-21 +description: Tạo PNG từ HTML bằng Aspose.HTML trong .NET. Tìm hiểu cách chuyển đổi + HTML sang PNG, chuyển HTML thành hình ảnh và nắm vững cách render HTML thành PNG + với mã đầy đủ. +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: vi +lastmod: 2026-07-21 +og_description: Tạo PNG từ HTML với Aspose.HTML. Hướng dẫn này chỉ cho bạn cách chuyển + đổi HTML sang PNG, chuyển HTML thành hình ảnh, và nắm vững cách render HTML dưới + dạng PNG trong vài phút. +og_image_alt: Screenshot showing HTML rendered as PNG using Aspose.HTML – create PNG + from HTML +og_title: Tạo PNG từ HTML bằng Aspose.HTML – Hướng dẫn .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: Tạo PNG từ HTML bằng Aspose.HTML – Hướng dẫn .NET +url: /vi/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 >}} + +# Tạo PNG từ HTML với Aspose.HTML – Hướng dẫn .NET + +Bạn đã bao giờ tự hỏi làm thế nào **tạo PNG từ HTML** mà không phải vật lộn với các trình duyệt headless hay công cụ dòng lệnh? Bạn không phải là người duy nhất. Trong nhiều ứng dụng web‑centric, bạn cần một ảnh chụp nhanh của trang — ví dụ như ảnh thu nhỏ email, báo cáo PDF, hoặc preview cho mạng xã hội. Tin tốt là Aspose.HTML khiến toàn bộ quá trình trở nên đơn giản như đi dạo trong công viên. + +Trong tutorial này, chúng ta sẽ đi qua việc render HTML thành PNG, chuyển đổi HTML sang hình ảnh, và thậm chí trả lời câu hỏi “cách render HTML thành PNG” mà thường xuất hiện trên Stack Overflow mỗi tuần. Khi kết thúc, bạn sẽ có một ứng dụng console .NET sẵn sàng chạy, xuất ra một file PNG sắc nét từ bất kỳ chuỗi HTML nào bạn cung cấp. + +> **Mẹo chuyên nghiệp:** Aspose.HTML hoạt động trên .NET Framework, .NET Core và .NET 5/6/7, vì vậy bạn có thể đưa nó vào hầu hết mọi dự án C# hiện có. + +--- + +## Những gì bạn cần + +Trước khi bắt đầu, hãy chắc chắn bạn đã chuẩn bị sẵn các mục sau: + +| Yêu cầu | Lý do quan trọng | +|-------------|----------------| +| **.NET 6 SDK** (hoặc mới hơn) | Cung cấp môi trường chạy cho ứng dụng console mẫu. | +| **Aspose.HTML for .NET** gói NuGet | Thư viện thực hiện việc render HTML. | +| **Trình soạn thảo mã** (Visual Studio, VS Code, Rider…) | Để viết và chạy mã C#. | +| **Kiến thức cơ bản về C#** | Bạn sẽ hiểu các đoạn mã mà không cần khóa học nhanh. | + +Nếu bạn đã có một dự án, chỉ cần thêm gói NuGet: + +```bash +dotnet add package Aspose.HTML +``` + +Thế là xong — không cần DLL phụ, không có binary gốc, không lo về giấy phép cho phiên bản đánh giá. + +--- + +## Bước 1: Tạo dự án Console .NET mới + +Đầu tiên, tạo một ứng dụng console mới để chúng ta có thể tập trung vào logic render một cách riêng biệt. + +```bash +dotnet new console -n HtmlToPngDemo +cd HtmlToPngDemo +``` + +Mở file `Program.cs` được tạo; chúng ta sẽ thay thế nội dung của nó bằng ví dụ đầy đủ sau. Bảng trắng này đảm bảo quy trình **create png from html** không bị nhiễu bởi mã không liên quan. + +--- + +## Bước 2: Thêm mã render lõi (Create PNG from HTML) + +Bây giờ là phần trọng tâm của tutorial. Chúng ta sẽ khởi tạo một `HTMLDocument`, điều chỉnh một vài tùy chọn render, và cuối cùng yêu cầu Aspose.HTML ghi file PNG ra đĩa. + +```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}"); + } +} +``` + +### Tại sao các thiết lập này lại quan trọng + +* **ImageRenderingOptions** – Kiểm soát kích thước canvas và chất lượng hình ảnh. Bật `UseAntialiasing` làm mượt các đường chéo và đường cong, rất quan trọng khi bạn **convert html to image** cho màn hình DPI cao. +* **TextOptions** – `UseHinting` cải thiện vị trí glyph, trong khi `FontStyle` cho phép mô phỏng in đậm‑nghiêng mà không cần thay đổi HTML nguồn. Điều này đặc biệt hữu ích khi markup gốc thiếu style rõ ràng. +* **ImageRenderer** – Bằng cách truyền cả hai đối tượng tùy chọn, bạn nhận được một lời gọi duy nhất, thống nhất, tôn trọng cả ưu tiên ở mức hình ảnh và văn bản. + +Chạy chương trình bằng `dotnet run`. Bạn sẽ thấy file `output.png` xuất hiện trong thư mục dự án, hiển thị đoạn “Hello, world!” được render đẹp mắt. + +--- + +## Bước 3: Hiểu quy trình render (How to Render HTML as PNG) + +Nếu bạn tò mò về **how to render HTML as PNG** bên trong, đây là tóm tắt nhanh: + +1. **HTML Parsing** – Aspose.HTML phân tích markup thành cây DOM, giống như một trình duyệt. +2. **Layout Engine** – Tính toán box model, giải quyết CSS, và xác định vị trí chính xác của từng phần tử. +3. **Rasterization** – Bố cục được vẽ lên bitmap bằng GDI+ (trên Windows) hoặc Skia (đa nền tảng). Đây là nơi `ImageRenderingOptions` và `TextOptions` có tác dụng. +4. **File Encoding** – Cuối cùng bitmap được mã hoá thành PNG, giữ nguyên độ trong suốt và các thiết lập nén. + +Vì thư viện mô phỏng một engine trình duyệt đầy đủ, bạn có thể tin tưởng nó cho CSS phức tạp, SVG, hoặc thậm chí nội dung được tạo bằng JavaScript (khi bật engine scripting). Đó là lý do nó là lựa chọn vững chắc khi bạn cần **render html to png** cho các tải trọng sản xuất. + +--- + +## Bước 4: Mở rộng ví dụ – Các kịch bản thực tế + +### 4.1 Render toàn bộ trang web + +Thay vì một đoạn văn ngắn, bạn có thể muốn chụp lại toàn bộ một trang: + +```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 Xử lý tài nguyên bên ngoài (CSS, Images, Fonts) + +Aspose.HTML tự động giải quyết các URL tương đối, nhưng bạn có thể cần đặt **base URL** nếu chuỗi HTML của bạn chứa các đường dẫn tương đối: + +```csharp +HTMLDocument docWithBase = new HTMLDocument(htmlContent, "https://mycdn.com/assets/"); +``` + +Đối với font tùy chỉnh, nhúng chúng qua `@font-face` trong thẻ `" + + "

Hello, World!

This page is packaged inside a ZIP.

" +); +``` + +> **Pro tip:** Nếu trang của bạn tham chiếu tới CSS hoặc hình ảnh bên ngoài, hãy chắc chắn các file đó có thể truy cập được bởi `HTMLDocument` (ví dụ, dùng `doc.Open` với một base URL). **Custom resource handler** sẽ tự động bắt chúng khi bạn lưu. + +--- + +## Bước 3: Cấu Hình Save Options để Export HTML thành ZIP + +Bây giờ chúng ta chỉ định cho Aspose.HTML sử dụng **custom resource handler** của mình và xuất ra một file ZIP thay vì một thư mục rời rạc. + +```csharp +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +// Set up save options – the key is OutputStorage. +HtmlSaveOptions saveOptions = new HtmlSaveOptions(); +saveOptions.OutputStorage = new MyHandler(); // <-- our custom handler +saveOptions.SaveFormat = SaveFormat.Zip; // Explicitly request ZIP output +``` + +**Điều gì đang diễn ra phía sau?** +Khi `doc.Save` được gọi, Aspose.HTML sẽ stream mỗi tài nguyên (file HTML, CSS, hình ảnh) vào `MemoryStream` mà `MyHandler` trả về. Khi tất cả các stream đã được tạo, thư viện sẽ nén chúng thành một gói ZIP duy nhất. + +--- + +## Bước 4: Lưu File ZIP HTML + +Cuối cùng, ghi ZIP trong bộ nhớ ra đĩa (hoặc bất kỳ đích nào khác). Dòng lệnh dưới đây sẽ viết gói vào thư mục bạn chỉ định. + +```csharp +// Choose an output directory that already exists. +string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + +// The Save method will pull the data from our handler and write the ZIP. +doc.Save(outputPath, saveOptions); + +Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); +``` + +**Kết quả mong đợi:** +Sau khi chạy chương trình, bạn sẽ thấy `output.zip` trong thư mục dự án. Mở nó và bạn sẽ thấy: + +- `index.html` – markup chúng ta đã định nghĩa. +- `style.css` – style nội tuyến được tách ra thành file riêng (nếu có). +- Bất kỳ hình ảnh hoặc font nào được tham chiếu (không có trong ví dụ nhỏ này). + +--- + +## Hiểu Rõ Nội Bộ Custom Resource Handler + +| Situation | What the Handler Does | Why It Helps | +|-----------|----------------------|--------------| +| **Large images** | Returns a fresh `MemoryStream` for each image, avoiding file‑system I/O. | Keeps memory usage predictable; you can later swap the stream for a cloud upload stream. | +| **Failed resource load** | If a resource cannot be retrieved, Aspose.HTML throws an exception before calling `HandleResource`. | You can catch the exception at `doc.Save` and log the missing asset. | +| **Custom naming** | Override `Resource.Name` inside `HandleResource` to rename files before they enter the ZIP. | Useful when you need SEO‑friendly filenames or want to strip query strings. | + +Nếu bạn muốn lưu tài nguyên lên Azure Blob Storage thay vì bộ nhớ, chỉ cần thay dòng `return new MemoryStream();` bằng code trả về một stream được hỗ trợ bởi SDK của đám mây. + +--- + +## Những Cạm Bẫy Thường Gặp & Cách Tránh + +1. **Quên đặt `SaveFormat.Zip`** – Aspose.HTML mặc định xuất ra thư mục. Luôn đặt `saveOptions.SaveFormat = SaveFormat.Zip;`. +2. **Thư mục đầu ra không tồn tại** – `doc.Save` sẽ không tự tạo thư mục cha. Hãy dùng `Directory.CreateDirectory(Path.GetDirectoryName(outputPath));` trước khi lưu. +3. **Handler trả về stream đã đóng** – Stream phải ở trạng thái mở và có thể ghi; nếu không, ZIP sẽ bị hỏng. +4. **Tài liệu lớn làm cạn kiệt bộ nhớ** – Đối với các site khổng lồ, cân nhắc stream trực tiếp tới một file stream trong handler thay vì `MemoryStream`. + +--- + +## Mở Rộng Giải Pháp: Từ Bộ Nhớ lên Đám Mây + +Giả sử bạn muốn **save html zip** trực tiếp lên một bucket AWS S3. Thay thế handler bằng đoạn code như sau: + +```csharp +class S3Handler : ResourceHandler +{ + private readonly AmazonS3Client _client; + private readonly string _bucket; + private readonly string _keyPrefix; + + public S3Handler(AmazonS3Client client, string bucket, string keyPrefix = "") + { + _client = client; + _bucket = bucket; + _keyPrefix = keyPrefix; + } + + public override Stream HandleResource(Resource resource) + { + // Create a stream that uploads directly to S3. + var request = new PutObjectRequest + { + BucketName = _bucket, + Key = $"{_keyPrefix}/{resource.Name}", + InputStream = new MemoryStream() + }; + _client.PutObjectAsync(request).Wait(); + return request.InputStream; + } +} +``` + +Bây giờ lệnh `doc.Save` sẽ đẩy mỗi file ngay vào S3, và ZIP cuối cùng có thể được lắp ráp sau bằng multipart upload của AWS SDK. Điều này cho thấy **tính linh hoạt** của **custom resource handler**—bạn kiểm soát toàn bộ cơ chế lưu trữ từ đầu đến cuối. + +--- + +## Ví Dụ Hoàn Chỉnh (Sẵn Sàng Sao Chép) + +```csharp +using System; +using System.IO; +using Aspose.Html; +using Aspose.Html.Rendering; +using Aspose.Html.Storage; + +class MyHandler : ResourceHandler +{ + public override Stream HandleResource(Resource resource) + { + // All resources go into a fresh memory stream. + return new MemoryStream(); + } +} + +class Program +{ + static void Main() + { + // 1️⃣ Build the HTML document. + HTMLDocument doc = new HTMLDocument( + "" + + "

Hello, World!

This page is packaged inside a ZIP.

" + ); + + // 2️⃣ Prepare save options with our custom handler. + HtmlSaveOptions saveOptions = new HtmlSaveOptions + { + OutputStorage = new MyHandler(), + SaveFormat = SaveFormat.Zip + }; + + // 3️⃣ Define the output path (ensure the folder exists). + string outputPath = Path.Combine(Environment.CurrentDirectory, "output.zip"); + Directory.CreateDirectory(Path.GetDirectoryName(outputPath)); + + // 4️⃣ Save – the ZIP will contain index.html and any linked resources. + doc.Save(outputPath, saveOptions); + + Console.WriteLine($"✅ HTML ZIP created at: {outputPath}"); + } +} +``` + +Chạy chương trình (`dotnet run`), và bạn sẽ thấy xác nhận ✅. Mở `output.zip` bằng bất kỳ trình quản lý archive nào—bạn sẽ có một trang HTML hoạt động đầy đủ, sẵn sàng cho việc sử dụng ngoại tuyến. + +--- + +## Tổng Quan Trực Quan + +![Diagram showing custom resource handler flow for exporting HTML to a ZIP archive](image.png) + +*Alt text: Diagram showing custom resource handler flow for exporting HTML to a ZIP archive* +*Bản dịch: Sơ đồ mô tả luồng custom resource handler để xuất HTML thành một gói ZIP.* + +Hình minh họa trên mô tả luồng dữ liệu: **HTMLDocument → Custom Resource Handler → Memory Streams → ZIP packaging**. + +--- + +## Kết Luận + +Chúng ta vừa đi qua mọi thứ cần thiết để **custom resource handler** cách bạn tạo ra một giải pháp **create html zip** trong C#. Bằng cách triển khai một subclass nhỏ của `ResourceHandler`, cấu hình `HtmlSaveOptions`, và gọi `doc.Save`, bạn đã có thể kiểm soát hoàn toàn quá trình lưu trữ. + +## Bạn Nên Học Gì Tiếp Theo? + +Các tutorial sau đây liên quan chặt chẽ và mở rộng các kỹ thuật đã trình bày trong hướng dẫn này. Mỗi tài nguyên đều bao gồm mã mẫu đầy đủ và giải thích từng bước để giúp bạn làm chủ thêm các tính năng API và khám phá các cách triển khai thay thế trong dự án của mình. + +- [How to Save HTML in C# – Complete Guide Using a Custom Resource Handler](/html/english/net/working-with-html-documents/how-to-save-html-in-c-complete-guide-using-a-custom-resource/) +- [Create HTML from String in C# – Custom Resource Handler Guide](/html/english/net/html-document-manipulation/create-html-from-string-in-c-custom-resource-handler-guide/) +- [How to Zip HTML in C# – Save HTML to Zip](/html/english/net/html-extensions-and-conversions/how-to-zip-html-in-c-save-html-to-zip/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file