Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.

by 山崎 大助, GENOVA and デジタルハリウッド講師 @_AIR_NOTE

こんな事もやってます

「 HTML5で画像編集アプリ:safariブラウザ推奨 」

(開発途中の為、バグがあります。ご了承ください)

タイトル的にはきな臭い感じはしますが・・・。。。^^;
まずは画面から見ていきます!!

!!

pixastic.js ( MIT License )
www.pixastic.com/lib/download/

お!こんなライブラリありました。!?(あっみんな知ってたの!!)

pixasticを使用してるツールバーpixasticを使用してるツールバー

pixasticを使用してるツールバー

pixastic.js

良い点: 簡単に画像加工ができること!

悪い点: 一度画像を修正すると元に戻せなくなる!

対処方法1:画像の処理をおこなう毎にLocalStrageへデータを履歴保存。
この方法を取れば間違った操作をしても履歴データへ戻すことが可能となる

pixastic利用例

ちなみにfontは
Google Web Fonts(英文字)を使用

( 誰か日本語 WebFontsを軽〜く、簡単に使える方法教えて! )

Canvas

base64.js
canvas2image.js
の2つのライブラリでCanvas内の画像を書きだす

FileLoading はCSS3

このスライドはimpress.jsを使用

[ ← ] [ → ]