せんりつの昼行灯:HTML5：Canvasを画像に保存しようとしてハマる
2012年10月25日 HTML5：Canvasを画像に保存しようとしてハマる HTML5のCanvasでお絵かきをするサンプルはググればたくさん出てきます。 そこで、それを画像ファイルとして保存しようとしてみました。 まず、以下のようにしてCanvasのデータを取得する。 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var data = canvas.toDataURL("image/png"); data = data.replace("data:image/png;base64,", ""); このデータをサーバにPOSTして、サーバ上に保存する。 合わせて、スマフォ(Android)にダウロードもしようと考えました。 サーバ側の処理はこんな感じ。 <
FileAPI でカメラを起動し、Canvas上に画像を描画させる - はしくれエンジニアもどきのメモ
FileAPI でカメラを起動し、Canvas 上に画像を描画させる File API でカメラを起動し（今のところPC では画像選択のみ）、その画像をCanvas 上に描画させます。 なお、iPhone Safari では、カメラで撮影したような 2[MB]以上の画像は、そのままではCanvas に描画できないようなので、リサイズをしています。 サンプル カメラ付きのモバイル端末では、カメラが起動するはずです。 今回は、モバイル端末では、上限幅を超えていればリサイズ、超えてなければそのまま描画。モバイル端末以外では、そのまま描画としてます。 ファイル選択（カメラ起動）テスト iPhone4s Safariでは、「ファイルを選択」をタップすると以下のように表示されます。 コード FileAPI で画像を選択またモバイルではカメラを起動し、画像をCanvasに表示する。なお、iP ... コ
Android 4の新機能でカメラWebアプリ作ってみた (5/5)
撮影した画像を加工する 最後に、Canvas上に表示した撮影画像を加工してみましょう。第82回で作成したグレースケールフィルターを流用します。Canvas内容を操作する部分は共通ですので、プログラムはそのままです。 ここでは240×320サイズの画像加工しかしていないため、すぐに処理が終わりますが、撮影したオリジナル画像のまま処理すると時間がかかります。カメラで撮影した画像をグレースケール加工するプログラムがサンプル5です。 ■サンプル5 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content= "initial-scale=1"> <title>撮影した画像を加工</title> </head> <body> <h1>撮影した画像を加工</h1> <form> <input type="fil
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
Web Messaging API を使ってみる - Qiita
目的 HTML5 に Web Messaging API というのがある。サーバを介さずブラウザ間で通信ができるインターフェイスが提供されている。 調査がてら把握したことを整理。 概要と用途 Web Messaging API はブラウザの任意のドキュメント間での通信をサポートするインターフェイス。現在、postMessage と MessageChannel という API が用意されている。どちらも任意の window オブジェクト同士で、任意のタイミングでデータの受送信をさせることが可能。 よく使われる用途として、iframe で別ドメインのコンテンツを読み込み、そのドメインと通信させる。 例えば、Facebook のいいねボタンは、 iframe で facebook.com のドメインを埋め込み通信させ、その中の cookie の値を取得してそのブラウザが保持するユーザ情報を表示
canvasでのお絵かきソフトの作り方と実例
ブログの運営者：金子晃之 YouTubeチャンネル登録者120万人超。パソコン関連の著書を4冊出版してます。 HTML5にcanvasという機能があり、それを使って簡単なスマホでもパソコンでも使えるお絵かきソフトを作って見ました。 色々なサイトを参考にさせてもらって作れました。 参考にしたサイトが多すぎて省かせてもらいますが、すごい機能つけてる人もいっぱいいるんだなと感心しつつ作ってみました。 お絵かきソフトは他に良い機能をもったソフトがいっぱいあるので、わざわざ作る必要もないのですが興味ある人は使ってみて自分でも作って見てください。 私は絵がめちゃめちゃ下手なので、ぐちゃぐちゃに書いてみました。 絵が得意な人はいいなーっていつも思うだけで結果書かないので、自分はうまくならないんですよね。 お絵かきソフトを使って見る お絵かきソフトの使い方使い方は簡単です。 １つ前に戻るボタンは「描きミス
PHPのみでHTML5のWebSocketを体験する方法 - susan-styleの日記
今までFLASH等を使わないと出来なかったソケット通信ですが HTML5で出来るようになりました。 まぁこのページ見てる人は説明不要でしょうから詳細な説明は割愛 本格的にはsocket.ioなどをインストールして〜というのがありますが PHPだけでサクッと体験したい方は続きを御覧下さい。 Saran Chamlingさんが作った「WebSocket Example」をダウンロード http://www.sanwebe.com/downloads/50-websocket-example すっごいシンプルな 「server.php（サーバファイル）」 「index.php（クライアントファイル）」 2つのファイルを解凍 仕組み的には 「server.php（サーバファイル）」をコマンドラインで実行、whileでループ 「index.php（クライアントファイル）」をブラウザから実行 という感
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
マイクロソフト、名作ボードゲーム「カタンの開拓者」ブラウザ版を無料公開 オンライン対戦もできるぞ！
マイクロソフトは無料ブラウザゲーム「Catan Anytime」を7月24日に公開した。名作ボードゲーム「カタンの開拓者」をブラウザ上で遊べるようにしたもので、HTML5対応ブラウザであれば無料でプレイ可能。スマホにも対応しており、Facebookやメールでプレイヤーを募ってオンライン対戦ができる。 「カタンの開拓者」がブラウザ上でオンライン対戦できるようになった 「カタンの開拓者」は、プレイヤーが無人島に入植し、土地から得た資源で島を開拓していくボードゲーム。もっとも繁栄したプレイヤーが勝利者となる。世界30カ国語以上に翻訳され、世界中でプレイされている人気作だ。 HTML5に対応しているブラウザであれば、OSやデバイスを問わずプレイすることができる そのほか、時間を空けても円滑に遊べるように自動トレード機能なども搭載。現在はβ版のため一部の仕様がカットされているが、8月中には3:1貿易
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
クリエイトウェーブ開発日記 FlashCS6のHTML5書き出したアニメをスマートフォンの画面に最適化させる
おつかれさまです。フッチーです。 最近FlashCS6のHTML5書き出しオプション「Toolkit for CreateJS」の使い方がようやっと判ってきました。 http://www.adobe.com/jp/devnet/createjs/articles/getting-started.html にも書いてありますが、CS6の「Toolkit for CreateJS」は、FlashをHTML5に変換するツールではありません。 Flashを使ってHTML5コンテンツ制作を開発・補助するものです。 慣れてくると、これが結構便利です。 jActionみたいに、複雑なゲームを作るのには向かないけど、アニメ制作とか、ちょっとした演出に使うのには最適です。 SNSゲームの、ちょっとした演出にも十分使えるのではないかと思っているところです。 さて、「Toolkit for CreateJS」を
【CreateJS】Toolkit for CreateJSでリキッドレイアウトの全画面
Flash CS6のToolkit for CreateJS、アニメーション作るときに非常に便利です。 今回年賀コンテンツをHTML5で全画面Flashっぽいのを作りたかったのですが、 標準の機能でどうやって作ったらいいかわからず、ググってみたところ kudox.jp さんの「CreateJS用のリキッドレイアウトライブラリを作ったよ」というエントリーを発見しました。LiquidLayouter for CreateJSというプラグイン名です。 http://kudox.jp/java-script/createjs-liquidlayout MITライセンスなので感謝して使っています。 詳しい使い方は本家サイトにお任せするのですが Toolkit for CreateJSで生成したコードを元にリキッドレイアウト化する方法を備忘録的にメモ。 Toolkit for CreateJSで生成さ
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
Dragon (Fireworks) - jsdo.it - Share JavaScript, HTML5 and CSS
// #! jsx // forked from Event's "Web Creator's Contest Q the 2nd【vol.1】エントリー用コード" http://jsdo.it/Event/frf8 import 'js/web.jsx'; import 'timer.jsx'; class Config { static const COUNT = 750; static const GRAVITY = 1.2; static const ALPHA = 0.15; static const WIND = 0.25; static const LIFE = 32; static const SPARK_LIFE = 8; } class _Main { static function main(args:string[]):void { var canvas = dom
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」（IDF Beijing 2013）において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール（ChromeブラウザとJavaのインストールが必要）。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販
『Flash Toolkit for CreateJSを試してみる その1』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリ 落書き(楽書き)カメラ Ver.1.1 サポートページ [Landing Type]
はやわかりHTML5ハイブリッドアプリ開発事情
TechCrunch | Startup and Technology News
TechCrunch | Startup and Technology News