javascript - プラグインを使用せずに、canvas を使用して div 内のコンテンツを画像に変換する方法。

Question

インターネット上の多くの人がキャンバスの使用について言及していましたが、重要なコンテンツ変換部分は主にプラグインによって支援されているようで、私が見つけた唯一のプラグインに依存しない例は正しく実行されませんでした。プラグインを使わずにpの内容を画像に変換する方法を達人に聞きたいです~~

Answer 1

プラグインを使用できないわけではありませんが、プラグインを実装するために内部でどのような原則が使用されているかご存知ですか?一般的な原則とロジックを理解していますか?プラグインは実装方法ではありません。プラグインは解決策の 1 つにすぎません。おそらく自分で書いたもので、実装方法はプラグインと同じです。

質問に戻りますが、p を画像に変換することは可能ですか? 作業負荷はどれくらいですか?実現可能性に関しては、実装可能なプラグインも存在するため、既存のフロントエンド分野でも実現可能です。実施原理は何ですか?

最初に考えなければならないのは、フロントエンド コードがブラウザーで実行されるということです。まず最初に考えなければならないのは、ブラウザがこの種の API を直接提供しているかということです。ブラウザ API は何を求めているのでしょうか? BOM DOM ドキュメントを見つけてください。私の知る限り、Firefox は特定の要素の背景として特定のノードを使用できるようです。これは CSS の background: -moz-element() 構文を発明したものであり、スクリーンショットに似た API はありません。

キャンバスについても言及しましたね。開発者としては、好奇心を持ち続けることが最善です。この種のプラグインがどのように実装されているかを簡単に理解できます。この機能を実現する方法の詳細をすべて知る必要はありませんが、この実装原則が機能する理由を知る必要があります。

OK、キャンバスに p を描くにはどうすればよいですか? Canvas を使用するとピクセルを処理できるため、理論的には何でも描画できます。プラグインが行うことは、p と p のスタイルを読み取り、キャンバス上に p を描画し、p の子ノードを再帰することです。さて、この仕事は簡単ですか？確かに単純ではありません！素手で車輪を作ることができる神は誰ですか?次に、この質問の地面に作成したホイールを貼り付けて答えを出しますか?どの偉大な神があなたに教えてくれるでしょうか？

あなたとマスターの違いは、マスターが html2canvas をフリーハンドで書けることではなく、マスターが問題に遭遇したときに明確に分析できることです。

もちろん、私はマスターではありません。この種の問題を見ると、文句を言わずにはいられません。

Answer 2

まず p を svg に変換し、次に svg を Canvas に変換する必要がありますが、注意すべき点がいくつかあります:

1. HTML を SVG に変換する場合、input などのコントロール要素を含めることはできないことに注意してください。そうしないと変換が失敗します。

2. HTML を SVG に変換するプロセスでは、HTML 要素のすべてのスタイルを調べて、SVG に変換する前にインライン スタイルに変換する必要があります。そうしないと、空白が表示される場合があります。

Answer 3

実際、これはあなたが言及したニーズです。角を曲がることができます

最初にスクリーンショットを撮ってから、それを入力に貼り付けて、入力貼り付け paste イベントをバインドすることができますpaste 事件
然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')
这不就是一个图片了吗
最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click()その後、var img = new Image() を使用して、event.clipboardData.items が読み取られます。

最終的に < code>canvas に配置されたものは context.dramImage(img,0,0) var url = context.toDataURL('image/png') を使用しています 🎜これはただの写真ではありませんか?🎜 最後に const a = document .createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a. click() をクリックすると画像がダウンロードされます:)🎜