使用 HTML5 / Canvas / JavaScript 获取浏览器屏幕截图

Google 的 “报告错误” 或 “反馈工具” 可让您选择浏览器窗口的某个区域，以创建提交的屏幕截图，其中包含有关错误的反馈。

Google反馈工具截图 _{Jason Small 截图，发布在一个重复的问题。}

他们是怎么做到的？谷歌的 JavaScript 反馈 API 从此处加载，他们对反馈模块的概述将演示屏幕截图功能。

答案

JavaScript 可以读取 DOM 并使用canvas呈现相当准确的表示形式。我一直致力于将 HTML 转换为画布图像的脚本。今天决定将其实施发送给您描述的反馈。

该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于 DOM，因此它可能不是真实表示的 100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

它不需要来自服务器的任何渲染 ，因为整个图像是在客户端的浏览器上创建的。 HTML2Canvas 脚本本身仍处于非常实验性的状态，因为它几乎不解析我想要的 CSS3 属性，即使代理可用，也没有任何支持加载 CORS 图像。

仍然非常有限的浏览器兼容性（不是因为更多不能支持，只是没有时间使其更多支持跨浏览器）。

编辑 html2canvas 脚本现在可单独提供，此处提供一些示例。

编辑 2另一个确认谷歌使用非常类似的方法（事实上，基于文档，唯一的主要区别是他们的异步遍历 / 绘图方法）可以在 Google 翻译团队的 Elliott Sprehn 的演示文稿中找到： http： //www.elliottsprehn.com/preso/fluentconf/

您的网络应用现在可以使用getUserMedia()获取客户端整个桌面的 “原生” 屏幕截图：

看看这个例子：

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

客户端必须使用 chrome（现在）并且需要在 chrome：// flags 下启用屏幕捕获支持。

正如Niklas 所说，您可以使用html2canvas库在浏览器中使用 JS 截取屏幕截图。我将通过提供使用此库截取屏幕截图的示例来扩展他的答案：

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>

在获取图像作为数据 URI 之后onrendered report()函数中，您可以将其显示给用户并允许他通过鼠标绘制 “bug 区域”，然后将屏幕截图和区域坐标发送到服务器。

在这个例子中，做了 async/await版本：带有漂亮的makeScreenshot()函数。

UPDATE

简单的例子，它允许你截取屏幕截图，选择区域，描述 bug 和发送 POST 请求（这里是 jsfiddle ）（主要功能是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>