web-dev-qa-db-ja.com

HTML5 / Canvas / JavaScriptを使ってブラウザ内のスクリーンショットを撮る

Googleの「Report a Bug」または「Feedback Tool」を使用すると、ブラウザウィンドウの領域を選択して、バグに関するフィードバックとともに送信されるスクリーンショットを作成できます。

Google Feedback Tool ScreenshotJason Smallによるスクリーンショット。 重複した質問 で投稿された。

彼らはどのようにこれをやっているのですか？ GoogleのJavaScriptフィードバックAPIは、 こちら と フィードバックモジュールの概要 からロードされます。 ）スクリーンショット機能を紹介します。

javascripthtml5canvasscreenshot
861
joelvh

JavaScriptはDOMを読み、canvasを使ってそれをかなり正確に表現することができます。私はHTMLをキャンバスイメージに変換するスクリプトに取り組んできました。あなたが説明したようにそれを実装してフィードバックを送るようにすることを今日決めました。

スクリプトを使用すると、フォームとともにクライアントのブラウザで作成されたスクリーンショットを含むフィードバックフォームを作成できます。スクリーンショットはDOMに基づいており、実際のスクリーンショットを作成するものではないため実際の表現に対して100％正確ではない可能性がありますが、ページで利用可能な情報に基づいてスクリーンショットを構築します。

画像全体がクライアントのブラウザ上で作成されるので、はサーバーからのレンダリングを必要としません。 HTML2Canvasスクリプト自体はまだ実験的な状態にあります。それは、私が望んでいるほど多くのCSS3属性を解析することも、プロキシが使用可能であってもCORSイメージをロードすることもサポートされていないためです。

まだかなり限られたブラウザの互換性（もっと多くをサポートすることができなかったという理由ではなく、もっとクロスブラウザをサポートするようにする時間がありませんでした）。

詳細については、こちらの例をご覧ください。

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

edit html2canvasスクリプトは、個別に ここ といくつかの の例で利用可能になりました。こちら .

edit 2 Googleが非常によく似た方法を使用していることのもう1つの確認（実際には、ドキュメントに基づく、唯一の大きな違いはトラバース/描画の非同期方法です）。 GoogleフィードバックチームのElliott Sprehn著： http://www.elliottsprehn.com/preso/fluentconf/

1089
Niklas

あなたのWebアプリはgetUserMedia()を使ってクライアントのデスクトップ全体の 'ネイティブ'スクリーンショットを撮ることができます。

この例を見てください。

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

クライアントは（現時点では）chromeを使用している必要があり、chrome：// flagsの下でスクリーンキャプチャサポートを有効にする必要があります。

63
Matt Sinclair

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としてimageを取得した後にonrenderedのreport()関数であなたはそれをユーザーに見せて、そして彼がマウスで「バグ領域」を描くことを可能にし、そしてスクリーンショットと領域座標をサーバーに送ることができます。

でこの例async/awaitバージョンが作られました：Nice makeScreenshot()関数 で

更新

スクリーンショットを取る、地域を選択する、バグを説明する、POST request（ 、ここで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>
28
Kamil Kiełczewski

以下に使用例を示します。 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}`));

また、チェックアウトする価値があるのは、 Screen Capture API docsです。

0
JSON C11