JSベースのスクリーンショットソリューションを説明していることを説明しています。だから今回は、みんなと共有するというアイデアを書く予定です。これは非常にシンプルな小さなデモです。通常のPOコードアドレスによると。
レンダリング
全体的な思考
ショートカットキーが競合を引き起こす可能性があるため、ショートカットキーはショートカットキーの数を制限できないため、最初のパラメーターの配列の形式が渡されます。
関数スクリーンショット（QuickStartKey、Endkey）{//互換性は使用しないことを検討します。トラバースパラメーター配列iskeytrigger [item] = false //デフォルト配列のすべてのキーはトリガーされていません}）$（ 'keyup'、function（e）{keycode = e. = = endkey）{...} else if（！cantstartshot）{iskeytrigger [keycode] = true var nottrigger = object.keys（iskeytrigger] === viewショートカットキーはありますか。トリガーされる}）if（nottrigger.length === 0）{//トリガーする必要があるショートカットキーはありません。 2。元のDOMインターフェイスをカバーするために、DOMをキャンバスに描画しますネイティブメソッドを採用する場合は、MDNの下でDOMの導入を参照できます。最も難しいことは、XMLを含むSVG画像に含まれる要素を作成する必要があることです。現在のブラウザに表示されているDOMを計算して抽出する方法は、実際に最も退屈です。実際、著者は手動で1つを実装することをお勧めしません。 =、このHTML2Canvasライブラリを選択してこれを完了しました。一般的な呼び出し方法は次のとおりです。
function beginshot（cantstartshot）{if（cantstartshot）{html2canvas（document.body、{onRendered：function（canvas）{//同じインターフェイスでキャンバス画像を取得}}}}}}} 3.キャンバスシミュレーションマウススクリーンショット領域を追加しますこの場所の実現は、もともとネイティブのキャンバサピを使用することを目的としていましたが、マウスを押してドラッグを開始した後、現在のスクリーンショットボックスを描画する必要があります。 Mousemoveをトリガーすると削除されます。実際の描画プロセスをシミュレートします。無力な著者は、キャンバスネイティブAPIを使用する方法を見つけませんでした。ここで、著者はJQベースのキャンバスライブラリを使用しています。レイヤーの概念、つまりレイヤーにのみ絵を描くことができます。同時に、レイヤー名をマークできます。これは著者のニーズを満たし、実現は次のとおりです。
$（ '＃' +canvasid）.Mousedown（function（e）{$（＃ +canvasid）.removelayer（layername）//前のレイヤーlayername += 1 startx = that._calculatingxy（e）.x //計算マウスの位置starty = that._calculatingxy（e）.y isshot = true $（＃+canvasid）.addlayer（{type： 'rectangle'、// rectangular ... name：layer name name x：startx、y y y ：starty、width：1、height：1}）}）。 = that._calculatingxy（e）.y var width = movex -startx var height = movey -starty $（＃+canvasid）.addlayer（{type： 'rectangle'、... name：lay：lay ername、fromcenter：false false 、x：startx、y：starty、width、height：height}）$（＃+canvasid）.drayers（// draw}}） 4.キャンバスを追加して、マウススクリーンショット領域に対応するブラウザインターフェイスを描画しますvar canvasresult = document.getElementById（ 'canvasresult'）var ctx = canvasresult.getContext（2d）; 、0、0、幅、高さ）var dataurl = canvasresult.todataurl（image/png）;
その中で、画像はdrawimageによって傍受され、その後、画像はtodataurlメソッドを使用してbase64エンコードに変換されました。
5。インターセプトされた画像を保存します関数ダウンロード（el、filename、href）{el.attr（{'download'：filename、 'href'：href}）} ... downloadfile（$（ '。ok'）、 'screenshot' + math .random（ .random（）.tring（ '。'）[1] ||。その中で、ユーザーがクリックすると、Aタグのダウンロード属性を直接ダウンロードできます。
展開する依存関係<スクリプトsrc = https：//cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </scrip> <scrip src = https：//cdn.bootcss.com/jcanvas/16.7.3/ jcanvas.min.js> </scrip> <script src = https：//cdn.bootcss.com/html2canvas/0.5.5.0-html2canvas.min.js> </script>ショートカットキーを構成します
スクリーンショット（[16、65]、27）//ショートカットキーセットを開始して、eSCですやっと
記事の中で最も嫌な場所（DOMはCanvasとCanvasの設定レイヤーで書いています）は、それぞれ実装に2つのライブラリを使用します。それはまだ少しです。エッセンス
上記は、この記事のすべての内容です。