ホームページ > 記事 > ウェブフロントエンド > HTML キャンバスを使用して丸い画像をインターセプトする方法

HTML キャンバスを使用して丸い画像をインターセプトする方法

小云云オリジナル: 2018-02-02 11:06:253569ブラウズ

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

この記事では、html2canvas のスクリーンショットで丸みのある画像がキャプチャできない問題の解決策に関する関連情報を中心に紹介します。編集者が非常に優れていると考えたので、共有します。参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

私の使用シナリオは非常に単純なので記録します。例外情報を確認し、例外ページも自分で定義すれば、html2canvas を使用するだけで十分です。

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

まず HTML レンダリングがどのように見えるかを見てみましょう

画像上の画像には角丸効果があることがわかりましたが、html2canvas を使用して画像を変換したところ、画像の角丸効果は失敗していないことがわかりました。

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

もちろん、マスク画像のDOMノードは、

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片-->
</p>

と同様に、角丸処理が必要な画像の下にある必要があり、正常に生成されます

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片-->
</p>

コードをコピー

コードは次のとおりです:

<a href="<a href=" 
<img">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img</a> 
src="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a>" alt="" width="169" height="300" 
srcset="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a> 169w, 
<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg</a> 377w" 
sizes="(max-width: 169px) 100vw, 169px" /></a>

HTML キャンバスを使用して丸い画像をインターセプトする方法

関連記事