1. Produk
  2.   Gambar
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

API Pencitraan Node.js Gratis untuk Mengonversi HTML ke Gambar

Pustaka Pemrosesan Gambar Node.js Sumber Terbuka Sepenuhnya Mendukung Pemuatan dan Konversi Gambar, Pengembang dapat Mengubah Konten HTML menjadi Gambar (JPEG, PNG, GIF) di dalam Aplikasi Node.js.

Dalam dunia pengembangan web yang berubah dengan cepat, kemampuan untuk mengubah HTML menjadi gambar membuka dunia kemungkinan kreatif. Baik itu membuat grafik media sosial, membuat laporan visual, atau mendesain konten khusus untuk email, mengubah HTML menjadi gambar dapat menyederhanakan banyak proses. Pustaka Node-HTML-to-Image adalah alat sumber terbuka yang memungkinkan pengembang untuk melakukan hal itu, menyediakan cara mudah untuk membuat gambar dari HTML menggunakan Node.js. Pengembang perangkat lunak dapat membuat visual yang memukau, membuat gambar mini, dan bahkan mengotomatiskan tugas yang memerlukan pembuatan gambar. Ada beberapa fitur penting yang menjadi bagian dari pustaka, seperti pembuatan gambar baru, memuat HTML dari sumber eksternal dan mengubahnya menjadi gambar, menambahkan CSS dan JavaScript khusus, membuat beberapa gambar sekaligus, dan sebagainya.

Pustaka Node-HTML-to-Image sangat mudah digunakan dan memungkinkan pengembang perangkat lunak untuk memuat dan mengubah string atau file HTML menjadi gambar berkualitas tinggi hanya dengan beberapa baris kode. Dikembangkan oleh Frinyvonnick, pustaka ini memanfaatkan kekuatan Headless Chromium melalui pustaka Puppeteer untuk merender HTML dan CSS menjadi gambar PNG, JPEG, atau bahkan WebP. Hal ini memungkinkan pengembang untuk membuat gambar yang menangkap kompleksitas visual HTML secara penuh, termasuk dukungan untuk CSS modern, font, dan bahkan eksekusi JavaScript. Anda dapat menyesuaikan output dengan menentukan opsi seperti kualitas gambar, lebar, dan tinggi. Selain itu, pengguna dapat mengekstrak gambar dari halaman web, yang memungkinkan mereka untuk membangun aplikasi web scraping yang canggih. Dengan fleksibilitas, kemampuan penyesuaian, dan kemudahan penggunaannya, tidak mengherankan mengapa pengembang berbondong-bondong menggunakan pustaka ini.

Previous Next

Memulai dengan Node-HTML-to-Image

Cara yang direkomendasikan untuk menginstal Node-HTML-to-Image adalah menggunakan NPM. Gunakan perintah berikut untuk instalasi yang lancar.

Instal Node-HTML-ke-Gambar melalui NPM

npm install node-html-to-image

Instal Node-HTML-ke-Gambar melalui Yarn

yarn add node-html-to-image

Pembuatan Gambar dari Kode HTML di dalam Node.js

Salah satu kelebihan utama pustaka Node-HTML-to-Image adalah kesederhanaannya dan dapat dengan mudah diintegrasikan dengan aplikasi Node.js mana pun. Hanya dengan beberapa baris kode, pengembang perangkat lunak dapat mulai membuat gambar dari konten HTML di dalam aplikasi Node.js mereka sendiri. Kemudahan penggunaan ini membuatnya dapat diakses oleh pengembang dari semua tingkat keterampilan. Dalam contoh berikut, pustaka mengambil string HTML sederhana dan mengubahnya menjadi gambar PNG. Gambar keluaran, image.png, disimpan di direktori root.

Bagaimana Cara Membuat Gambar PNG dari HTML di dalam Aplikasi Node.js?

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

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

Dukungan HTML dan CSS yang Kompleks

Node-HTML-to-Image sumber terbuka tidak terbatas pada pemrosesan HTML dasar. Node-HTML-to-Image dapat menangani dokumen HTML yang kompleks dengan gaya CSS yang ekstensif serta JavaScript. Baik Anda menggunakan fitur CSS modern seperti Flexbox atau Grid, atau menyematkan font khusus, pustaka tersebut akan secara akurat merender konten Anda ke dalam format file gambar seperti JPEG, PNG, WebP, dan masih banyak lagi. Berikut adalah contoh yang menunjukkan bagaimana pengembang dapat menghasilkan gambar dari tata letak HTML yang lebih kompleks, termasuk gaya untuk Flexbox dan warna khusus, sehingga menghasilkan gambar yang dirancang dengan baik.

Bagaimana Cara Membuat Gambar Dari Kode HTML yang Lebih Kompleks di Aplikasi 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!'));

Format Gambar Output yang Dapat Disesuaikan

Pustaka Node-HTML-to-Image mendukung beberapa format gambar output, termasuk PNG, JPEG, dan WebP. Fleksibilitas ini memungkinkan Anda memilih format terbaik untuk kasus penggunaan spesifik Anda, baik untuk kinerja web maupun kualitas gambar. Berikut adalah contoh yang menunjukkan bagaimana pengguna dapat menentukan output sebagai gambar JPEG, yang dapat berguna untuk skenario di mana ukuran file perlu diminimalkan tanpa terlalu mengorbankan kualitas.

Bagaimana Cara Menentukan Format Gambar Output ke JPEG saat Konversi HTML ke Gambar di Node.js?

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

Dukungan Rendering Gambar Lanjutan di Node.js

Pustaka Node-HTML-to-Image telah menyediakan dukungan lengkap untuk menyesuaikan proses rendering secara ekstensif. Pengembang perangkat lunak dapat menentukan ukuran viewport, faktor skala perangkat, dan bahkan menyuntikkan CSS dan JavaScript khusus ke dalam HTML sebelum melakukan rendering. Contoh berikut menunjukkan bagaimana gambar dirender dengan ukuran viewport khusus 800x600 piksel, dan kualitasnya ditetapkan ke 100, untuk memastikan kualitas gambar setinggi mungkin.

Bagaimana Cara Merender Gambar dengan Ukuran dan Kualitas Viewport Kustom di dalam Aplikasi 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!'));
 Indonesia