Xin chào tất cả mọi người, sau đây vẫn là chuyên mục chạy KPI forum và cũng nhân tiện chia sẻ về một thư viện mà mình(em) khá tâm đắc mà như tiêu đề bài viết đã đề cập đến. Nếu cảm thấy hay thì mọi người hãy cho em 1 like, 1 subscribe nhé. Còn nếu không hay thì cũng phải like và subscribe nhé ạ.
I. Thư viện này làm gì ?
- Thư viện này đơn giản là chuyển thể giao diện được render ra từ html, css thành dạng ảnh.
II. Thư viện này dùng thế nào ?
- Link thư viện vào dự án (Có thể link bằng link CDN hoặc cop luôn source code của thư viện cho nó chiến ^^)
- Đoạn code dưới sẽ trả ra cho chúng ta ảnh chụp giao diện đoạn code dưới dạng base64
html2canvas($("#element").then(canvas => {
let url_thumbnail = canvas.toDataURL();
});
III. Những vấn đề với html2canvas
- Cách sử dụng thì nó cũng chỉ có thế thôi, nghe thật đơn giản đúng không ạ ? nhưng lúc bắt tay vào làm thực tế với thư viện này chúng ta mới phát sinh ra nhiều vấn đề (join Yoseka để trải nghiệm những nỗi đau này -.-!!). Và sau một quá trình khá lâu làm việc với thư viện này thì mình cũng rút ra được một số "bug" và cách để giải quyết nó chia sẻ với mọi người. Như sau:
1) Html2canvas không support với một số thuộc tính css như sau:
(Cái này thì chịu không có cách khắc phục rồi ạ =))))
2) Html2canvas không chụp được sự xuống dòng tự động khi văn bản quá dài và nó sẽ chụp thành một dòng
*Cách khắc phục: tạo một thẻ div (Hay bất kì thẻ block nào) với width bằng đúng thẻ nhập văn bản của mình (VD: textarea, ...), lấy text từ textarea append lại vào cái thẻ div đấy rồi thực hiện chụp là chúng ta có thể chụp được với những đoạn văn bản xuống dòng.
3) Html2canvas chụp được thẻ input những nội dung sẽ bị đẩy lên trên sát outline của thẻ input thay vì ở giữa thẻ input như những gì chúng ta thấy.
*Cách khắc phục: vẫn là tạo một thẻ div huyền thoại với chiều cao và chiều rộng y chang cái input đó. css cho thẻ div đấy các thuộc tính {display: flex; align-item: center; justify-content: center} rồi append value của input đó vào là chúng ta đã có thể chụp ảnh được chuẩn rồi!!
4) Html2canvas trên một số phiên bản ios có hiện tượng chụp hình nhưng không chụp được các thẻ <img />.
*Cách khắc phục: chụp ảnh 2 lần, lần một chụp nhử, lần 2 chụp thật như bên dưới (Cảm ơn a Long nhiều vì pha support này)
html2canvas($("#edit_creen .content_main")[0]).then(canvas => {
html2canvas($("#edit_creen .content_main")[0]).then(canvas => {
let url_thumbnail = canvas.toDataURL();
});
});
5) ### Html2canvas có thể chụp ảnh video, nếu mọi người gặp phải vấn đề chụp ảnh không chụp được video (Thực ra cái này mình cũng chưa biết nguyên nhân tại sao)
*Cách khắc phục: thì mọi người có thể chụp trước ảnh của mình thẻ video đó, xong đó append ảnh của video đó thế vào chỗ của thẻ video và chụp ảnh như bình thường.
IV.Kết bài
- Tóm lại thì cá nhân em thấy thư viện này là một thư viện khá hay và thú vị trong việc chụp ảnh giao diện đoạn code và thực sự nó giúp tiết kiệm rất nhiều thời gian xử lý cho một số spec cụ thể (Ví dụ như spec chụp ảnh thiệp khi nội dung thiệp thay đổi).Nhưng bên cạnh sự tiện lợi đó thì có một số vấn đề như trên có vấn đề khắc phục được có vấn đề thì phải chấp nhận phải như thế. Vì vậy mọi người hãy cân nhắc kĩ khi sử dụng thư viện này.
- Hi vọng bài viết này sẽ có ích cho mọi người trong tương lai. Cảm ơn mọi người đã đọc bài <3
- link: https://html2canvas.hertzen.com/
*** Yoseka hân hạnh tài trợ bài viết này ******
