Chào mừng bạn đến với hướng dẫn và ví dụ về cách chụp ảnh màn hình bằng Javascript. Vì vậy, bạn có một dự án nào đó cần thực hiện ảnh chụp màn hình. Có thể đối với báo cáo lỗi tự động, vì vậy người dùng không phải thực hiện tất cả các phím tắt điên rồ đó, dán hình ảnh, lưu và gửi email
Một cách dễ dàng để chụp ảnh màn hình trong Javascript là sử dụng thư viện html2canvas
8function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
9function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
0function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
1function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
2function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
0function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
Đó là tất cả, nhưng hãy đọc tiếp để biết thêm ví dụ
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
- Chỉ là một lời nhắc nhanh để sử dụng
1 chứ không phảifunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
2function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
ẢNH CHỤP MÀN HÌNH JAVASCRIPT
Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về cách chụp ảnh màn hình trong Javascript
VÍ DỤ 1] CHỤP MÀN HÌNH & LƯU
1A] HTML
1 lần lưu. html
TEST
Dummy Text - Change and see how it captures below!
Không có gì đặc biệt ở đây thực sự. Chỉ cần một số yếu tố giả để làm việc với ảnh chụp màn hình
1B] JAVASCRIPT
1 lần lưu. html
function capture [] {
html2canvas[document.body].then[[canvas] => {
let a = document.createElement["a"];
a.download = "ss.png";
a.href = canvas.toDataURL["image/png"];
a.click[]; // MAY NOT ALWAYS WORK!
}];
}
Yep, cái này giống hệt như đoạn trích trong phần giới thiệu. Một vài lưu ý thêm mặc dù
- Ngoài
3, chúng ta cũng có thể đặt thànhfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
4 hoặcfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
5.function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
6 là một số từ 0 đến 1, 0 là thấp nhất và 1 là cao nhấtfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
7 có thể không phải lúc nào cũng vì những hạn chế về bảo mật. Tốt nhất là chỉ nối liên kết này trên trang và cho phép người dùng nhấp theo cách thủ công để lưu ảnh chụp màn hìnhfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
VÍ DỤ 2] CHỤP MÀN HÌNH VÀ TẢI LÊN MÁY CHỦ
2A] HTML
2a-tải lên. html
function capture [] {
html2canvas[document.body].then[[canvas] => {
let a = document.createElement["a"];
a.download = "ss.png";
a.href = canvas.toDataURL["image/png"];
a.click[]; // MAY NOT ALWAYS WORK!
}];
}
0Trong ví dụ này, chúng tôi sẽ thay đổi mọi thứ một chút. Như bạn có thể thấy, chúng tôi không còn chụp toàn bộ trang mà chỉ chụp phần
function capture [] {
html2canvas[document.body].then[[canvas] => {
let a = document.createElement["a"];
a.download = "ss.png";
a.href = canvas.toDataURL["image/png"];
a.click[]; // MAY NOT ALWAYS WORK!
}];
}
8
2B] BẢN JAVASCRIPT
2a-tải lên. html
function capture [] {
html2canvas[document.body].then[[canvas] => {
let a = document.createElement["a"];
a.download = "ss.png";
a.href = canvas.toDataURL["image/png"];
a.click[]; // MAY NOT ALWAYS WORK!
}];
}
2
9 sẽ chụp toàn bộ trang, vì vậyfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
00 sẽ chỉ chụp phầnfunction capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
8function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
- Hiện chúng tôi đang tải hình ảnh lên máy chủ bằng cách sử dụng
02, thay vì cung cấp tính năng “lưu dưới dạng”function capture [] { html2canvas[document.body].then[[canvas] => { let a = document.createElement["a"]; a.download = "ss.png"; a.href = canvas.toDataURL["image/png"]; a.click[]; // MAY NOT ALWAYS WORK! }]; }
2C] KẾ HOẠCH PHÍA MÁY CHỦ
2b-tải lên. php
function capture [] {
html2canvas[document.body].then[[canvas] => {
let a = document.createElement["a"];
a.download = "ss.png";
a.href = canvas.toDataURL["image/png"];
a.click[]; // MAY NOT ALWAYS WORK!
}];
}
7Cái này bằng PHP, nhưng bạn có thể “dịch” nó sang bất kỳ ngôn ngữ nào khác mà bạn đang sử dụng. Chỉ cần lưu ảnh chụp màn hình đã tải lên vào một tệp, đó là tất cả. Bạn thậm chí có thể gửi email nếu bạn muốn
BIT & LIÊN KẾT HỮU ÍCH
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
LIÊN KẾT và THAM KHẢO
- HTML2Canvas – GitHub
- Canvas tới URL dữ liệu – MDN
- Bạn cũng cần nắm bắt các lỗi Javascript?
- Ví dụ trên CodePen – Ảnh chụp màn hình Javascript
KIỂM TRA TÍNH TƯƠNG THÍCH
- Chức năng mũi tên – CanIUse
- Canvas – CanIUse
Những ví dụ này sẽ hoạt động trên mọi trình duyệt Hạng A hiện đại
BẢNG CHIA SẺ THÔNG TIN
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc