JavaScriptを使用してスクリーンショット機能を実装する方法-安全性-php.cn

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

WBOY

リリース： 2023-05-16 14:07:06

転載

1957 人が閲覧しました

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

2. svg 要素が必要です

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

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

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

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<canvas id="canvas"  width="200" height="200">
</canvas>
<script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" >' +
  '<em>I</em> like ' +
  '<span >' +
  'cheese</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: 'image/svg+xml'});
 var url = DOMURL.createObjectURL(svg);
 img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
 }
 img.src = url;
</script>
</body>
</html>

ログイン後にコピー

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

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

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

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

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .container {
   color: red;
  }
 </style>
</head>
<body>
<div class="container" >
 Hello World!
</div>
<canvas id="canvas"  width=200" height="200">
</canvas>
<script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" >' +
  document.querySelector('.container').innerHTML +
  '</div>' +
  '</foreignObject>' +
  '</svg>';
 var DOMURL = window.URL || window.webkitURL || window;
 var img = new Image();
 var svg = new Blob([data], {type: 'image/svg+xml'});
 var url = DOMURL.createObjectURL(svg);
 img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
 }
 img.src = url;
</script>
</body>
</html>

ログイン後にコピー

外部スタイルは有効にならないため、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 サイトの他の関連記事を参照してください。