Html

html2canvasに基づいて、Webページを画像および画像の明瞭さとして保存します



Based Html2canvas Save Web Pages



ソース： https://segmentfault.com/a/1190000011478657?utm_source=tag-newest

この技術研究は、H5プロジェクトの重要な機能要件である実装WeChat long press the web page to save as a screenshotから導き出されています。



ここに栗があります（WeChatで開き、画像を長押しして保存してください）： 3分であなたの知識の境界を探る

Webページ全体を写真として保存することは、H5イベントページの最後に共通する非常に興味深い機能です。以下は、プロジェクトの調査と踏み込みの概要と概要です。



画像リソースのキャンバスが原因でHomologous restrictionキャンバスにクロスドメイン画像リソースが含まれていると、キャンバスが汚染され、生成された画像スタイルまたはhtml2canvasメソッドで混乱が生じます。

次の主な解決策 2種類のクロスドメイン画像リソース ：CORS CDNイメージリソースおよびWeChat user avatarイメージリソースで構成されたものを含みます。

3.1CDNでの画像の構成

  1. CDN画像を構成するように依頼しますCORS。CDN構成後、応答ヘッダーがchrome開発者ツールに含まれている必要があることがわかります。Access-Control-Allow-Originフィールド。
  2. 開くhtml2canvas of useCORS 構成項目 。次のように設定するだけです。
var opts = {useCORS: true} html2canvas(element, opts)

note：
有効になっていない場合html2canvas of useCORS構成項目html2canvas正常に実行され、エラーは報告されませんが、対応するCDNイメージは出力されません
（両方を含めるようにテスト済みPicture of CDN with Local pictureリソースページ、ただしLocal picture正常にレンダリングできる）



3.2WeChatユーザーアバターの設定

必要に応じてWeChatプラットフォームのユーザーアバターは画像として保存されます。3.1プログラムは無力です。サーバーProxy forwarding（フォワード）実装で構成できますが、ここでは繰り返しません。

その他の考慮事項

1.マージンオクルージョンの問題

WeChatで、呼び出しますLong press to save the pictureメニューは、オブジェクトを直接長押しする必要があります要素の上にオクルージョンがある場合、メニューは呼び出されません。
実際、オクルージョンは非要素だけではなく、おそらくmargin属性です。たとえば、ページの下部で、絶対位置の要素に非常に大きな値が設定されている場合。margin-top、then margin-top関係する領域では、通話メニューを押し続けることはできません。解決策：will margin-top切り替えtop問題ありません。

2.Android版のWeChatが画像の保存に失敗しました

canvas2imgデフォルトの保存画像形式はpngですが、AndroidバージョンのWeChatで生成された画像は、長押ししてメニューを呼び出して画像を保存できますが、 ローカルアルバムに正しく保存できません 。solution：設定canvas2img生成された画像形式の構成項目はjpeg問題ありません。

3.JPEGブラックスクリーンの問題

設定canvas2img出力形式はjpeg結果の画像に多数の黒いブロックが含まれる可能性があります。Possible solution：一部の画像要素のサイズとサイズを縮小します。

4.効果を維持できない

画像Before conversionで、stopまたはモーションを削除して画像を正しくレンダリングする必要があります。そうしないと、生成された画像が壊れます。