躓いた点
Firebase AuthでTwitter認証を行ったときに、firebase.UserInfo.photoURLで取得できるアイコン画像の解像度が48x48と低くて困っていました。
photoURLに入っているURL文字列の例:
https://abs.twimg.com/sticky/default_profile_images/default_profile_normal.png
html5のcanvas上に合成して使いたかったのでもっと高画質のものが欲しかったのです。
困ったときの公式ドキュメント
"By modifying the URL,"とあったので、ドキュメントにある規則通りに自分でURLを書き換えてアクセスすればよいのだと判断しました。
対応策
TypeScript(JavaScript)のstringに備えられたreplace
メソッドで"normal"
の部分を置き換えます。
78x78(bigger)
user.photoURL.replace("normal", "bigger");
https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png
24x24(mini)
user.photoURL.replace("normal", "mini");
https://abs.twimg.com/sticky/default_profile_images/default_profile_mini.png
original size
user.photoURL.replace("_normal", "");
https://abs.twimg.com/sticky/default_profile_images/default_profile.png
200x200
公式ドキュメントにはありませんが、公式Webクライアントのプロフィール画面に表示されるアイコンのimg
タグがsrc
指定していました。
user.photoURL.replace("normal", "200x200");
https://abs.twimg.com/sticky/default_profile_images/default_profile_200x200.png
400x400
こちらも公式ドキュメントには記載がないようです。しかし公式Webクライアントのプロフィール画面に表示されるアイコンをタップして表示される拡大アイコンのimgタグがsrc
指定していました。
user.photoURL.replace("normal", "400x400");
https://abs.twimg.com/sticky/default_profile_images/default_profile_400x400.png
まとめ
original sizeだとユーザーがどんな画像を登録しているかで解像度が変わる可能性があります。多分。
200x200や400x400のサイズ固定ができるとcanvas上で利用するのも楽ですね。