zumerlab/snapdom

🚀 SnapDOM: Động cơ chụm DOM tốc độ cao, thay thế html2canvas

SnapDOM là phiên bản thay thế hiện đại, nhanh hơn của html2canvas và dom-to-image, biến bất kỳ phần tử DOM nào thành hình ảnh hoặc định dạng tùy chỉnh qua plugin.

SnapDOM là một DOM Capture Engine (Động cơ chụm DOM) tiên phong, được thiết kế để thay thế các thư viện như html2canvas, dom-to-image và html-to-image. Dự án tự động nhân lên bởi Zumer Lab, giải quyết nhu cầu chụm màn hình các phần tử DOM phức tạp với hiệu suất cao và hỗ trợ đầy đủ CSS như pseudo-elements, fonts, counter(), line-clamp và cả same-origin iframe.

✨ Điểm nổi bật

• Chụm DOM đầy đủ: Sao chép toàn bộ cây DOM bao gồm Shadow DOM và iframe cùng nguồn gốc.
• Hỗ trợ CSS phong phú: Xử lý ::before, ::after, counter(), counters(), line-clamp và font nhúng @font-face.
• Đa dạng định dạng xuất: Xuất ra SVG, PNG, JPG, WebP, canvas, Blob hoặc kích hoạt tải xuống trực tiếp.
• Tốc độ cực nhanh: Không phụ thuộc bên ngoài, chỉ sử dụng chuẩn Web APIs.
• Kiến trúc plugin linh hoạt: Hỗ trợ hook beforeSnap, beforeClone, afterClone, beforeRender, afterRender, beforeExport, afterExport.
• Tái sử dụng kết quả: Một lần clone, xuất ra nhiều định dạng khác nhau (toPng, toSvg, download...).
• Hỗ trợ CDN và npm: Cung cấp bản dựng ESM (tree-shakeable) và IIFE (dùng thẳng trong script tag).
• Tài liệu chi tiết: Cung cấp tài liệu đầy đủ tại snapdom.dev/docs.

💡 Vì sao đáng chú ý

SnapDOM nổi bật so với các giải pháp truyền thống như html2canvas nhờ quy trình xử lý rõ ràng với 6 giai đoạn: Clone → Styles & Pseudo → Images & Backgrounds → Fonts → SVG foreignObject → Export. Điều này giúp duy trì độ trung thự (fidelity) cao khi chuyển đổi DOM sang hình ảnh, đồng thời tối ưu hiệu suất bằng cách tách biệt quá trình xử lý và xuất file. Phù hợp cho các ứng dụng cần chụm giao diện người dùng phức tạp như báo cáo, chia sẻ mạng xã hội hoặc lưu trữ thiết kế.

#SnapDOM #DOMCapture #html2canvas #WebAPIs #OpenSource #TiniX