Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでdivのスクリーンショットを撮る方法

ウェブサイトをレイアウトするマークアップの一部をキャプチャ（画像に変換）し、キャプチャした画像を保存するか、何かを行う必要があります。したがって、この説明された動作を実現するための方法を考案する必要があります。

問題には、キャンバスだけでなくマークアップ要素のキャプチャも含まれるため、特に最初からキャプチャする場合は、少し複雑になります。したがって、簡単にするために、サードパーティのライブラリ htmltocanvasを使用します。 これは、名前が示すとおりに機能し、目的のマークアップをキャンバスに変換します。その後、キャンバス要素を画像としてダウンロードするだけです。

例

そのためのコードは-

になります 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
   #capture{
      height: 300px;
      width: 300px;
      display: flex;
      flex-direction: column;
      background-color: rgb(43, 216, 216);
   }
   span{
      flex: 1;
      width: 100%;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 20px;
   }
   #first{ background-color: rgb(15, 168, 15); }
   #second{ background-color: rgb(43, 93, 228); }
   #third{ background-color: rgb(194, 55, 13); }
</style>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
   const download = () => {
      html2canvas(document.querySelector('#capture')).then(canvas => {
         document.body.appendChild(canvas);
      });
   }
</script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="download()">
Download
</button>
</body>
</html>

出力

そして、次のコードの出力は-

になります

JavaScriptでdivのスクリーンショットを撮る方法

ダウンロードボタンをクリックした後

JavaScriptでdivのスクリーンショットを撮る方法

2番目の画像には、[ダウンロード]ボタンの横にキャンバスが含まれていることに注意してください。このキャンバスは、右クリックしてローカルストレージに保存するだけです。


  1. 方法：Macでスクリーンショットを撮る

    Apple Macは、平均的なコンピュータユーザーが自分のコンピュータを使用して実行したいと思う可能性のあるすべてのことを実行します。これには、スクリーンショットのキャプチャも含まれます。 ただし、ほとんどのMacユーザーは、Macでスクリーンショットをキャプチャする方法を正確に知らず、たとえそうだとしても、Macが多種多様な種類のスクリーンショットをキャプチャできるという事実に気づいていません。 以下は、Macでさまざまな種類のスクリーンショットをキャプチャする手順です。 画面全体のスクリーンショットを撮る方法： Macの画面に希望どおりの表示が表示されていることを確認してから、コ

  2. キーボード ショートカットを使用して Mac OS でスクリーンショットを撮る方法

    最近 Windows から macOS に切り替えた場合、Mac でスクリーンショットを撮るのがわかりにくいかもしれません。確かに、Print Screen はありません もうキーボードのキーを押します。ただし、代わりに使用できるキーボード ショートカットがいくつかあります。適切なショートカットを使用すると、単一のウィンドウ、画面全体、または特定の部分のスクリーンショットを取得できます。 macOS Mojave 以降にアップグレードした場合は、スクリーンショット アプリを使用して、画面のさまざまな部分をキャプチャしたり、ビデオ録画を作成したりできます。これは、Applications フ