إن إنتاجك هو صورة (PNG/JPEG/WebP) بدلا من عرض PDF أو صفحة، بعض أنماط CSS المستهدفة تجعل الفرق الكبير: مقياس الصور بأمان، والحفاظ على اللوحات متسخة، وإعداد التصنيف الذي لا يزال قابلا للقراءة بعد التخطيط. Aspose.HTML for .NET,، يمكنك التحكم في كل من CSS والخط التحويل من خلال ImageSaveOptions للحصول على نتائج موثوقة.

Key Takeaways

  • تفضيل CSS الاستجابة: img{max-width:100%;height:auto} و table{table-layout:fixed} مع عرض واضح.
  • استخدام ImageSaveOptions لتحديد DPI, حجم الصفحة / margin, نوع وسائل الإعلام (Screen vs Print)، و الناتج شكل.
  • للطاولات الكثيفة، تطبيق border-collapse,- التخفيف من الوقود والوقود لتجنب التخفيف.
  • الحفاظ على الخطوط متسقة واختبار في آخر DPI تخطط للتصدير.

خطوة بخطوة دليل

1) Load the HTML document

تحميل من ملف للإنتاج، أو تشكيل من شريط للاختبارات السريعة. قاعدة URI لذلك يتم حل الأصول النسبية (CSS / الصور).

// Load an HTML file
using var document = new Aspose.Html.HTMLDocument("./sample.html");

// Or create from a string with a base URI
string html = "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Styled Render</title>" +
              "<style>/* minimal defaults for image rendering */" +
              "html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#222}" +
              "img{max-width:100%;height:auto;display:block}" +
              "table{width:100%;border-collapse:collapse;table-layout:fixed}" +
              "th,td{border:1px solid #ddd;padding:6px 8px;vertical-align:top;word-wrap:break-word}" +
              "caption{caption-side:top;font-weight:bold;margin:6px 0}" +
              "@media print{body{font-size:12pt}}" +
              "</style></head><body>" +
              "<h1>Invoice</h1>" +
              "<img src=\"./assets/logo.png\" alt=\"Company logo\" style=\"width:240px\">" +
              "<table><caption>Items</caption><tr><th>Item</th><th>Qty</th><th>Price</th></tr>" +
              "<tr><td>Widget A very long text that will wrap</td><td>5</td><td>$12.00</td></tr>" +
              "<tr><td>Widget B</td><td>2</td><td>$9.50</td></tr></table>" +
              "</body></html>";
using var inlineDoc = new Aspose.Html.HTMLDocument(html, ".");

2) Configure rendering for images

إعداد DPI، والصفحة الهندسة، ووسائل CSS، وتصميم الصورة المستهدفة من خلال ImageSaveOptions.

using Aspose.Html.Drawing;
using Aspose.Html.Rendering;
using Aspose.Html.Rendering.Image;
var options = new Aspose.Html.Saving.ImageSaveOptions(Aspose.Html.Rendering.Image.ImageFormat.Png)
{
    UseAntialiasing = true
};
options.HorizontalResolution = 300; // print-quality DPI
options.VerticalResolution   = 300;
options.Css.MediaType        = Aspose.Html.Rendering.MediaType.Screen; // or Print

// Page setup — render as A4 with 10 mm margins
var mm = Aspose.Html.Drawing.Length.FromMillimeters;
options.PageSetup.AnyPage = new Aspose.Html.Drawing.Page(
    new Aspose.Html.Drawing.Size(mm(210), mm(297)),
    new Aspose.Html.Drawing.Margin(mm(10), mm(10), mm(10), mm(10))
);

3) Render to an image file

Aspose.Html.Converters.Converter.ConvertHTML(inlineDoc, options, "out/styled.png");

نموذج كامل C# Code

using System;
using System.IO;
using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Saving;
using Aspose.Html.Rendering;        // MediaType
using Aspose.Html.Rendering.Image;  // ImageFormat
using Aspose.Html.Drawing;          // Length, Size, Margin, Page

namespace AsposeHtmlStylingForImages
{
    internal static class Program
    {
        // How to run:
        // 1) dotnet new console -n AsposeHtmlStylingForImages
        // 2) cd AsposeHtmlStylingForImages
        // 3) dotnet add package Aspose.HTML
        // 4) Replace Program.cs with this file's contents
        // 5) dotnet run -- "path-to-input.html"   (argument optional)
        private static void Main(string[] args)
        {
            string outDir = Path.Combine(Directory.GetCurrentDirectory(), "out");
            Directory.CreateDirectory(outDir);

            HTMLDocument document;
            if (args.Length > 0 && File.Exists(args[0]))
            {
                document = new HTMLDocument(args[0]);
            }
            else
            {
                // Inline demo HTML with sensible defaults for image rendering
                string html = "<!DOCTYPE html>" +
                              "<html><head><meta charset=\\\"utf-8\\\"><title>Styled Image Render</title>" +
                              "<style>html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#222}" +
                              "img{max-width:100%;height:auto;display:block}" +
                              "table{width:100%;border-collapse:collapse;table-layout:fixed}" +
                              "th,td{border:1px solid #ddd;padding:6px 8px;vertical-align:top;word-wrap:break-word}" +
                              "caption{caption-side:top;font-weight:bold;margin:6px 0}" +
                              "h1{margin:12px 0}" +
                              "@media print{body{font-size:12pt}}" +
                              "</style></head><body>" +
                              "<h1>Styled Render</h1>" +
                              "<img src=\\\"./assets/photo.jpg\\\" alt=\\\"Sample photo\\\" style=\\\"width:320px\\\">" +
                              "<table><caption>Summary</caption><tr><th>Column A</th><th>Column B</th></tr>" +
                              "<tr><td>Long cell content that wraps nicely in fixed layout tables.</td><td>42</td></tr></table>" +
                              "</body></html>";
                document = new HTMLDocument(html, ".");
            }

            using (document)
            {
                // PNG at 300 DPI (screen CSS)
                var png = new ImageSaveOptions(ImageFormat.Png) { UseAntialiasing = true };
                png.HorizontalResolution = 300; png.VerticalResolution = 300; png.Css.MediaType = MediaType.Screen;
                var mm = Length.FromMillimeters;
                png.PageSetup.AnyPage = new Page(new Size(mm(210), mm(297)), new Margin(mm(10), mm(10), mm(10), mm(10)));
                string pngPath = Path.Combine(outDir, "styled.png");
                Converter.ConvertHTML(document, png, pngPath);
                Console.WriteLine($"Saved: {pngPath}");

                // JPEG at 150 DPI (print CSS)
                var jpg = new ImageSaveOptions(ImageFormat.Jpeg);
                jpg.HorizontalResolution = 150; jpg.VerticalResolution = 150; jpg.Css.MediaType = MediaType.Print;
                jpg.PageSetup.AnyPage = png.PageSetup.AnyPage; // reuse geometry
                string jpgPath = Path.Combine(outDir, "styled.jpg");
                Converter.ConvertHTML(document, jpg, jpgPath);
                Console.WriteLine($"Saved: {jpgPath}");
            }
        }
    }
}

كيفية الركض

  1. dotnet new console -n AsposeHtmlStylingForImages
  2. cd AsposeHtmlStylingForImages
  3. dotnet add package Aspose.HTML
  4. استبدال Program.cs مع الرمز أعلاه
  5. dotnet run -- "path-to-input.html"

إعادة التأهيل - يرجى التعامل مع القضايا التالية: الأخطاء (يجب تصحيحها): 1.مربع الأمامية ‘seoTitle’ تم اكتشافه على أنها ‘نعم’ (الثقة 86٪)، المتوقع ‘أ’.مشاهدة: ‘HTML Rendering: Aspose.HTML Styling Guide’ المصدر النص: نصائح التصميم للصور crisp

  • صور:* دائماً يحدد max-width:100% و height:auto.استخدم مصادر عالية الدقة للطباعة DPI.
  • طاولات: ترتيب ثابت ، وتدهور الحدود ، وتخفيف التمدد يمنع التدفق الزائد ويحافظ على خطوط الشبكة حادة.
  • النص: حجم الاختبار عند الهدف DPI ؛ تفضل المقاييس الشائعة sans-serif للقياسات المتوقعة.
  • قواعد وسائل الإعلام:التبديل بين Screen و Print CSS لتناسب وجهتك.

FAQ

س: كيف يمكنني تطبيق CSS المخصص دون تحرير ملف HTML؟? إمضغى أ <style> قفل من خلال تركيبة الحبل (كما هو موضح أعلاه) أو استضافة ملف CSS وإشارته مع <link> علامة؛ تأكد من أن أساس الوثيقة URI نقطة إلى المجلد الذي يحتوي عليه.

Q2: ما هي أقراص DPI التي يجب أن أستخدمها؟? 96–150 for screens; 300 for print. Higher DPI increases file size and render time.

Q3: هل يمكنني تصديرها إلى WebP أو TIFF؟? نعم - استخدام new ImageSaveOptions(ImageFormat.Webp) أو ImageFormat.Tiff اعتمادا على احتياجات التسليم الخاصة بك.

س4: لماذا تبدو حدود الطاولة مضحكة؟? ضمان border-collapse:collapse,تجنب البكسل CSS الفصيلة، وتقديمها على DPI التي تتوافق مع الاستخدام المستهدف الخاص بك.

س5: كيف يمكنني تجنب الخطوط المفقودة؟? حزمة الخطوط آمنة أو مدمجة عبر @font-face URLs التي هي متاحة إلى renderer؛ التحقق من غلاف الجليف.

استنتاجات

من خلال الجمع بين CSS نظيفة ومرضية مع ImageSaveOptions (DPI، وسائل الإعلام، هندسة الصفحة)، يمكنك إنتاج حادة، قابلة للتنبؤ HTML صورة اختبار على DPI المستهدف الخاص بك وتطوير قواعد الجدول والنص حتى يتم قراءة جيدا في حجم بيتمب النهائي.

More in this category