HTML5＆CSS3 4-01
canvasを使ってJPEG画像を透過させる

canvasを使って、JPEG画像を透過表示する方法を紹介する。通常、透過表示するにはPNG形式の画像を使用するが、これをJPEGに置き換えることで、ファイルサイズを抑えることが可能になる。

制作・文／佐藤とも子・サチコ（螺旋デザイン）

BROWSER iOS…5over　Android…1.6over　IE…9over　Firefox…3.5over　Safari…3over　Chrome…2over

01

それでは早速、JPEGの背景を透過させてみよう。

方法を一言で説明すれば、canvasを利用してJPEGとアルファ付のPNGを合成する【1-1】【1-2】、という手順となる。

透過PNGを使うと普通にimgで配置するだけでいいのだが、canvasを使用することで、ファイルサイズが圧倒的に軽くなるという利点がある。

今回のケースでは、単純にPNG 形式の画像を使用するよりも、JPEG 形式の画像をcanvasで合成した方が、3 分の1ほどファイルサイズを小さくすることができる。

製品一覧ページのように、数十枚の画像を掲載しなければならないケースでは、かなりの差となるだろう。

【1-1】canvasを利用している部分のHTML。ソースはimgでJPEGを配置している。この部分を後ほどJavaScriptでcanvas にする。

【1-2】HTML のコード上はJPEGだが、背景が透過されている。

【1-3】ファイルサイズの比較。

02

次に、具体的な手順について説明する。今回、使用しているファイルはメインのJPEG 画像、マスク用の透過PNG 画像、外部JavaScriptファイルの3 つとなる【2-1】。

マスク用の画像は、べた塗り＋JPEGで表示する部分を透過したPNG画像を使用する。

ファイルの書き出しは、Photoshop の場合はPNG24＋透過で、Fireworks の場合はPNG32でおこなおう【2-2】。

【2-1】ファイル構成の概要。

【2-2】白黒の画像では無く、アルファ付の画像でPNGを作成。

03

スクリプトは「canvasAlpha.js」に書き込む。

書き込む内容は、JPEGとマスク画像を読み込んだ後にcanvasを用いて合成する【3-1】となる。

canvasAlpha.js へのリンクはbodyタグを閉じる直前に書こう【3-2】。

【3-1】canvasAlpha.js。jQuery には依存していない。

【3-2】bodyタグで閉じる直前にcanvasAlpha.js へのリンクを記述。

04

canvas で画像を表示する部分のHTMLは、imgタグで画像を配置し、srcでJPEG 画像、data-alpha-srcでマスク画像を指定する【4-1】。

これだけでJPEG 画像を透過風に合成することができる。

【4-1】ごく普通のimgタグに「data-alpha-src」がついている。

05

画像部分は、今後のことも考えるとRetina 対応をしておきたい。そこで、画像の実寸サイズの半分の値をwidthとheigthに指定しておこう。

ただし、通常の画像はこれでいいが、canvas に2 分の1 のサイズを指定してもRetina 用のクッキリとした表示にならない。

この対応はCSSでサイズ指定をする【5-1】。これで完成だ【5-2】。

【5-1】308px×298pxの画像を使用し、2分の1 の値でサイズ指定をCSSで行う。

【5-2】サンプルはiPhone などのスマートフォン向けのものとなっているが、パソコン用のChromeやFireFox、IE9などでも動作する。

06

2012年11月現在、canvasに直接widthとheightの指定をすることでRetina対応が可能なブラウザは、MacOSおよびiOS用のSafari6 以降のみとなっている。

残念ながら、そのほかのOSやブラウザでは使用することができない（記事の対応ブラウザ表記はRetina対応を除いている）。

しかし、今後その他のブラウザでも実装されるようになれば、canvasAlpha.js の幅指定のソース部分「image.width」と「image.height」を「image.width/2」と「image.height/2」に変更するだけで Retina対応が可能となるので、作業が楽になる。

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。