Fork
1
Fav
1
View
9890
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 82 lines
  • HTML 27 lines
  • CSS 15 lines
背景が透けて見える画像はきれいだけども
透過PNGにしなきゃいけないのが難点。
RGB+Alphaチャンネルなので、今回みたいに写真の透過PNGだと
普通にサイズが1M近くになっちゃう。

これを、JPG画像とマスク用の画像を元にして
canvasで透過PNGに加工してしまい、サイズを節約するプラギン作りました。
要はPhotoShopで普段やる「透過PNG書き出し」をcanvasでやってしまおうというもの。

→これでサイズが1/5位にできた!調べたらAppleのサイトとかでもフツーに使われてるテクニックだった。
ということでおそらくもっと優秀なプラギンは山のようにあると思います。

あと一応、画像がそれぞれ呼ばれた後と、すべての画像加工が終わった後にcallbackできるようにしています。
今回使ってないけど。詳しくはソースを。

苦労したのはマスクを掛けるjpeg画像とマスク元画像が完全にloadされてからcanvasでdrawしないと
どちらかしか・またはまったく描画されないこと。
特にIEではキャッシュ画像を読んだ場合はonload自体が発生しないことがある。IEまたおまえか。。。
ということで、BuggyなIE9の場合は、画像を呼び出すときに末尾にクエリストリングをつけるという苦肉の策で対応。

使い方。

■HTML側
→透過PNG生成に必要な画像のパスは、すべてhtml側にdata属性で書き出しておく。

"data-origsrc"にはcanvas非対応ブラウザ用に透過PNG版の画像パス、
"data-jpegsrc"にはアルファマスクしたいjpeg画像(png,gifでも可)、
"data-filtersrc"にはアルファマスクをするpng画像(透明にしたい部分を黒にした透過png)を指定。

■JS側
onready以降の好きなタイミングでcreateAlphaJpegを実行するだけ。

$("img").createAlphaJpeg();
$("#imgWrapper").createAlphaJpeg();(←画像を含むwrapperでも可能)

optionsも指定できますが詳しくはソースを見てください。
以下のURLを参考にしたけど、まだバグがあるかも。。。

参考にしたプラグイン、スニペット:
https://gist.github.com/yemster/1539102
https://github.com/7vsy/ImgLoader/blob/master/ImgLoader.js

※MITなので使うのは自由ですが当方で責任は一切持ちません。
  • Canvasでjpgを透過PNGに変換してサイズ削減
  • jQuery v1.10.2
  • Canvasでjpgを透過PNGに変換してサイズ削減

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

hirotweets

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by