MacBookのRetinaディスプレイなどの高解像度ディスプレイを使用していると,Chrome拡張機能のAPI chrome.tabs.captureVisibleTab
で撮影されるタブのスクリーンショットの画像が縦横N倍のサイズになるらしい.Nの値はJavaScriptでwindow.devicePixelRatio
の値として得られて,Retinaディスプレイの場合は2だった.自分で作って使っているSVG ScreenShotにおいて,スクショ範囲のリンク位置などを描画するSVGは等倍で取得できるが,その背景に表示するスクショ画像のサイズが大きくなってしまう問題で困っていた.具体的な状況としては,本来はこうなって欲しいシーンで,
下の2つの画像を左上を基準に重ねたような,スケールがズレたものが得られてしまう. これだと背景画像が大きくて,リンク位置がずれてしまっている.
このように対処して解決した.
関連情報
- Chrome Extension + Retina + captureVisibleTab + translate3d = 2 x res | Piotr Walczyszyn's Blog
- 132301 - Make sure tab snapshot api works consistently with HiDPI - chromium - Monorail
日頃 MacBook Pro 使いの id:kanata_02 の報告によってこの問題に気付き,SVG ScreenShot の修正ができました.(だいぶ前の話になりましたが,)ありがとう!
以上, TeamJ Advent Calendar 2016 の21日目の記事をお送りしました.
今年も残すところあと10日ですね.