iT邦幫忙

1

CIELab轉RGB在網頁上呈現的小研究

前幾天有個問題是關於「將 CIELab 色彩空間的值,在網頁前端顯示出來」

其中一個解法是把 CIELab 先轉換為 CIEXYZ
再從 CIEXYZ 轉為 SRGB

因為個人有研究過 pdf 的檔案格式
知道 pdf 可以直接寫入 CIELab 的顏色值
剛好現代的瀏覽器也可以直接預覽 pdf
所以想試試看「自己寫的轉換式」跟「瀏覽器讀取帶有 CIELab 顏色的 PDF」呈現的結果是否相同

測試方法為:

  1. 產生一個單頁的 pdf,將指定的 (L*, a*, b*) 顏色填滿整頁。
  2. 用 iframe 在瀏覽器上顯示這個 pdf。
  3. 將 (L*, a*, b*) 用自己寫的轉換式換算成 (R, G, B)。
  4. 建立一個 div 方塊,背景色填上剛剛算出的 (R, G, B),並把位置移動到 iframe(pdf) 的中央。
  5. 比較兩者的顏色是否相同。

程式 Demo 如下
https://jsfiddle.net/40cd19rf/

當用 (L*, a*, b*) = (40, 50, 60) 測試,在不同瀏覽器的結果如下:
(左: Firefox, 中: Chrome, 右: Edge, 作業系統 windows 10)
https://ithelp.ithome.com.tw/upload/images/20210413/20112943QYC2sIzQpD.png

  1. Firefox 會出現顏色不相同的區塊,而 chrome 跟 edge 則看不出顏色差異。
  2. 雖然 Firefox 的 div 看似比較淡,但截圖到繪圖軟體比較後發現是 pdf 區域顏色比較深的視覺誤差。
  3. 後來儲存 pdf 檔案,並用 adobe pdf reader 開啟,顏色與 div 區塊一致。

結論:只有 Firefox 的 pdf 區塊顏色與其他人不同,轉換式應該是可用的。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
0805cyc
iT邦新手 4 級 ‧ 2021-04-18 15:56:14

謝謝您的研究!我會好好參考的

我要留言

立即登入留言