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

以前は、他のスクリーンショットツールを介してのみ画像をキャプチャできました。最近のブラウザの機能はますます強力になり、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  class="avatar_pp fl lazy"  src="/static/imghwm/default1.png"  data-src="" id="   id="you"  / alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" ><!--需要圆角的原始图片-->
     <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="/template/images/avatar.png"      style="max-width:90%" alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" ><!--遮罩图片-->
</p>

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

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img  class="avatar_pp fl lazy"  src="/static/imghwm/default1.png"  data-src="" id="   id="you"  / alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" ><!--需要圆角的原始图片-->
     <img  class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="/template/images/avatar.png"      style="max-width:90%" alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" ><!--遮罩图片-->
</p>

コードをコピー

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

<a href="<a href=" 
<img  src="/static/imghwm/default1.png"  data-src="<a href="  class="lazy" " alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" >http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img  src="/static/imghwm/default1.png"  data-src="<a href="  class="lazy" </a alt="HTML キャンバスを使用して丸い画像をインターセプトする方法" >  
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とCSSを使用して円形および丸みを帯びた画像形式を実装する方法のサンプルコード

phpは、作成用の丸みを帯びた画像コードを生成します

CSS3丸い画像と楕円 写真の形を整える方法の紹介

以上がHTML キャンバスを使用して丸い画像をインターセプトする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。