html2canvasのスクリーンショットで角丸画像が取り込めない問題の解決方法を詳しく解説

以前は、他のスクリーンショット ツールを使用してのみ画像をキャプチャできました。最近のブラウザの機能はますます強力になり、H5 が徐々に普及するにつれて、ブラウザ自体でスクリーンショットを撮ることができるようになりました。 html2canvas はそのようなフロントエンド プラグインであり、その原理は Canvas に Dom ノードを描画することです。非常に便利ですが、次の制限があります。

• iframeはサポートされていません
• クロスドメインイメージはサポートされていません
• ブラウザのプラグインでは使用できません
• SVG 画像は一部のブラウザではサポートされていません
• フラッシュには対応していません
• 古いブラウザと IE はサポートされていません。特定のブラウザがサポートされているかどうかを確認したい場合は、http://deerface.sinaapp.com/ にアクセスして試してください:)

私の使用シナリオは非常にシンプルで、例外情報を記録し、例外ページも自分で定義したので、html2canvas を使用するだけで十分です。

初めて html2canvas を使用したときの目的は、ページ全体のスクリーンショットを撮り、ユーザーが保存するための画像を生成することでした。

まず、HTML レンダリングがどのようなものかを見てみましょう。

HTML でレンダリングされた画像から、上の画像には角丸効果があることがわかりますが、html2canvas を使用して画像を変換すると、画像の角丸効果が失われていないことがわかりました。

このようになりました。いろいろ考えた結果、最終的に奥の角丸を背景画像にして、真ん中の円の背景を透明にして、マスクに相当する絶対位置で元の画像に重ねることにしました。効果。

もちろん、マスク イメージの DOM ノードは、次のように、角を丸くする必要があるイメージの下にある必要があります。

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--角丸が必要な元の画像--> <img src=/template/images/avatar .png class=img-sensitive style=position:Absolute;><!--マスク画像--></div>

生成されると、見た目は正常になります。

 <div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--角丸が必要な元の画像--> <img src=/template/images/avatar .png class=img-sensitive style=position:Absolute;><!--マスク画像--></div>