JavaScript で Exif の Orientation をパースして画像を正しく表示する方法
雑にこの記事で目指すのをまとめると以下の状態です。 JavaScript（ブラウザ）だけで対応 Exif Orientation のパースをライブラリ使わずやる background-image でも使いたいので CSS transform は使わない 手法だけ知りたい方は下の方にコードがあるのでそれを見てみてください。 前段 iPhone などのスマホのカメラで撮った写真を無邪気にファイルアップロードして表示すると、逆さまになっている…という体験をしたことありますか？ 世に出回っているソフトウェアはそんなことないのですが、雑に作ったシステムだとありえます。 例えば以下のようなコード。これはブラウザでファイルを選択した時に画像のプレビューを表示する JavaScript です。よくある実装です。これはたいていの条件下のときには上手くいっているように見えますが、失敗することもあります。 <i
MediaStream 収録 API - Web API | MDN
MediaStream 収録 API (MediaStream Recording API) は、単に Media Recording API または MediaRecorder API と呼ばれることもありますが、メディアキャプチャとストリーム API および WebRTC API と密接に関係しています。 MediaStream 収録 API を使用すると、MediaStream オブジェクトまたは HTMLMediaElement オブジェクトによって生成されたデータを分析、処理、またはディスクへの保存のためにキャプチャすることができます。 また、驚くほど簡単に作業できます。 MediaStream 収録 API は、MediaRecorder という 1 つの主要なインターフェイスで構成されており、これが MediaStream からデータを取得して処理のためにユーザーに配信すると
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://vincentgarreau.com/particles.js/particles.js"></script> </body> Step 2: HTML コンテンツの一番下あたりに、粒子の元となる空divを用意します。 <body> ... コンテンツ ... <div id="particles-js"></div> <script src="http://vincentg
![[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/cad2019e6d6cf42b90ad3ce1d63503395565f36b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111405.png)
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
The Portfolio of Hakim El Hattab
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
33 Best HTML5 and CSS3 3D Demo Examples - freshDesignweb
In this article you will see that there are some amazing HTML5 and CSS3 3D graphics examples with demo link. Usually, HTML5 goes hand in hand with CSS3 to create the professional web experiences. In fact, websites developed in HTML5 animation will not require adobe flash support on your Web browser anymore, provided that your browser supports HTML5. Many people believe that HTML5 new advanced tech
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる：第卌一回]
globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。 ★html 側 onload = function() { // 画面ロード時に描画を実行 draw(); }; function draw() { // id: globalCompositeOperation で 2 次元描画を行うことの定義 var c = document.getElementById("globalCompositeOperation").getContext('2d'); // fillStyle で緑の塗りを指定 c.fillStyle = "rgb(0, 255, 0)"; // fillRect で塗りつぶした矩形を描画 c.fillRect(40, 0, 20, 150); //
globalCompositeOperation プロパティ - Canvasリファレンス - HTML5.JP
構文 context . globalCompositeOperation [ = value ] 現在の合成処理を返します。後述のリストの通りです。 値をセットして、合成処理を変更することができます。未知の値は無視されます。 仕様 globalCompositeOperation 属性は、どのように図形や画像を現存するビットマップ上に描画するのかをセットします。それらは、globalAlpha が与えられると、現在の変換マトリックスが適用されます。この属性値には下記リストの値をセットしなければいけません。下記では、描画元イメージ A はこれからレンダリングしようとしている図形や画像を表し、描画先イメージ B は現在のビットマップ状態を表します。 source-atop A atop B。描画元イメージのうち、両方のイメージが不透明な部分が表示されます。描画先イメージのうち、描画先イメージ
toDataURL() メソッド - Canvasリファレンス - HTML5.JP
構文 url = canvas . toDataURL( [ type, ... ]) canvas のイメージに対する data: URL を返します。 第 1 引数を指定すると、それは、返されるイメージのタイプ (例えば、PNG や JPEG) を制御します。デフォルトは image/png です。このタイプは、指定のタイプがサポートされていない場合も適用されます。残りの引数はタイプ固有のものとなり、下表の通り、イメージが生成される方法を制御することになります。 仕様 toDataURL() メソッドは、引数がない場合は、PNG ファイルとしての画像表現を含んだ data: URI を返さなければいけません。[PNG] canvas にピクセルがなければ（つまり、幅も高さも 0 なら）、このメソッドは文字列 "data:," を返さなければいけません。（これは、最短の data: UR
はてなブログ | 無料ブログを作成しよう
わたし的棚ぼた一万円選書 急に千葉さんに手渡された封筒、開けてみたら1万円札が1枚。何ごとかと思えば、同期の出張を代わったお礼をもらったらしい。 「葵はワンオペで育児してくれたから」と半分わけてくれました。 泡銭の1万円 これはもう、わたし的1万円選書をしろという思し召しなのでは……
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ上で動くイラストレーターのOSS「mondrian」:phpspot開発日誌
実際のサンプル - getImageData / putImageData メソッド - Canvasリファレンス - HTML5.JP
Tumblr