Instagramのような画像加工について調べました。 : コーヒーと本と甘いもの
コーヒーと本と甘いもの Rails, AngularJS, iOS, デザイン, CI, スタートアップ, 登山, バスケなどに興味があります。 今回は、iOSやAndroidのようなネイティブアプリではなく、JSでinstagramのような画像処理を行う方法を２つご紹介しまます。 Filtrr2.jsを使う方法 filtrr2.jsはJSによる画像加工ライブラリです。html5のcanvas要素に描画することで実現しています。使い方はとても簡単です。 ソースコードを以下からダウンロードします。 https://github.com/alexmic/filtrr/zipball/master 依存コードも含めて、filtrr2.jsをアプリケーション内に配置します。 以下のようにFiltrr2クラスにイメージ要素のIDと描画オプションを指定します。 var topImage = Filtr
canvasのlazyな描画 - ぶれすとつーる
ご無沙汰してます、nazomikanです。 最近、趣味でフラクタルとかで遊ぶことが多く、フラクタル特有な計算量の多さに日々ブラウザが悲鳴をあげています。 そんなこともあってUI-Blockをさせないようにあれこれやった手法を紹介 まず最初に何も考えずに描画するコード 描画コード (github) ディレクトリ構成 (github) 結果(ブラウザ落ちるかもしれないので新しいウィンドウで見ることをおすすめします) http://nazomikan.com/archive/20121007/001/ まぁ当然大きな画像で、かつ1pxごとに計算して色を決めてるわけなので940*940ともなると死ぬほど処理がブロックされてブラウザ固まります。 残念ですね、非常に残念ですね、もはやブラクラです。 昔から大きな処理をするときはasyncにしなさいというのでlazyLoop(非同期なループ処理)を適用さ
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
Create a Drawing App with HTML5 Canvas and JavaScript
This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a worki
Inkscape機能拡張。ドローデータをHTML5/Canvasへ出力·Ink2canvas MOONGIFT
Ink2canvasはInkscapeで作成したドローをHTML5/Canvasに保存するソフトウェア。 Ink2canvasはInkscape用、Python製のオープンソース・ソフトウェア。オープンソースのイラストレーションソフトウェアとして有名なInkscape。数年前はまだまだ不安定だったが、最近ではずいぶん実用的になっているようだ。 出力例 描いた図をSVGで出力できるので、Webとの親和性も高い。だがSVGはXMLベースなので修正するのが大変かも知れない。そこでさらに便利にCanvasタグ化してしまうソフトウェア、Ink2canvasを使ってみよう。 Ink2canvasはInkscape用の機能拡張だ。インストールすると、Save asの項目にHTML5が出るようになる。そして保存するとHTMLファイルが生成される。中にはJavaScriptを使ってCanvasタグにレンダリ
texteffects
Typographic effects in canvas Stay organized with collections Save and categorize content based on your preferences. My Background <canvas> entered my awareness in 2006 when Firefox v2.0 was released. An article on Ajaxian, describing the transformation matrix, inspired me to create my first <canvas> web-app; Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives;
HTML5 Canvas For Absolute Beginners – Part 1 | onlyWebPro
Canvas, a HTML5 element that can be used for rendering graphics, animation, graphs, photo compositions or any other visual objects on the fly by using JavaScript. In this tutorial, we will describe how to implement canvas in your web projects. Supported Browsers Before we start our tutorial, let’s check out whether your browser support this latest technology or not. Below is the list of the browse
jCanvas | jQuery meets the HTML5 canvas
Seriously, what is jCanvas? jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more. The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 c
Dynamic Heatmaps for the Web
heatmap.js Dynamic Heatmaps for the Web heatmap.js is a lightweight, easy to use JavaScript library to help you visualize your three dimensional data! Use it to add new value to your project, build a business based on it, study and visualize user behaviour, or why not build something completely crazy/awesome? Whether you want to have an aggregated overview of your users behaviour, or look at thous
canvasのテスト
HTML5の目玉機能(?)、canvas要素とJavascriptでいろいろサンプル作成中。画面をマウスクリックでパーティクルが吸着するよ。 追記：ちょっと修正 (19:30) Javascriptのソースはこんな感じ。 [sourcecode language=”javascript”] const NUM = 500; //円の数 const WIDTH = 400; //画面の幅 const HEIGHT = 400; //画面の高さ var speedX = new Array(NUM); //X方向のスピードの配列 var speedY = new Array(NUM); //Y方向のスピードの配列 var locX = new Array(NUM); //円の中心位置のX座標の配列 var locY = new Array(NUM); //円の中心位置のY座標の配列 var r
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS
Canvas, File API, Drag&Drop API の組み合わせたデモです。Instagram みたいにフィルターによる画像処理ができます。 【動作確認ブラウザ】 Chrome 8, FireFox 3.6 (Chrome 7 は File API はサポートしていますが、iframe 内では動作しないため、jsdo.it 上では動作しません） 【処理】 1. Drag&Drop API で画像ファイルを取得 2. File API で画像ファイルを DATA URI 形式に変換して、Image オブジェクトで読み込み 3. Image オブジェクトを Canvas の drawImage で描画 4. Canvas の getImageData を利用して、画像のピクセルデータを取り出し 5. ピクセルデータの加工 6. 加工したデータを Canvas の
HTML5 TechTalk#3 & ハンズオンセミナー « HTML5.JP ブログ
html5-developers-jp 主催「HTML5 TechTalk#3 & ハンズオンセミナー」が2010年1月15日(金)と16日(土)に行われました。参加したみなさま、お疲れさまでした。 今回はハッカソンではなくハンズオンにしましたが、如何でしたでしょうか。また 3 時間で説明とコーディングが終わるよう、とても限定したテーマに取りん組んで頂くよう企画しました。初めての企画でしたので、みなさんのご期待にお応えできたかどうか心配ですが、今後もハンズオンのような形で、多くの方に気軽に参加できるような企画を考えていきたいと思いますので、遠慮なくリクエストください。（私に直接リクエスト頂いても構いませんし、html5-developers-jp に投げて頂いても構いません。） 今回の Tech Talk とハンズオンで私が使った仕様を公開しますので、復習にご参考にして頂ければ幸いです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvas Cheat Sheet
The HTML5 logo - K3D demo in HTML5 Canvas and JavaScript (no Flash!)
CSS 20 stunning examples of CSS 3D transforms
Paper.js
Blogger
喀什盐瘴物流有限公司