CLASSFUNC BLOG

We Share Our Knowledge
Site Search

screenshot element

phinv54 ✍︎︎ 20-09-2020

Chụp ảnh màn hình element với html2canvas + file-saver B1: cài đặt thư viện

yarn add html2canvas file-saver

JavaScript :

html2canvas(document.querySelector("#capture")).then(canvas => {
    const dataUrl = canvas.toDataURL("image/png")
     FileSaver.saveAs(dataUrl,"capture.png")
});

Lưu ý: div được chụp phải đang được hiển thị trên màn hình. ( nếu scroll qua thì sẽ ko chụp chính xác được. lỗi này đang có ở phiên bản mới nhất - fix: down version to : "html2canvas": "^0.5.0-alpha")

xem thêm tại : https://html2canvas.hertzen.com/