JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
potraceをjavascriptに移植した - Webと文字
生存報告 （ ^ω^）とりあえず生きてます。 potraceとは potraceとはラスター画像からSVG等のベクター画像を作成するソフトです。無料で使えてソースも公開されているオープンソースなソフトです（参考資料１）。元はCで書かれていますが、python、ActionScript、C#に移植されていたりします。 だから何ができるの？ 左が元のビットマップ画像、右がそれをpotraceでトレースした画像 C→javascript(´・ω・`)、ActionScript→JavaScript(ﾟ∀ﾟ) ActionScriptとJavaScriptは兄弟みたいなものなので移植はとっても簡単です。今回は参考資料２をパクって参考にしてjavascriptに移植してみました。 処理フロー imgタグで画像を読み込み 画像をcanvasに転写 画像をグレースケールに変換 画像を二値化 画像の輪郭の
Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas • The Union Platform, By USER1
This example shows how to create a simple multiuser drawing pad (aka shared whiteboard, multiuser sketchpad, or collaborative painting tool) using pure JavaScript and HTML5's <canvas> tag. The drawing pad updates in realtime when any connected user draws a line. Here's UnionDraw. Have a scribble! [View source] To manage communication between users, the JavaScript code uses OrbiterMicro, which conn
canvas の getImageDataが少しめんどくさい（特にローカルで動かす場合） - 地平線に行く
egg (JavaScript Effect Library)にモザイクイン・モザイクアウトを追加しました。 egg とは？ HTML5 の canvas を使った画像エフェクトライブライブラリです。 まだ数は少ないですが、結構きれいなエフェクトがかかります。 Firefox, Google Chrome をご利用の方は、ぜひ下記のページからサンプルをご覧ください。 Ver0.1.1の変化点 モザイクイン・モザイクアウトを追加 ダウンロードとサンプルは こちら(egg (JavaScript Effect Library)) からどうぞ！ 今回追加したエフェクトで、初めて canvas の getImageDataを使いました。 ピクセル単位で色を扱えて便利かなーと思ったんですが、少し扱いがめんどくさかったです。 1．ピクセルデータはキャンバスからしか取得できない 画像から直接 getIm
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 形式に変
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frank Hernandez
Paper.js