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

• 8

• 9

• 0

• 1

• 2

• 0

Đó 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ải
  2

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

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ành
  4 hoặc
  5.
  6 là một số từ 0 đến 1, 0 là thấp nhất và 1 là cao nhất

• 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ình

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

Trong 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

2B) BẢN JAVASCRIPT

2a-tải lên. html

• 9 sẽ chụp toàn bộ trang, vì vậy
  00 sẽ chỉ chụp phần
  8
• 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”

2C) KẾ HOẠCH PHÍA MÁY CHỦ

2b-tải lên. php

Cá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

Mã cho ảnh chụp màn hình là gì?

Ảnh chụp màn hình HTML là gì?

3 cách để chụp ảnh màn hình là gì?

Làm cách nào để chụp ảnh màn hình trong JavaScript?