Edited at

カラーマネジメント対応ブラウザか JavaScript で判定する


はじめに

最近のテレビ・ゲーム機・スマートフォンでの簡易調査が目的です。

パソコンのブラウザは詳解サイトさま1 があるのでそちらを参照してください。

記事とは関係ありませんが、カラマネ対応のおすすめ動画プレイヤーは mpv2 です。


実装

64x64青一色の PNG ファイルですが、

R,G,BG,B,R になる異常なプロファイルが埋め込まれています。

CanvasImageSource なデータを読み書きし、赤っぽかったら対応とします。


iccp.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>ICC v2 GBR in PNG</title>
<script>
window.addEventListener("load", function () {
var canvas = document.querySelector("canvas");
var surface = canvas.getContext("2d");

var png = document.querySelector("img");
surface.drawImage(png, 0.0, 0.0, 64.0, 64.0);

var result = document.querySelector("p");
var pixels = surface.getImageData(31.0, 31.0, 1.0, 1.0).data;

if (pixels[0] > 127) { // reddish
result.textContent = "CMS is working.";
} else {
result.textContent = "CMS is *NOT* working.";
}
});
</script>
</head>
<body>
<p>Not Available</p>
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAABDGlDQ1BpY20AAHicY2BgEnF0cXJlEmBg
yM0rKQpyd1KIiIxSYD/PwMLAysDPwMHAmphcXOAYEODDAAR5+XmpDKiAkYHh2zUQycBwWRdkFgNpgCu5
oKgESP8BYpWU1OJkoJEKQHZ8eUkBUJyxAcgWScoGs6eA2EUhQc5A9gogmy8dwt4BYidB2CdA7CKgJ4Ds
GyD16RD2G7A5YDYTyF6RktQKkL0MGsmaCoaWlpYKjin5SakKwZXFJam5xQqeecl6DBD3gAGLu1MQiV4j
DEBhDWF9DgSHIaPYGYQYAiSXFpVBmYxMxoT5CDOSpjMwbG9nYJC4iRBTmc/AwN/CwLDtMEIsfwEDg8VX
BgbmCQBaS0f1knKIvwAAAE1JREFUaN7tz0ENAAAIBKDT/p01hQ83aEAlk886zwkICAgICAgICAgICAgI
CAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAjcW1CHAX9GCM+oAAAAAElFTkSuQmCC"
>
<canvas width="64" height="64"></canvas>
</body>
</html>


PNG のチャンク gAMA + cHRM でもおおかた再現できます3 が、

iCCP を読めないと汎用性に欠けるので今回は使用していません。


動作確認

https://chabu.github.io/misc/iccp.html で実行できます。

異常なファイルは Argyll CMS4 の付属ツールや TweakPNG5 で作成できます。

Mac の人は ColorSync ユーティリティの使い方を覚えておいて損はありません。


検証結果

こういう見出しで書くものじゃないんですけど、以下の通りです。


対応


  • iOS 9.3 (iPhone)

  • Safari 9.1 (OS X 10.10.5)

  • Edge 13 (Windows 10 Version 1511)

  • Edge 13 (Windows 10 Mobile Version 1511)

  • Chrome 49 (Chrome OS 7834.67.0)




非対応


  • iOS 9.2 (iPad)

  • Wii U 5.5.1J

  • PlayStation4 3.50

  • PlayStationVita 3.57

  • Chrome 49 (Android 5.0.2)




おわりに

モニタの色域に変換されたか確認できないけど、ブラウザ内から無理だわーとか、

video 要素も CanvasImageSource なので Rec.709 の範囲で補正カーブを考慮したら色々判定できるなとか、

OS X の OpenGL はカラーマネジメントされていない6 ので、 WebGL と組み合わせて何かできそうとか。