Sử dụng HTML5 / Canvas / JavaScript để chụp ảnh màn hình trong trình duyệt

"Báo cáo lỗi" hoặc "Công cụ phản hồi" của Google cho phép bạn chọn một khu vực trong cửa sổ trình duyệt của mình để tạo ảnh chụp màn hình được gửi cùng với phản hồi của bạn về lỗi.

_{Ảnh chụp màn hình của Jason Small, được đăng trong một câu hỏi trùng lặp .}

Làm thế nào họ làm điều này? API phản hồi JavaScript của Google được tải từ đây và tổng quan về mô-đun phản hồi của họ sẽ thể hiện khả năng chụp màn hình.

JavaScript có thể đọc DOM và hiển thị một cách thể hiện khá chính xác bằng cách sử dụng canvas. Tôi đã làm việc với một kịch bản chuyển đổi HTML thành một hình ảnh canvas. Hôm nay quyết định thực hiện nó để gửi phản hồi như bạn mô tả.

Tập lệnh cho phép bạn tạo các biểu mẫu phản hồi bao gồm ảnh chụp màn hình, được tạo trên trình duyệt của khách hàng, cùng với biểu mẫu. Ảnh chụp màn hình dựa trên DOM và như vậy có thể không chính xác 100% với đại diện thực vì nó không tạo ảnh chụp màn hình thực tế, nhưng xây dựng ảnh chụp màn hình dựa trên thông tin có sẵn trên trang.

Nó không yêu cầu bất kỳ kết xuất nào từ máy chủ , vì toàn bộ hình ảnh được tạo trên trình duyệt của máy khách. Bản thân tập lệnh HTML2Canvas vẫn ở trạng thái thử nghiệm, vì nó không phân tích gần như nhiều thuộc tính CSS3 mà tôi muốn, cũng như không có bất kỳ hỗ trợ nào để tải hình ảnh CORS ngay cả khi có proxy.

Khả năng tương thích trình duyệt vẫn còn khá hạn chế (không phải vì không thể hỗ trợ nhiều hơn, chỉ là không có thời gian để làm cho trình duyệt chéo được hỗ trợ nhiều hơn).

Để biết thêm thông tin, hãy xem các ví dụ ở đây:

http://hertzen.com/experiment/jsfeedback/

chỉnh sửa Tập lệnh html2canvas hiện có sẵn riêng ở đây và một số ví dụ ở đây .

chỉnh sửa 2 Một xác nhận khác rằng Google sử dụng một phương pháp rất giống nhau (trên thực tế, dựa trên tài liệu, sự khác biệt lớn duy nhất là phương pháp di chuyển / vẽ không đồng bộ của họ) có thể được tìm thấy trong bản trình bày này bởi Elliott Sprehn từ nhóm Google Feedback: http: //www.elliottsprehn.com/preso/fluentconf/

Ứng dụng web của bạn giờ đây có thể chụp ảnh màn hình 'gốc' của toàn bộ máy tính để bàn của khách hàng bằng cách sử dụng getUserMedia():

Hãy xem ví dụ này:

https://www.webrtc-experiment.com/Pluginfree-Screen-Shared/

Máy khách sẽ phải sử dụng chrome (hiện tại) và sẽ cần bật hỗ trợ chụp màn hình dưới chrome: // flags.

Như Niklas đã đề cập, bạn có thể sử dụng thư viện html2canvas để chụp ảnh màn hình bằng cách sử dụng JS trong trình duyệt. Tôi sẽ mở rộng câu trả lời của anh ấy trong điểm này bằng cách cung cấp một ví dụ về chụp ảnh màn hình bằng thư viện này:

function report() {
  let region = document.querySelector("body"); // whole screen
  html2canvas(region, {
    onrendered: function(canvas) {
      let pngUrl = canvas.toDataURL(); // png in dataURL format
      let img = document.querySelector(".screen");
      img.src = pngUrl; 

      // here you can allow user to set bug-region
      // and send it with 'pngUrl' to server
    },
  });
}

.container {
  margin-top: 10px;
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

<div class="container">
  <img width="75%" class="screen">
</div>

Trong report()chức năng onrenderedsau khi lấy hình ảnh dưới dạng URI dữ liệu, bạn có thể hiển thị nó cho người dùng và cho phép anh ta vẽ "vùng lỗi" bằng chuột và sau đó gửi ảnh chụp màn hình và tọa độ vùng tới máy chủ.

Trong ví dụ này async/await phiên bản đã được thực hiện: với makeScreenshot()chức năng tốt đẹp .

CẬP NHẬT

Ví dụ đơn giản cho phép bạn chụp ảnh màn hình, chọn vùng, mô tả lỗi và gửi yêu cầu POST ( ở đây là jsfiddle ) (chức năng chính là report()).

async function report() {
    let screenshot = await makeScreenshot(); // png dataUrl
    let img = q(".screen");
    img.src = screenshot; 
    
    let c = q(".bug-container");
    c.classList.remove('hide')
        
    let box = await getBox();    
    c.classList.add('hide');

    send(screenshot,box); // sed post request  with bug image, region and description
    alert('To see POST requset with image go to: chrome console > network tab');
}

// ----- Helper functions

let q = s => document.querySelector(s); // query selector helper
window.report = report; // bind report be visible in fiddle html

async function  makeScreenshot(selector="body") 
{
  return new Promise((resolve, reject) => {  
    let node = document.querySelector(selector);
    
    html2canvas(node, { onrendered: (canvas) => {
        let pngUrl = canvas.toDataURL();      
        resolve(pngUrl);
    }});  
  });
}

async function getBox(box) {
  return new Promise((resolve, reject) => {
     let b = q(".bug");
     let r = q(".region");
     let scr = q(".screen");
     let send = q(".send");
     let start=0;
     let sx,sy,ex,ey=-1;
     r.style.width=0;
     r.style.height=0;
     
     let drawBox= () => {
         r.style.left   = (ex > 0 ? sx : sx+ex ) +'px'; 
         r.style.top    = (ey > 0 ? sy : sy+ey) +'px';
         r.style.width  = Math.abs(ex) +'px';
         r.style.height = Math.abs(ey) +'px'; 
     }
     
     
     
     //console.log({b,r, scr});
     b.addEventListener("click", e=>{
       if(start==0) {
         sx=e.pageX;
         sy=e.pageY;
         ex=0;
         ey=0;
         drawBox();
       }
       start=(start+1)%3;  		
     });
     
     b.addEventListener("mousemove", e=>{
       //console.log(e)
       if(start==1) {
           ex=e.pageX-sx;
           ey=e.pageY-sy
           drawBox(); 
       }
     });
     
     send.addEventListener("click", e=>{
       start=0;
       let a=100/75 //zoom out img 75%       
       resolve({
          x:Math.floor(((ex > 0 ? sx : sx+ex )-scr.offsetLeft)*a),
          y:Math.floor(((ey > 0 ? sy : sy+ey )-b.offsetTop)*a),
          width:Math.floor(Math.abs(ex)*a),
          height:Math.floor(Math.abs(ex)*a),
          desc: q('.bug-desc').value
          });
          
     });
  });
}

function send(image,box) {

    let formData = new FormData();
    let req = new XMLHttpRequest();
    
    formData.append("box", JSON.stringify(box)); 
    formData.append("screenshot", image);     
    
    req.open("POST", '/upload/screenshot');
    req.send(formData);
}

.bug-container { background: rgb(255,0,0,0.1); margin-top:20px; text-align: center; }
.send { border-radius:5px; padding:10px; background: green; cursor: pointer; }
.region { position: absolute; background: rgba(255,0,0,0.4); }
.example { height: 100px; background: yellow; }
.bug { margin-top: 10px; cursor: crosshair; }
.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<body>
<div>Screenshot tester</div>
<button onclick="report()">Report bug</button>

<div class="example">Lorem ipsum</div>

<div class="bug-container hide">
  <div>Select bug region</div>
  <div class="bug">    
    <img width="75%" class="screen" >
    <div class="region"></div> 
  </div>
  <div>
    <textarea class="bug-desc">Describe bug here...</textarea>
  </div>
  <div class="send">SEND BUG</div>
</div>

</body>

Nhận ảnh chụp màn hình dưới dạng Canvas hoặc Jpeg Blob / ArrayBuffer bằng API getDisplayMedia :

// docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
// see: https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/#20893521368186473
// see: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Pluginfree-Screen-Sharing/conference.js

function getDisplayMedia(options) {
    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
        return navigator.mediaDevices.getDisplayMedia(options)
    }
    if (navigator.getDisplayMedia) {
        return navigator.getDisplayMedia(options)
    }
    if (navigator.webkitGetDisplayMedia) {
        return navigator.webkitGetDisplayMedia(options)
    }
    if (navigator.mozGetDisplayMedia) {
        return navigator.mozGetDisplayMedia(options)
    }
    throw new Error('getDisplayMedia is not defined')
}

function getUserMedia(options) {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        return navigator.mediaDevices.getUserMedia(options)
    }
    if (navigator.getUserMedia) {
        return navigator.getUserMedia(options)
    }
    if (navigator.webkitGetUserMedia) {
        return navigator.webkitGetUserMedia(options)
    }
    if (navigator.mozGetUserMedia) {
        return navigator.mozGetUserMedia(options)
    }
    throw new Error('getUserMedia is not defined')
}

async function takeScreenshotStream() {
    // see: https://developer.mozilla.org/en-US/docs/Web/API/Window/screen
    const width = screen.width * (window.devicePixelRatio || 1)
    const height = screen.height * (window.devicePixelRatio || 1)

    const errors = []
    let stream
    try {
        stream = await getDisplayMedia({
            audio: false,
            // see: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/video
            video: {
                width,
                height,
                frameRate: 1,
            },
        })
    } catch (ex) {
        errors.push(ex)
    }

    try {
        // for electron js
        stream = await getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    // chromeMediaSourceId: source.id,
                    minWidth         : width,
                    maxWidth         : width,
                    minHeight        : height,
                    maxHeight        : height,
                },
            },
        })
    } catch (ex) {
        errors.push(ex)
    }

    if (errors.length) {
        console.debug(...errors)
    }

    return stream
}

async function takeScreenshotCanvas() {
    const stream = await takeScreenshotStream()

    if (!stream) {
        return null
    }

    // from: https://stackoverflow.com/a/57665309/5221762
    const video = document.createElement('video')
    const result = await new Promise((resolve, reject) => {
        video.onloadedmetadata = () => {
            video.play()
            video.pause()

            // from: https://github.com/kasprownik/electron-screencapture/blob/master/index.js
            const canvas = document.createElement('canvas')
            canvas.width = video.videoWidth
            canvas.height = video.videoHeight
            const context = canvas.getContext('2d')
            // see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
            context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
            resolve(canvas)
        }
        video.srcObject = stream
    })

    stream.getTracks().forEach(function (track) {
        track.stop()
    })

    return result
}

// from: https://stackoverflow.com/a/46182044/5221762
function getJpegBlob(canvas) {
    return new Promise((resolve, reject) => {
        // docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
        canvas.toBlob(blob => resolve(blob), 'image/jpeg', 0.95)
    })
}

async function getJpegBytes(canvas) {
    const blob = await getJpegBlob(canvas)
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader()

        fileReader.addEventListener('loadend', function () {
            if (this.error) {
                reject(this.error)
                return
            }
            resolve(this.result)
        })

        fileReader.readAsArrayBuffer(blob)
    })
}

async function takeScreenshotJpegBlob() {
    const canvas = await takeScreenshotCanvas()
    if (!canvas) {
        return null
    }
    return getJpegBlob(canvas)
}

async function takeScreenshotJpegBytes() {
    const canvas = await takeScreenshotCanvas()
    if (!canvas) {
        return null
    }
    return getJpegBytes(canvas)
}

function blobToCanvas(blob, maxWidth, maxHeight) {
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = function () {
            const canvas = document.createElement('canvas')
            const scale = Math.min(
                1,
                maxWidth ? maxWidth / img.width : 1,
                maxHeight ? maxHeight / img.height : 1,
            )
            canvas.width = img.width * scale
            canvas.height = img.height * scale
            const ctx = canvas.getContext('2d')
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height)
            resolve(canvas)
        }
        img.onerror = () => {
            reject(new Error('Error load blob to Image'))
        }
        img.src = URL.createObjectURL(blob)
    })
}

BẢN GIỚI THIỆU:

// take the screenshot
var screenshotJpegBlob = await takeScreenshotJpegBlob()

// show preview with max size 300 x 300 px
var previewCanvas = await blobToCanvas(screenshotJpegBlob, 300, 300)
previewCanvas.style.position = 'fixed'
document.body.appendChild(previewCanvas)

// send it to the server
let formdata = new FormData()
formdata.append("screenshot", screenshotJpegBlob)
await fetch('https://your-web-site.com/', {
    method: 'POST',
    body: formdata,
    'Content-Type' : "multipart/form-data",
})

Đây là một ví dụ sử dụng: getDisplayMedia

document.body.innerHTML = '<video style="width: 100%; height: 100%; border: 1px black solid;"/>';

navigator.mediaDevices.getDisplayMedia()
.then( mediaStream => {
  const video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = e => {
    video.play();
    video.pause();
  };
})
.catch( err => console.log(`${err.name}: ${err.message}`));

Cũng đáng kiểm tra là các tài liệu API chụp màn hình .