首页 文章

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

提问于
浏览
822

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

Google Feedback Tool Screenshot
截图Jason Small,发表在一个重复的问题 .

他们是怎么做到的? Google的JavaScript反馈API从here加载,their overview of the feedback module将演示屏幕截图功能 .

3 回答

  • 1033

    作为Niklas mention,您可以使用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>
    

    在_134256_函数中 onrendered 获取图像作为数据后,您可以将其显示给用户并允许他通过鼠标绘制"bug region"然后将屏幕截图和区域坐标发送到服务器 .

    this example async/await 版本中制作:具有漂亮的 makeScreenshot() 功能 .

  • 57

    您的网络应用现在可以使用 getUserMedia() 获取客户端整个桌面的'native'屏幕截图:

    看看这个例子:

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

    客户端必须使用chrome(现在)并且需要在chrome:// flags下启用屏幕捕获支持 .

  • 16

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

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

    does not require any rendering from the server ,因为整个图像是在客户端的浏览器上创建的 . HTML2Canvas脚本本身仍然处于非常实验状态,因为它几乎不解析我想要的CSS3属性,即使代理可用,也没有任何支持加载CORS图像 .

    仍然非常有限的浏览器兼容性(不是因为更多不能支持,只是没有时间使其更多支持跨浏览器) .

    有关更多信息,请查看此处的示例:

    http://hertzen.com/experiments/jsfeedback/

    edit html2canvas脚本现在单独提供here和一些examples here .

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

相关问题