Blog

Canvasで画像の白を透過にする

2016.08.09Cat:Canvas html5 デザイナー

前回、Canvasで、
PNG画像の透過(アルファチャンネル)からシルエットを作成する方法を考えてみましたが、

今回は、投下していないJPGなどの画像で、
白い部分を透過させる方法について考えてみました。

↓作ってみたもの
DEMO

方法

今回はCanvasに画像を読み込み、
各ピクセルの暗さを透過度(アルファチャンネル)に反映する方法を使いました。

JavaScriptのおおまかな流れは、

  1. Canvasを準備して、画像ファイルをCanvasに読み込む
  2. getImageData()で読み込んだ画像のピクセルデータを取得
  3. 各ピクセルのカラー情報を分析して、RGBの一番くらい値を不透明度としてアルファチャンネルに反映

となっています。

 

ただ、DEMOを見ていただけるとわかると思いますが、
元の画像と透過させた画像を比べると、若干もとより薄い感じになってしまいました。

もっと正確な透過の方法が見つかったら、またご紹介したいと思います。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ