JavaScriptを使用してスクリーンショット機能を実装する方法

1. Blob のメディア タイプは、「image/svg xml」である必要があります。

2. svg 要素が必要です

3. の中に # を挿入します。 svg要素 ##foreignObject Element

4.仕様に準拠したHTMLをforeignObject要素に入れる

domからcanvasへの変換は上記の手順と同じくらい簡単です。以下は、ドキュメントに記載されている簡単なデモです:

nbsp;html>


 <meta>
 <title>Document</title>


<canvas>
</canvas>
<script>
 var canvas = document.getElementById(&#39;canvas&#39;);
 var ctx = canvas.getContext(&#39;2d&#39;);
 var data = &#39;<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">&#39; +
  &#39;<foreignObject width="100%" height="100%">&#39; +
  &#39;<div xmlns="http://www.w3.org/1999/xhtml" >&#39; +
  &#39;<em>I like &#39; +
  &#39;<span >&#39; +
  &#39;cheese&#39; +
  &#39;&#39; +
  &#39;&#39; +
  &#39;&#39;;
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: &#39;image/svg+xml&#39;});
 var url = DOMURL.createObjectURL(svg);
 img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
 }
 img.src = url;
</script>

コードをコピーして実行します。すごいですね。ブラウザ上に 2 行のクールなワード アートが表示されます。

えっと、dom を Canvas に変換するのはとても簡単だということがわかりましたか?次に

document.body.innerHTML を使用して本文内の DOM をすべて取り出して、foreignObject 要素に配置します。これでページ全体がインターセプトされます。

デモは単なる Hello World ですが、実際のプロジェクトの Dom 構造はこれよりもはるかに複雑です。たとえば、外部スタイル シート、画像、一部のタグは XML に準拠していない可能性があります。仕様 (終了タグの欠落など)。簡単な例を示します。.container はインライン スタイルを使用しませんが、style タグで定義されています。フォントは赤です。画像に変換された後、スタイルは有効になりません。

nbsp;html>


 <meta>
 <title>Document</title>
 <style>
  .container {
   color: red;
  }
 </style>


<div>
 Hello World!
</div>
<canvas>
</canvas>
<script>
 var canvas = document.getElementById(&#39;canvas&#39;);
 var ctx = canvas.getContext(&#39;2d&#39;);
 var data = &#39;<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">&#39; +
  &#39;<foreignObject width="100%" height="100%">&#39; +
  &#39;<div xmlns="http://www.w3.org/1999/xhtml" >&#39; +
  document.querySelector(&#39;.container&#39;).innerHTML +
  &#39;&#39; +
  &#39;&#39; +
  &#39;&#39;;
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: &#39;image/svg+xml&#39;});
 var url = DOMURL.createObjectURL(svg);
 img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
 }
 img.src = url;
</script>

外部スタイルは有効にならないため、JS を通じてすべての dom 要素をトラバースし、element.style オブジェクトを通じてすべてのスタイルをインライン スタイルに追加できます。このアイデアは良さそうですが、外部スタイルをインライン スタイルに変換する関数を実際に書くことはできません。需要は逼迫しており、あれこれいじる時間はあまりないので、既製のライブラリを探したいと思います。そこで、もう一度Googleに行きました。幸いなことに、すぐに html2canvas というライブラリを見つけました。これは素晴らしいライブラリで、非常に強力ですが、使い方はとても簡単です。このような簡単な方法で、ページ全体のスクリーンショットを撮ることができます:

function convertHtml2Canvas() {
  html2canvas(document.body, {
   allowTaint: false,
   taintTest: true
  }).then(function(canvas) {
   document.body.appendChild(canvas);
  }).catch(function(e) {
   console.error('error', e);
  });
 }

Currentlyもう 1 つ問題があり、このメソッドはデフォルトでページ全体をインターセプトします (つまり、innerHeight と innerWidth を境界として使用し、多くの空白スペースが発生します)。ただし、私のデッキはごく一部しか占めていません。ページのデッキ部分だけが欲しいです。実際、キャンバスがすでにある場合は、それを加工することができるので、扱いが簡単です。一般的な考え方は次のとおりです。 1. 上記で取得した Canvas オブジェクトを Blob に変換し、それを img 要素に置きます。次に、img.src をキャンバスに描画します。現時点では、

canvas.drawImage メソッドを呼び出すと、必要なコンテンツをインターセプトできます。次の 2 つの関数は、キャンバスを画像に、またはその逆に変換します。

// Converts canvas to an image
 function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png", 0.1);
  return image;
 }
 // Converts image to canvas; returns new canvas element
 function convertImageToCanvas(image, startX, startY, width, height) {
  var canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
  return canvas;
 }

次に、上で書いた ConvertHtml2Canvas を次のように変更します。

function convertHtml2Canvas() {
  html2canvas(document.body, {
   allowTaint: false,
   taintTest: true
  }).then(function(canvas) {
   var img = convertCanvasToImage(canvas);
   document.body.appendChild(img);
   img.onload = function() {
    img.onload = null;
    canvas = convertImageToCanvas(img, 0, 0, 384, 696);
    img.src = convertCanvasToImage(canvas).src;
    $(img).css({
     display: 'block',
     position: 'absolute',
     top: 0,
     left: 400 + 'px'
    });
   }
  }).catch(function(e) {
   console.error('error', e);
  });
 }

この時点で、ページのコンテンツの一部が傍受される可能性があります。この効果は、デッキ共有テスト ページのようなものです。ページの左側は DOM 構造、右側は html2canvas を使用して変換された画像です。

以上がJavaScriptを使用してスクリーンショット機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。