Hướng dẫn javascript take screenshot of desktop - javascript chụp ảnh màn hình máy tính để bàn

Tôi muốn biết nếu có thể chụp ảnh màn hình của máy tính để bàn của máy khách từ trong một ứng dụng web dựa trên JavaScript. Tôi muốn cung cấp cho người dùng một nút trong ứng dụng mà họ có thể sử dụng để chụp ảnh màn hình màn hình máy tính để bàn của họ (không phải trang hoặc các phần tử trong trang, màn hình OS Desktop thực tế).

Liệu các trình duyệt chính (Chrome và Firefox) có cho phép loại hoạt động này không? Tôi biết rằng có thể có những lo ngại về bảo mật, nhưng tôi có thể xin phép người dùng có loại quyền truy cập này không? Có bất kỳ libs, công cụ hoặc tài liệu nào có thể giúp tôi với điều đó? Hay điều này chỉ là không khả thi?

Tôi đã thực hiện một số nghiên cứu về chủ đề này nhưng chỉ tìm thấy các phương pháp để chụp ảnh màn hình nội dung trong trình duyệt.

Đã hỏi ngày 18 tháng 10 năm 2017 lúc 11:36Oct 18, 2017 at 11:36

1

Vâng, nó cho phép làm điều đó. Tôi không biết đó có phải là một cách tốt để bắt đầu nhưng bạn có thể kiểm tra một ứng dụng nguồn mở thực hiện công việc.

Đây là nguồn ứng dụng điều khiển từ xa crom. Bạn có thể tìm thấy các đoạn mã chụp màn hình. Tôi muốn nghe từ bạn nếu bạn hoàn thành công việc.

Liên kết ứng dụng điều khiển từ xa crom

Đã trả lời ngày 18 tháng 10 năm 2017 lúc 12:06Oct 18, 2017 at 12:06

Bạn chỉ có thể chụp hình ảnh hoặc khung video dưới dạng ảnh chụp màn hình bằng cách sử dụng vải. Nhưng nếu bạn muốn chụp phần tử cụ thể trên trang web, hãy thử thư viện này: html2canvas

Đây là mã:

Lưu ý: Điều chỉnh kích thước một cách cẩn thận trong hàm ORAPIMAGE ()

$(".drag").draggable();
$(".drag").droppable();
var takeScreenShot = function() {
    html2canvas(document.getElementById("container"), {
        onrendered: function (canvas) {
            var tempcanvas=document.createElement('canvas');
            tempcanvas.width=350;
            tempcanvas.height=350;
            var context=tempcanvas.getContext('2d');
            context.drawImage(canvas,112,0,288,200,0,0,350,350);
            var link=document.createElement("a");
            link.href=tempcanvas.toDataURL('image/jpg');   //function blocks CORS
            link.download = 'screenshot.jpg';
            link.click();
        }
    });
}

#container{
    width:400px;
    height:200px;
}
#rightcontainer{
    width:300px;
    height:200px;
    background:gray;
    color:#fff;
    margin-left:110px;
    padding:10px;
}
#leftmenu{
    color:#fff;
    background-color:green;
    width:100px;
    height:200px;
    position:fixed;
    left:0;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}
.drag{
  width:40px;
  height:20px;
  background-color:blue;
  z-index:100000;
  margin-top:10px;
}

  
  
Snapshot

    

      Left Side
      

      
      

      
      

      
      Drag----------->
            &
      Click Snapshot
    
    

        Right Side
    

Đã trả lời ngày 18 tháng 10 năm 2017 lúc 11:50Oct 18, 2017 at 11:50

KarthikkarthikKarthik

Huy hiệu đồng 1421 Bạc9 Huy hiệu Đồng1 silver badge9 bronze badges

1

Chụp ảnh màn hình trong trình duyệt (hoặc 'phía khách hàng') là tất cả về sự đánh đổi-không có giải pháp hoàn hảo cho mọi tình huống. Chúng ta hãy xem ba cách khác nhau mà bạn có thể chụp ảnh màn hình và sau đó làm thế nào bạn có thể sử dụng chúng bằng cách gửi chúng đến máy chủ hoặc để người dùng tải xuống hình ảnh.

Ảnh chụp màn hình có thể là một phần rất có giá trị và quan trọng trong ứng dụng JavaScript của bạn. Các công ty như Google sử dụng chúng để nhận phản hồi từ người dùng, các sản phẩm như Bugherd sử dụng ảnh chụp màn hình như một phần cốt lõi của sản phẩm của họ và họ rất tuyệt vời để tạo xuất khẩu dữ liệu (như biểu đồ).

Yêu cầu người dùng chụp ảnh màn hình về những gì họ đang xem giới thiệu rất nhiều ma sát. Đầu tiên, họ cần biết phím tắt bàn phím (khác với MacOS đến Windows).

Sau đó, họ cần biết phải làm gì với nó. Ví dụ: họ có thể tải nó lên một nơi nào đó như Dropbox hoặc gửi email cho bạn. Hầu hết người dùng có thể sẽ không biết cách thay đổi kích thước hoặc tối ưu hóa chất lượng của ảnh chụp màn hình. Nếu bạn đang tự lưu trữ các ảnh chụp màn hình, bạn muốn chắc chắn rằng chúng chiếm ít không gian nhất có thể, điều này đảm bảo bạn chi tiêu ít nhất có thể.

Dưới đây là ba cách bạn có thể tự động chụp ảnh màn hình cho người dùng của mình:

1. Sử dụng HTML2Canvas cho ảnh chụp màn hình phía máy khách

Niklas von Hertzen đã trả lời một câu hỏi Stackoverflow vào năm 2011 nói rằng có thể đặt DOM của trang vào một khung vẽ HTML và sử dụng nó để tạo ảnh chụp màn hình. Sau khi anh ta công khai mã, anh ta đã cập nhật câu trả lời của mình với ý tưởng ban đầu đó là HTML2Canvas. Điều tra sau đó cho thấy Google sử dụng một kỹ thuật rất giống nhau để tự động tạo ảnh chụp màn hình của người dùng cung cấp phản hồi, chứng minh thang đo triển khai và đủ mạnh mẽ cho các sản phẩm lớn.

Cách sử dụng HTML2Canvas

Ý tưởng này khá đơn giản - bạn chụp được DOM (HTML của trang) khi bạn muốn tạo ảnh chụp màn hình và bạn chuyển DOM đó vào một bức tranh HTML. Trong một số hạn chế nhất định, phần tử Canvas có thể tạo URI dữ liệu của nội dung bên trong (dưới dạng chuỗi cơ sở64). Ví dụ dưới đây tạo ra một ảnh chụp màn hình và mở nó trong cửa sổ dưới dạng hình ảnh.

const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
    const base64image = canvas.toDataURL("image/png");
    window.location.href = base64image;
});

Ưu/nhược điểm của phương pháp Canvas

Ưu điểm

Nhanh chóng - bạn không cần phải chờ đợi bất kỳ dịch vụ bên ngoài nào, điều này được thực hiện trên máy khách được cập nhật - trong khi HTML2CAVNA không được cập nhật hàng ngày, nó thường thấy các bản cập nhật và sửa chữa mỗi vài tháng phổ biến - cộng đồng mạnh mẽ và hoạt động, ở đó là hơn 40 yêu cầu kéo mở và 600 vấn đề được ghi lại (tính đến tháng 7 năm 2020). Có những câu hỏi thường xuyên (và câu trả lời!) Trên Stack Overflow.

Nhược điểm

Không hỗ trợ Shadow DOM hoặc các thành phần web - có một yêu cầu kéo mở để thêm hỗ trợ và có vẻ như người bảo trì rất muốn làm cho nó được hợp nhất. , bảng kiểu, v.v.), chúng tuân theo các chính sách CORS giống như các yêu cầu bình thường.

Không hỗ trợ mọi thuộc tính CSS - các thuộc tính được thêm và cấu hình thủ công, vì vậy phạm vi bảo hiểm 100% là khó khăn. Tài liệu nêu rõ "HTML2Canvas sẽ không bao giờ có hỗ trợ CSS đầy đủ" .Fragile để cập nhật - HTML2Canvas có thể mong manh để cập nhật trình duyệt, thỉnh thoảng phá vỡ chức năng hiện có.

2. Tạo ảnh chụp màn hình với GetDisplayMedia

Cũng trong khoảng thời gian mà HTML2Canvas đã được phát hành, ý tưởng rằng web có thể hỗ trợ cuộc gọi video bản địa đang nhận được rất nhiều lực kéo. Năm 2011, Google đã phát hành Hangouts, một nền tảng video và âm thanh thời gian thực. Để hỗ trợ hangout, Google đưa ra ý tưởng (và một số triển khai) của giao tiếp thời gian thực (RTC) mà sau đó đã được phát triển thành WEBRTC. WEBRTC đã trở thành một tiêu chuẩn trong tất cả các trình duyệt hiện đại và đó là cơ sở hạ tầng cung cấp cho Web các video thời gian thực, âm thanh và truyền thông dữ liệu.

Một phần của WEBRTC là GetDisplayMedia - được sử dụng làm API chia sẻ màn hình. Bạn có thể chụp ảnh tĩnh từ video, như chia sẻ màn hình, về cơ bản trở thành ảnh chụp màn hình. Hãy xem xét một ví dụ cơ bản:

const capture = async () => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  const video = document.createElement("video");

  try {
    const captureStream = await navigator.mediaDevices.getDisplayMedia();
    video.srcObject = captureStream;
    context.drawImage(video, 0, 0, window.width, window.height);
    const frame = canvas.toDataURL("image/png");
    captureStream.getTracks().forEach(track => track.stop());
    window.location.href = frame;
  } catch (err) {
    console.error("Error: " + err);
  }
};

capture();

Mặc dù ví dụ trên không nhỏ như lần đầu tiên, nhưng vẫn tương đối dễ dàng để làm theo những gì đang xảy ra. Thứ nhất, các phần tử Canvas và Video được tạo trong bộ nhớ, sau đó

getDisplayMedia

API được sử dụng để yêu cầu quyền truy cập vào máy tính để bàn hoặc tab của người dùng. Sau khi người dùng cấp quyền, luồng màn hình được đặt thành phần tử video và được vẽ vào khung vẽ. Một hình ảnh được trích xuất từ ​​khung vẽ bằng phương pháp tương tự như được mô tả trong ví dụ HTML2Canvas ở trên.

Ưu/nhược điểm của API GetDisplayMedia

Ưu điểm

Hỗ trợ trình duyệt hiện đại tốt - Đó là API gốc, có nghĩa là nó được tích hợp sẵn cho các trình duyệt hiện đại, không cần bất kỳ tập lệnh hoặc mã của bên thứ ba nào.

Có thể mở rộng - bạn có thể dễ dàng thêm hỗ trợ cho quay video trong tương lai, sử dụng cùng một APIPixel Perfect - đó chính xác là những gì người dùng đang thấy - you can easily add support for video recording in the future, using the same APIPixel perfect - it's exactly what the user is seeing

Desktop hoặc Tab - API GetDisplayMedia có thể ghi lại cửa sổ máy tính để bàn hoặc trình duyệt - làm cho nó tuyệt vời để chụp ảnh màn hình của một cái gì đó khác ngoài ứng dụng của bạn. - the getDisplayMedia API can record either the desktop or a browser window - making it great for taking a screenshot of something other than your application.

Nhược điểm

Quyền - Bạn cần nhận quyền từ người dùng để ghi lại. Tùy thuộc vào trình duyệt, đối thoại quyền có thể trông khác nhau và đôi khi có thể gây nhầm lẫn. - you need to get permissions from the user to record. Depending on the browser, the permissions dialogue can look different and can sometimes be confusing.

Chậm - bởi vì bạn cần được phép, người dùng có thể mất một thời gian để nhấp vào Chấp nhận và hiểu những gì đang xảy ra. Nếu người dùng cần ảnh chụp màn hình ngay lập tức, thì độ trễ lạnh tương tác UI này nắm bắt được một số nội dung nhạy cảm với thời gian. - because you need to get permission, it can take the user a while to click accept and understand what is happening. If the user needs a screenshot instantly, this little UI interaction cold delay capturing some time-sensitive content.

3. Ảnh chụp màn hình như một dịch vụ

Các dịch vụ chụp màn hình đang ngày càng phổ biến vì chúng cung cấp một cách dễ dàng để tích hợp ảnh chụp màn hình vào ứng dụng hiện tại của bạn. Mặc dù không phải là phía máy khách, nhưng sử dụng dịch vụ chụp màn hình như URL2PNG, Stillio hoặc Urlbox có nghĩa là bạn không cần quản lý bất kỳ cơ sở hạ tầng nào chụp ảnh màn hình.

Mặc dù việc thực hiện có thể khác nhau trên mỗi dịch vụ, ý tưởng chung là như nhau. Bạn gửi URL (và các tham số có thể tùy chỉnh như kích thước, định dạng và chất lượng) đến dịch vụ bên ngoài và chờ phản hồi hoặc lắng nghe phản hồi ở nơi khác. Điều này thường được xử lý với dịch vụ phụ trợ, vì vậy hãy xem bằng cách sử dụng url2png và nodejs và express:

const url2png = require('url2png')('API_KEY', 'PRIVATE_KEY');
const fs = require('fs');

app.get('/screenshot', (req, res) => {
	url2png.readURL(req.query.url, {}).pipe(fs.createWriteStream('screenshot.png'));
	res.json({success: true})
});

Ví dụ trên có một yêu cầu như

 /screenshot?url=http://google.com.au

và sau đó sử dụng thư viện URL2PNG để tạo ảnh chụp màn hình. Ảnh chụp màn hình đó sau đó được lưu vào hệ thống tập tin cục bộ - hoặc bạn có thể trả lại nó trong yêu cầu.

Ưu/nhược điểm của việc sử dụng dịch vụ ảnh chụp màn hình

Ưu điểm

Hỗ trợ trình duyệt hiện đại tốt - Đó là API gốc, có nghĩa là nó được tích hợp sẵn cho các trình duyệt hiện đại, không cần bất kỳ tập lệnh hoặc mã của bên thứ ba nào. - services can handle post processing too, offering the flexibility to generate images in different file types, sizes, quality and more.

Có thể mở rộng - bạn có thể dễ dàng thêm hỗ trợ cho quay video trong tương lai, sử dụng cùng một APIPixel Perfect - đó chính xác là những gì người dùng đang thấy - the services are used by many people and facilitate large volumes of requests.Infrastructure - you don't need to maintain the infrastructure to manage the process of taking a screenshot. If you're happy to, projects like PhantomJS and services like SauceLabs are a good place to start.

Nhược điểm

Quyền - Bạn cần nhận quyền từ người dùng để ghi lại. Tùy thuộc vào trình duyệt, đối thoại quyền có thể trông khác nhau và đôi khi có thể gây nhầm lẫn. - the screenshot might not be what the user sees. For example, if the user has interacted with the page, or if they're authenticated, the screenshot service won't be able to render the same page for a screenshot.

Chậm - bởi vì bạn cần được phép, người dùng có thể mất một thời gian để nhấp vào Chấp nhận và hiểu những gì đang xảy ra. Nếu người dùng cần ảnh chụp màn hình ngay lập tức, thì độ trễ lạnh tương tác UI này nắm bắt được một số nội dung nhạy cảm với thời gian. - out of the three options, this is the only one that comes with a cost. Although it's quite cheap, if you're handling large volumes of screenshots, it could be expensive.

3. Ảnh chụp màn hình như một dịch vụ - screenshot services can take multiple minutes to generate and return an image.

Các dịch vụ chụp màn hình đang ngày càng phổ biến vì chúng cung cấp một cách dễ dàng để tích hợp ảnh chụp màn hình vào ứng dụng hiện tại của bạn. Mặc dù không phải là phía máy khách, nhưng sử dụng dịch vụ chụp màn hình như URL2PNG, Stillio hoặc Urlbox có nghĩa là bạn không cần quản lý bất kỳ cơ sở hạ tầng nào chụp ảnh màn hình.

Mặc dù việc thực hiện có thể khác nhau trên mỗi dịch vụ, ý tưởng chung là như nhau. Bạn gửi URL (và các tham số có thể tùy chỉnh như kích thước, định dạng và chất lượng) đến dịch vụ bên ngoài và chờ phản hồi hoặc lắng nghe phản hồi ở nơi khác. Điều này thường được xử lý với dịch vụ phụ trợ, vì vậy hãy xem bằng cách sử dụng url2png và nodejs và express:

Ví dụ trên có một yêu cầu như

và sau đó sử dụng thư viện URL2PNG để tạo ảnh chụp màn hình. Ảnh chụp màn hình đó sau đó được lưu vào hệ thống tập tin cục bộ - hoặc bạn có thể trả lại nó trong yêu cầu.pixel-perfect representation of what your user is looking at and don't mind the sometimes obtuse permissions popup, the getDisplayMedia API is a good place to start.

Nếu bạn muốn chụp ảnh màn hình bán chính xác một cách nhanh chóng mà không có sự phụ thuộc dịch vụ bên ngoài, HTML2Canvas có thể là lựa chọn phù hợp cho bạn.semi-accurate screenshots quickly with no external service dependency, html2canvas could be the right choice for you.

Cuối cùng, nếu bạn ổn với việc thuê ngoài triển khai kỹ thuật và chi phí liên quan đến nó, dịch vụ chụp màn hình có thể là lựa chọn tốt nhất.outsourcing the technical implementation and the cost associated with it, a screenshot service might be the best option.

ĐANG TẢI. . . Nhận xét và nhiều hơn nữa!
. . . comments & more!

Tôi có thể chụp ảnh màn hình với JavaScript không?

Làm thế nào để bạn chụp ảnh màn hình trong HTML?

Làm thế nào để bạn chụp ảnh màn hình toàn bộ màn hình trong phần tử kiểm tra?

Làm cách nào để chụp ảnh màn hình của một trang web cuộn?