#daiizメモ

Scrapboxに夢中

Retinaディスプレイでのchrome.tabs.captureVisibleTab

MacBookのRetinaディスプレイなどの高解像度ディスプレイを使用していると,Chrome拡張機能のAPI chrome.tabs.captureVisibleTabで撮影されるタブのスクリーンショットの画像が縦横N倍のサイズになるらしい.Nの値はJavaScriptでwindow.devicePixelRatioの値として得られて,Retinaディスプレイの場合は2だった.自分で作って使っているSVG ScreenShotにおいて,スクショ範囲のリンク位置などを描画するSVGは等倍で取得できるが,その背景に表示するスクショ画像のサイズが大きくなってしまう問題で困っていた.具体的な状況としては,本来はこうなって欲しいシーンで,

f:id:daiiz:20161221233335p:plain

下の2つの画像を左上を基準に重ねたような,スケールがズレたものが得られてしまう. これだと背景画像が大きくて,リンク位置がずれてしまっている.

f:id:daiiz:20161221233208p:plain

f:id:daiiz:20161221233217p:plain

このように対処して解決した.

関連情報

日頃 MacBook Pro 使いの id:kanata_02 の報告によってこの問題に気付き,SVG ScreenShot の修正ができました.(だいぶ前の話になりましたが,)ありがとう!

以上, TeamJ Advent Calendar 2016 の21日目の記事をお送りしました.
今年も残すところあと10日ですね.