HTML のキャンバスに基づくスクリーンショットのデモ

HTML のキャンバスに基づくスクリーンショットのデモ

冒頭に書いた

以前、Renren で JS ベースのスクリーンショット ソリューションについて説明した共有を見たのを覚えています。詳細は覚えていませんが、非常に興味深く、キャンバスを使用しているようだったことを覚えています。そこで今回は、著者の考えを皆さんと共有するために、自分でも書いてみようと思います。これは単なる簡単なデモです。バグを見つけた場合は問題を報告してください。コードアドレスを投稿するには、規則に従ってください。

レンダリング

全体的なアイデア

  • 開始/終了ショートカットキーを設定する
  • 開始後、DOMをキャンバスに描画して元のDOMインターフェースを覆います
  • マウスのスクリーンショット領域をシミュレートするキャンバスを追加する
  • マウスのスクリーンショット領域に対応するブラウザインターフェースを描画するためのキャンバスを追加します(最初のキャンバスからキャプチャされます)
  • 撮影した画像を保存する

1. 開始/終了ショートカットキーを設定する

ショートカット キーは競合を引き起こす可能性があるため、最初はショートカット キーの数に制限がないことを望んでおり、配列を使用して最初のパラメーターでショートカット キーを渡します。

関数スクリーンショット(quickStartKey, EndKey) {
  //使用しないでください...拡張文字列 var keyLength = quickStartKey.length
  var isKeyTrigger = {}
  var cantStartShot = false
  ...
  quickStartKey.forEach(function(item) { //パラメータ配列を走査します isKeyTrigger[item] = false //デフォルト配列内のすべてのキーはトリガーされません})
  $('html').on('keyup', 関数(e) {
    var キーコード = e.which
    if(keyCode === EndKey) {
      ...
    } そうでない場合(!ショットを開始できない場合) {
      isKeyTrigger[キーコード] = true
      var notTrigger = Object.keys(isKeyTrigger).filter(function(item) {
        return isKeyTrigger[item] === false // トリガーする必要があるショートカットキーがあるかどうかを確認します})
      if(notTrigger.length === 0) { //スクリーンショットを開始するためにショートカットキーをトリガーする必要はありません cantStartShot = true
        beginShot(ショットを開始できない)
      }
    }
  })

2. DOMをキャンバスに描画して、元のDOMインターフェースを覆う

ネイティブ方式を使用する場合は、MDN のキャンバスで DOM を描画する方法の紹介を参照してください。難しいのは、<foreignObject> 要素に含まれる XML を含む SVG イメージを作成する必要があることです。現在のブラウザで表示されている DOM を計算して抽出する方法が、実は最も面倒です。実は、著者は = を手動で実装するための良いアイデアを持っていません。 =なので、これを実行するために html2canvas ライブラリを選択しました。一般的な呼び出し方法は次のとおりです。

関数beginShot(cantStartShot) {
    if(cantStartShot) {
        html2canvas(ドキュメント.body, {
            レンダリング時: function(canvas) {
                //インターフェースと一致するキャンバス画像を取得します}
        })
    }
}

3. マウスのスクリーンショット領域をシミュレートするキャンバスを追加する

この部分の実装は、もともとネイティブのキャンバス API を使用する予定でしたが、マウスが押されてドラッグが開始された後、キャンバスをリアルタイムで描画する必要があるという問題がありました。これには、PS レイヤーに似た概念が必要です。マウスが移動するたびに、現在のスクリーンショット フレームが描画されますが、次にマウスが移動すると、前のスクリーンショット フレームが削除されます。これはリアルタイムの描画プロセスをシミュレートします。残念ながら、作者はキャンバスのネイティブ API を使用する方法を見つけていません。もしあるのであれば、描画したイメージにマークを付ける方法を教えてください。ここで著者は、Jcanvas と呼ばれる Jq ベースのキャンバス ライブラリを使用します。このライブラリはレイヤーの概念を提供します。つまり、レイヤーには 1 つの画像のみを描画でき、レイヤーには名前を付けることができます。これは著者のニーズを満たしており、次のように実装されています。

$('#' + canvasId).mousedown(function(e) {
    $("#"+canvasId).removeLayer(layerName) //前のレイヤーを削除する layerName += 1
    startX = that._calculateXY(e).x //マウスの位置を計算します startY = that._calculateXY(e).y
    isShot = true
    $("#"+キャンバスID).addLayer({
        タイプ: 'rectangle', //rectangle...
        name:layerName, //レイヤー名 x: startX,
        y: 開始Y、
        幅: 1,
        高さ: 1
    })
}).mousemove(関数(e) {
    if(isShot) {
        $("#"+canvasId).removeLayer(レイヤー名)
        var moveX = that._calculateXY(e).x
        var moveY = that._calculateXY(e).y
        var 幅 = 移動X - 開始X
        var 高さ = 移動Y - 開始Y
        $("#"+キャンバスID).addLayer({
            タイプ: '長方形'、
            ...
            名前:レイヤー名、
            fromCenter: false、
            x: 開始X、
            y: 開始Y、
            幅: 幅、
            高さ: 高さ
        })
        $("#"+canvasId).drawLayers(); //描画}
    })

4. マウスのスクリーンショット領域に対応するブラウザインターフェースを描画するためのキャンバスを追加します。

var キャンバス結果 = document.getElementById('キャンバス結果')
              var ctx = canvasResult.getContext("2d");
              ctx.drawImage(copyDomCanvas, moveX - startX > 0 ? startX : moveX, moveY - startY > 0 ? startY : moveY, width, height, 0, 0, width, height )
              var dataURL = canvasResult.toDataURL("image/png");

画像はdrawImageでキャプチャされ、toDataURLメソッドを使用して画像をbase64エンコードに変換します。

5. 撮影した画像を保存する

関数downloadFile(el, ファイル名, href){
      el.attr({
        'ダウンロード':ファイル名、
        'href': href
      })
  }
  ...
ダウンロードファイル($('.ok'), 'screenShot' + Math.random().toString().split('.')[1] || Math.random() + '.png', dataURL)
// ボタンオブジェクト、画像を保存するためのランダムな名前、および base64 でエンコードされた画像を渡します

a タグのダウンロード属性を使用し、ユーザーがクリックすると直接ダウンロードを実行できます。

展開する

依存関係

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jcanvas/16.7.3/jcanvas.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

ショートカットキーを設定する

screenShot([16, 65], 27) // 開始ショートカットキーはshift+a、終了キーはESC

やっと

記事の一番嫌な部分(キャンバスへのDOM書き込み、キャンバス設定レイヤー)は、それぞれ2つのライブラリを使用して実装されています。今後、ネイティブAPIを使用してこれらの操作を実装する方法に焦点を当てていきますが、個人的には私の文章はまだ少し... 。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります

>>:  体験したい17 404ページ

推薦する

MySQLにおける正規表現の一般的な使用法

MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...

M1 ProチップでVueプロジェクトを開始する方法

目次導入Homebrewをインストールするnvmをインストールするノードをインストールするインストー...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...

crontab でスケジュールされたタスクが実行されない理由の概要

序文最近、仕事でいくつかの問題が発生しました。crontab でスケジュールされたタスクが実行されま...

MYSQLストアドプロシージャ、つまり一般的な論理知識のポイントの要約

MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...

Firefoxでリンクをクリックしたときに点線の枠線を削除する方法

今日、ブラウザの互換性の問題にいくつか遭遇しました。そのうちの 1 つは奇妙に感じました。Firef...

Linuxはデータディスクがアンインストールされ、新しいカスタムイメージを作成できることを確認します。

カスタムイメージに関するよくある質問データディスクを表示するにはどうすればいいですか? df コマン...

MySQL RouterはMySQLの読み取りと書き込みの分離を実装します

目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...

MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...

calc() で全画面背景の固定幅コンテンツを実現

ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...

Linuxで環境変数を削除する詳細な手順

Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

カルーセルアニメーションを実現するVueコンポーネント

この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...

Centos8 で NIS ドメイン サービスをセットアップおよび構成するための詳細な手順

目次NIS の紹介ネットワーク環境: 1. 環境の準備(両方のノードが必要) 2.nisマスターサー...