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 形式に変
Close Pixelate · David DeSandro
Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It's basically a simple demo for canvas' imageData functionality. This project lives on GitHub where you can download the script and these examples. View Close Pixelate on GitHub Options The function accepts an array of objects. Each object holds a set of option
JPEGs with Alpha Channels?!? | jackadamblog
I wanted a reasonably sized photographic image with a 24-bit alpha channel. So I used a JPEG for what JPEGs are good for and a PNG for what PNGs are good for… I combined them using an HTML5 canvas element and then inserted into the DOM. The results look the same as using a normal 24-bit PNG but are one-half to one-sixth the size. In one case we got a 573KB 24-bit PNG down to a 49KB JPEG with a 4KB
Dynamic favicons
Google Calendar released a new favicon which prompted a few mentions from friends on Twitter. The first, probably more important was from Cennydd: New Google Calendar icon most un-Googley. I like it. Then Danny pitched in with: I see Google Calendar has a new icon. They could use the current date rather than "31" though So let's fix that shall we? UK EVENTAttend ffconf.org 2024 The conference for
css3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっき
はいー、できましたー。text-shadowを1ピクセルごと配置してモナリザを表現しています。 これまでいくつか「cssだけで◯◯」を見てきましたがあんなのはハッタリです。タグ使いまくりで全然cssだけじゃありません。この手法を使えばテキストとcssがあれば再現できます！ ジェネレータも作ったので、よかったら遊んでみてください。windowsのChrome6 devとFirefox3.6.6で動作確認していますが、Chromeはtext-shadowの描画が遅いので、Firefox推奨です。 Mona Lisa de text-shadow (CSS) - gallery 注意: Firebugなどでcssを見ると応答なしになったり場合によってはクラッシュするのでしっかりと準備して自己責任でお願いします。 モナリザの原理 text-shadowはテキストの影を演出するものです。構文は以下の
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング
デブサミ2010のhtml5セッションで見たデモ（Movement tracker）*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 １．videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =
FireFox3.6の加速度センサーで遊ぶ - When it’s ready.
PCのブラウザで加速度センサーが取得出来る必要性があるのか疑問だが、やってみたら相当面白かったので紹介 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>加速度センサーテスト</title> <script> var count = 0; var v = 50; var h = 50; var win
A JPEG Encoder for JavaScript [bytestrøm]
Herzlich Willkommen auf meiner Webseite, mein Name ist Andreas Ritter und ich bin Dipl. Media System Designer (FH). Seit meinem Abschluss im Jahre 2008 an der Hochschule Darmstadt arbeite ich als freiberuflicher Webdesigner und Programmierer. Für meine Kunden realisiere ich Projekte von der Idee bis zur Umsetzung und Veröffentlichung. Dazu zählen das Ausarbeiten eines schlüssigen und sinnvollen K
![A JPEG Encoder for JavaScript [bytestrøm]](https://cdn-ak-scissors.b.st-hatena.com/image/square/579c8c216c3cdf370a213b8192995f08f7180024/height=288;version=1;width=512/https%3A%2F%2Fwww.alzenau-in.de%2Fmedia%2Fimages%2F254_373_large.png)
javascriptで擬似ポリゴン | 村式開墾日記
こんにちは。中川です。 先日行われたカヤックさん [1]とクックパッドさん [2]主催の「技術者交流会 ～おいしいソースのつくり方～ 」 [3]のライトニングトークで発表させていただきました。 たくさんの技術者の方と交流でき、発表も聞けて料理もおいしく、非常に充実した時間を過ごせました。 関係者の皆様、このような機会を設けていただきありがとうございました。 さて、当日はHTML5のcanvasと、ドロネー三角形分割という技術を使って写真をポリゴンっぽくするデモを発表しました。 特徴点を手で打っておけば後は自動で面を生成します。 プレゼン資料： http://seeds.ville.jp/electriccafe/slides/ [4] デモ： ※Firefox3.0.9、chrome2.0β でのみ動作を確認しています。 IEやSafari、chrome1.0では動きません。 1)ドロネー
loupe.js (photorealistic loupe effect for images)
loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
js at current from liuliu's ccv - GitHub
Canvas Rider
Wonder-boys.net
Home | Nidhis
canvasplayer: GML Playback using Processing.js