Skip to content

RozhakDev/Web2Image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web2Image

Web2Image adalah ekstensi browser berbasis Chrome yang memungkinkan pengguna mengambil screenshot full page dari halaman web aktif dengan kualitas tinggi, kemudian mengekspornya sebagai PNG atau menyalinnya langsung ke clipboard.

Dirancang sebagai solusi ringan dan efisien untuk menangkap seluruh konten halaman — termasuk bagian yang tidak terlihat di viewport.

✨ Features

  • Full page screenshot (auto scroll)
  • Smart handling untuk elemen fixed & sticky
  • Output resolusi tinggi (HD, tidak pecah)
  • Export ke PNG
  • Copy langsung ke clipboard
  • Proses cepat dengan offscreen rendering

🧱 Tech Stack

  • JavaScript (Vanilla + Chrome Extension API)
  • React (Popup UI)
  • Offscreen API (Canvas stitching)
  • Chrome Tabs & Scripting API

⚙️ How It Works

  1. User klik tombol capture dari popup UI
  2. Extension inject script ke halaman aktif
  3. Halaman dipersiapkan:
    • Disable scroll
    • Ubah elemen fixed & sticky
  4. Halaman di-scroll otomatis per viewport
  5. Setiap bagian di-capture menggunakan captureVisibleTab
  6. Semua potongan gambar digabung di offscreen canvas
  7. Hasil akhir:
    • Diunduh sebagai PNG
    • atau disalin ke clipboard

🚀 Usage

  1. Buka halaman web yang ingin di-capture

  2. Klik extension Web2Image

  3. Pilih aksi:

    • Unduh PNG
    • Salin ke Clipboard
  4. Tunggu proses selesai

⚠️ Limitations

  • Halaman dengan lazy loading berat mungkin butuh delay tambahan
  • Animasi/dynamic content bisa menyebabkan hasil tidak konsisten
  • Hanya bekerja pada tab aktif

🧪 Development Notes

  • Capture dilakukan secara bertahap dengan scrolling manual
  • Stitching dilakukan menggunakan offscreen document untuk performa optimal
  • State capture dikontrol untuk mencegah proses ganda

📌 Future Improvements

  • Export ke PDF
  • Region / partial capture
  • Custom delay & resolution settings
  • Support multiple tabs / batch capture

📄 License

MIT License

Built with focus on performance, simplicity, and real-world usability.

About

Chrome extension for capturing full-page screenshots with auto-scroll and high-resolution output.

Topics

Resources

License

Stars

Watchers

Forks

Contributors