واجهة برمجة تطبيقات Node.js Imaging المجانية لتحويل HTML إلى صورة

مكتبة معالجة الصور مفتوحة المصدر Node.js تدعم بشكل كامل تحميل الصور وتحويلها، ويمكن للمطورين تحويل محتوى HTML إلى صور (JPEG، PNG، GIF) داخل تطبيقات Node.js.

في عالم تطوير الويب المتغير بسرعة، تفتح القدرة على تحويل HTML إلى صور عالمًا من الإمكانات الإبداعية. سواء كان الأمر يتعلق بإنشاء رسومات الوسائط الاجتماعية أو إنشاء تقارير مرئية أو تصميم محتوى مخصص للبريد الإلكتروني، فإن تحويل HTML إلى صور يمكن أن يبسط العديد من العمليات. مكتبة Node-HTML-to-Image هي أداة مفتوحة المصدر تمكن المطورين من القيام بذلك تمامًا، وتوفر طريقة مباشرة لإنشاء صور من HTML باستخدام Node.js. يمكن لمطوري البرامج إنشاء صور مذهلة وإنشاء صور مصغرة وحتى أتمتة المهام التي تتطلب إنشاء الصور. هناك العديد من الميزات المهمة التي تشكل جزءًا من المكتبة، مثل إنشاء صور جديدة وتحميل HTML من مصدر خارجي وتحويله إلى صورة وإضافة CSS وJavaScript مخصصين وإنشاء صور متعددة في وقت واحد وما إلى ذلك.

تعتبر مكتبة Node-HTML-to-Image سهلة الاستخدام بشكل لا يصدق وتسمح لمطوري البرامج بتحميل وتحويل سلاسل أو ملفات HTML إلى صور عالية الجودة باستخدام بضعة أسطر فقط من التعليمات البرمجية. تم تطوير هذه المكتبة بواسطة Frinyvonnick، وهي تستفيد من قوة Headless Chromium من خلال مكتبة Puppeteer لتحويل HTML وCSS إلى صور PNG أو JPEG أو حتى WebP. يتيح هذا للمطورين إنشاء صور تلتقط التعقيد البصري الكامل لـ HTML، بما في ذلك دعم CSS الحديث والخطوط وحتى تنفيذ JavaScript. يمكنك تخصيص الناتج عن طريق تحديد خيارات مثل جودة الصورة والعرض والارتفاع. علاوة على ذلك، يمكن للمستخدمين استخراج الصور من صفحات الويب، مما يسمح لهم ببناء تطبيقات كشط ويب قوية. بفضل مرونتها وإمكانية تخصيصها وسهولة استخدامها، فلا عجب أن يتدفق المطورون على هذه المكتبة.

نظرة عامة

نظرة عامة على ميزات Node-HTML-to-Image.

نظرة عامة على الميزات

تحويل HTML إلى صورة
تحميل الصورة
تكبير الصورة
تدوير الصورة
تغيير حجم الصور
تخصيص الصور
قص على لوحة الرسم
قص على المتصفح
ترجمة معلومات EXIF
دعم المتصفحات المتعددة

Node-HTML-to-Image

يدعم Node-HTML-to-Image تنسيقات ملفات الصور الشائعة المدرجة أدناه.

قارئ

JPG, JPEG, PNG, TIFF, BMP

الكاتب

JPG, JPEG, PNG, TIFF, BMP

Node-HTML-to-Image

استقلال المنصة

يمكن استخدام Node-HTML-to-Image في بيئات متعددة مثل Node أو المتصفحات وما إلى ذلك.

JavaScript

Node-HTML-to-Image

البدء باستخدام Node-HTML-to-Image

الطريقة الموصى بها لتثبيت Node-HTML-to-Image هي استخدام NPM. يرجى استخدام الأمر التالي لتثبيت سلس.

تثبيت Node-HTML-to-Image عبر NPM

npm install node-html-to-image

Install Node-HTML-to-Image via Yarn

yarn add node-html-to-image

إنشاء الصور من كود HTML داخل Node.js

تتمثل إحدى نقاط القوة الرئيسية لمكتبة Node-HTML-to-Image في بساطتها، فضلاً عن إمكانية دمجها بسهولة مع أي تطبيق Node.js. فباستخدام بضعة أسطر فقط من الكود، يمكن لمطوري البرامج البدء في إنشاء الصور من محتوى HTML داخل تطبيقات Node.js الخاصة بهم. وهذا السهولة في الاستخدام تجعلها في متناول المطورين من جميع مستويات المهارة. في المثال التالي، تأخذ المكتبة سلسلة HTML بسيطة وتحولها إلى صورة PNG. يتم حفظ الصورة الناتجة، image.png، في الدليل الجذر.

كيفية إنشاء صورة PNG من HTML داخل تطبيقات Node.js؟

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './image.png',
  html: 'Hello, World!'
})
  .then(() => console.log('Image created successfully!'));

دعم HTML وCSS المعقد

لا يقتصر برنامج Node-HTML-to-Image مفتوح المصدر على معالجة HTML الأساسية. فهو قادر على التعامل مع مستندات HTML المعقدة ذات التصميم الموسع لـ CSS بالإضافة إلى JavaScript. سواء كنت تستخدم ميزات CSS الحديثة مثل Flexbox أو Grid، أو تقوم بتضمين خطوط مخصصة، فإن المكتبة ستعرض المحتوى الخاص بك بدقة في تنسيقات ملفات الصور مثل JPEG وPNG وWebP وغير ذلك الكثير. فيما يلي مثال يوضح كيف يمكن للمطورين إنشاء صورة من تخطيط HTML أكثر تعقيدًا، بما في ذلك أنماط Flexbox والألوان المخصصة، مما ينتج عنه صورة مصممة بشكل جيد.

كيفية إنشاء صورة من كود HTML أكثر تعقيدًا في تطبيقات Node.js؟

const nodeHtmlToImage = require('node-html-to-image');

const htmlContent = `

  
    
      
        Welcome to My Website
        Building the web, one pixel at a time.
      
    
  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

تنسيقات الصور الناتجة القابلة للتخصيص

تدعم مكتبة Node-HTML-to-Image تنسيقات صور ناتجة متعددة، بما في ذلك PNG وJPEG وWebP. تتيح لك هذه المرونة اختيار أفضل تنسيق لحالة الاستخدام الخاصة بك، سواء كان ذلك لأداء الويب أو جودة الصورة. فيما يلي مثال يوضح كيف يمكن للمستخدمين تحديد الإخراج كصورة JPEG، وهو ما قد يكون مفيدًا في السيناريوهات التي يلزم فيها تقليل حجم الملف دون التضحية بالجودة بشكل كبير.

كيفية تحديد تنسيق الصورة الناتجة إلى JPEG أثناء تحويل HTML إلى صورة في Node.js؟

nodeHtmlToImage({
  output: './output-image.jpg',
  html: 'JPEG Image Example',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

دعم عرض الصور المتقدم في Node.js

وفرت مكتبة Node-HTML-to-Image دعمًا كاملاً لتخصيص عملية العرض على نطاق واسع. يمكن لمطوري البرامج تحديد حجم منفذ العرض وعامل مقياس الجهاز وحتى حقن CSS وJavaScript مخصصين في HTML قبل العرض. يوضح المثال التالي كيفية عرض الصورة بحجم منفذ عرض مخصص يبلغ 800 × 600 بكسل، ويتم ضبط الجودة على 100، مما يضمن أعلى جودة ممكنة للصورة.

كيفية عرض الصور بحجم وجودة Viewport مخصصين داخل تطبيقات Node.js؟

nodeHtmlToImage({
  output: './custom-image.png',
  html: 'Custom Viewport',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));