Pyodide3 << Previous Next >> Harvest

png_files

利用 robot_w_world.py 將 png 圖檔實踐「關鍵色透明」:

作法是在程式碼中額外添加像素處理的邏輯。Canvas 的 drawImage 方法本身不會自動識別並跳過特定顏色的像素，所以我們必須手動介入。

處理方法:

要讓 robot_w_world.py 實現這個功能，必須修改 _draw_image 方法，或者在圖片載入後進行預處理。最直接的方法是在繪製數字圖片時，讀取其像素數據，並將特定顏色（例如白色）的像素的 Alpha 值設置為 0。

這會涉及以下步驟：

取得圖片像素資料：將圖片繪製到一個臨時的、看不見的 Canvas 上。

讀進所有像素：讀取這個臨時 Canvas 的像素資料。

修改像素的 Alpha 值：檢查每個像素的 RGB 值，如果它符合預設的「關鍵色」（例如，純白色 (255, 255, 255)），就將其 Alpha (透明度) 值設為 0。

將修改後的像素資料放回：將修改後的像素資料重新放回臨時 Canvas。

繪製臨時 Canvas：最後，將這個處理過的臨時 Canvas 繪製到我們實際要顯示的圖層上。

缺點與考量:

性能影響：像素級的處理是相對耗費資源的，特別是當有很多數字需要顯示時。這可能會導致動畫或初始加載時出現輕微的延遲。

複雜性增加：程式碼會變得更複雜，需要處理 Canvas API 的 getImageData 和 putImageData 方法。

關鍵色選擇：您需要確定一個所有數字圖片背景都一致的「關鍵色」。如果有些數字圖片背景是白色，有些是淺灰色，這個方法就會失效。

Pyodide3 << Previous Next >> Harvest