Chromium で Canvas.toBlob が試験的に利用可能になっています - Qiita
5年前から多くの注目を集めていた Chromium の Issue 67587 に進捗があり、 Canvas.toBlob が Chrome Canary 47.0.2498.0 で試験的に利用可能になりました。 追記: Safari 11 にも Canvas.toBlob が実装されました。 本題 ★ Issue 67587: Add toBlob to Canvas element. 174 people starred this issue. Currently, the html5 canvas element has a toDataURL method, which outputs a DOM string representing the backing bitmap. With the File API now widely implemented, it is appro
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
Animated GIFs the Hard Way
When doing the new website for the Sublime Text 2.0 launch, instead of just screenshots, I wanted to have animations to demonstrate some of its features. One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the <video> element. Animated GIF files would have been a candidate, except for two issues: the 256 color
「Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装」の実装方法 - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas>
iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas>by @dbloom (comments on Hacker News) Apple announced the iPhone 5 last week. And what Apple product launch would be complete without a new web presence? Every new Apple web presence does new things using the web platform. A promine
+BLOG
+BLOG ヤバイ！AMAZONプライムデーでこれ買った！ベスト1 2023/7/12 地元民が選ぶ名古屋グルメおすすめ12選 2022/7/22 モンブランクレープが食べられる『IVY’s GELATO&Coffee』 2022/7/8 2022/7/11 洗車後のコメダ新作『ミルクロネージュ』が身体に染みた 2022/7/3 真夏日PM3:00地獄のジムニー洗車 2022/7/2 『ブルーボトルコーヒー』でワッフルコーヒータイム 2022/7/1 灼熱地獄で食べるレッドチリスモーキーワッパー 2022/6/30 毎年恒例のすき家でニンニク祭してきた 2022/6/29 2022/6/30 小袋ナッツどれがいいんだ問題を解決する 2022/6/28 買うべき名品！ドンキの『ナッツ&デザート』 2022/6/27 +BLOGは名古屋のフリーランス個人ブログです！ 人気記事 ヤバイ！AMAZ
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
JavaScriptで画像のクラスタリングによるドット絵風加工 – Rest Term
pixel clustering using k-means++ 前回のJavaScriptでPoisson Image Editingによる滑らかな画像合成に引き続き、HTML5 Canvasを使ったJavaScriptによる画像処理の一例を紹介します。 今回は画像の画素値に対するクラスタリング(分類)を画像加工用途に応用します。クラスタリングには各画素のRGB値を特徴ベクトル(次元数3)としてk-means法と呼ばれる手法を使って行います(実装上はk-means法の初期値選択アルゴリズムを改良したk-means++法を利用)。以下のサイトでOpenCVを利用した実装例が紹介されています。 k-meansクラスタリングによる画像分割，減色 – opencv.jp 上記サイト内でも言及されているように、k-means法による画像の領域分割や減色処理はあまり良い結果が得られないことが知られて
#2「JavaScriptでおっぱいを動かす」 tech.kayac.com Advent Calendar 2012 - KAYAC Engineers' Blog
カップル爆発しろ どうも。「何かよく知らないけど訳分かんない人だと思ってた」と社内で最近言われたHTMLファイ部のdamele0nです。 このエントリはtech.kayac.com Advent Calendar 2012 2日目の記事です。 テーマは「私の中のマイイノベーション 2012」 季節のせいか周囲ではカップルが続々と誕生して次々とイノベーションを起こすなか、僕はといえば相変わらず人生にしかれた非モテのレールを光のスピードで突き進んでいます。 僕だって、2人でイノベーションを起こしたい…。 僕だって、冬のせいにしたい…。 僕だって、クリスマスに七面鳥抱えながら海岸沿いを2人でキャッキャウフフしたい…。 僕だって、ちちくりたい…。 僕だって、僕だって、僕だって…。 安心してください。 僕は、なんですか？ あなたは、なんですか？ そう、エンジニアです。 無いものは作ればいい。世界なん
Fixture is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
Arctic.js入門編 | BLOG - DeNA Engineering
はじめまして、スマートフォンSG部のchikathreesixこと近澤です！ 僕もついにエンジニアブログに投稿することになりました！ 今後ともどうぞよろしくお願いします！ さて今回は、随分遅くなってしまいましたが、1月に公開されたArctic.jsについてご紹介させて頂きます。 Arctic.jsとは スマートフォンのブラウザで動くゲームを作るための、フレームワークです。 JavaScriptで書かれており、JavaScriptを使って利用します。 スマートフォンブラウザ向けのゲームを作るためのフレームワークなので、スマートフォンのアプリは作れません。 どんなゲームが作れるの？ 弊社Mobageプラットフォームで提供している「住み着き妖精セトルリン」における「おさんぽ」や、 「海賊トレジャー」の「海戦」、「サルベージ」、「ボスバトル」のような、アクション性やインタラクションを求められるゲー
WebSocket で PNG 画像をバイナリ転送して、JavaScript で展開して表示してみた - hakobera's blog
Node.js で WebSocket-Node を使って実装しました。 転送するめぼしい画像が見当たらなかったので、デスクトップをスクリーンキャプチャして転送してみました。 ブラウザはChrome 17以上か、Firefox 11以上が必要です。サーバ側は scrrencapture コマンドを利用している関係で Mac OS X限定です。 デモ 上半分が転送元のデスクトップ、下半分が転送された画像をブラウザで表示したものです。ニコ動のコメントの飛び具合を見るとわかると思いますが、800*600の解像度の画像を、横640に縮小して転送して、1FPSくらいです。（※ これはWebSocket の限界ではありません。速度は向上させる余地はかなりありますが、今回の本質ではないので気にしないことにします） ソースは github に置いてあります。 hakobera/screencast · G
ActionScript入門Wiki - Arctic.js
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
potraceをjavascriptに移植した - Webと文字
生存報告 （ ^ω^）とりあえず生きてます。 potraceとは potraceとはラスター画像からSVG等のベクター画像を作成するソフトです。無料で使えてソースも公開されているオープンソースなソフトです（参考資料１）。元はCで書かれていますが、python、ActionScript、C#に移植されていたりします。 だから何ができるの？ 左が元のビットマップ画像、右がそれをpotraceでトレースした画像 C→javascript(´・ω・`)、ActionScript→JavaScript(ﾟ∀ﾟ) ActionScriptとJavaScriptは兄弟みたいなものなので移植はとっても簡単です。今回は参考資料２をパクって参考にしてjavascriptに移植してみました。 処理フロー imgタグで画像を読み込み 画像をcanvasに転写 画像をグレースケールに変換 画像を二値化 画像の輪郭の
HTML5 花火大会
HTML5の花火大会が始まりました。 JavaScriptやCSS3で書かれたコードが美しい花火となって 夏の夜空を鮮やかに彩ります。 START
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://phinajs.com/
GitHub - sublimehq/anim_encoder
CodePen - Touch device jelly menu concept
http://www.cmmntr.com/m/22
Three.js – JavaScript 3D Library
