JavaScript で Exif の Orientation をパースして画像を正しく表示する方法
雑にこの記事で目指すのをまとめると以下の状態です。 JavaScript（ブラウザ）だけで対応 Exif Orientation のパースをライブラリ使わずやる background-image でも使いたいので CSS transform は使わない 手法だけ知りたい方は下の方にコードがあるのでそれを見てみてください。 前段 iPhone などのスマホのカメラで撮った写真を無邪気にファイルアップロードして表示すると、逆さまになっている…という体験をしたことありますか？ 世に出回っているソフトウェアはそんなことないのですが、雑に作ったシステムだとありえます。 例えば以下のようなコード。これはブラウザでファイルを選択した時に画像のプレビューを表示する JavaScript です。よくある実装です。これはたいていの条件下のときには上手くいっているように見えますが、失敗することもあります。 <i
これが新常識！ レスポンシブな画像切り替え方法まとめ
マツカワ Webサイト制作／コンテンツ企画／Web広告／SEO／マーケティングを経験してきた雑食系Webクリエイター・プロデューサー プロフィール / Twitter / Facebook レスポンシブサイトでブラウザ環境に応じて画像を切り替えるには、サイトによって様々な方法で対処されていました。 これまでの方法が抱えていたデメリットと現在（これから）の標準となる実装方法、レガシーなブラウザへの対応方法など、レスポンシブな画像切り替えに必要な知識をまとめました。 これまでのレスポンシブイメージの問題点 レスポンシブサイトの画像切り替えは、CSSで表示・非表示を切り替えたり、JavaScriptでブラウザ環境を判別して画像を出し分けると言った手法が一般的でした。 たしかに、これらの方法でも意図したように画像を表示することはできるのですが、理想的な解決策ではありません。 具体的には次のような問
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
rgbaster.jsを使って画像の色を抽出してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は、画像からカラー情報を抽出する方法について書いてみたいと思います。 rgbaster.jsを用いた画像の色を抽出 まずは下記URLからrgbaster.jsをダウンロードします。 rgbaster.js https://github.com/briangonzalez/rgbaster.js/tree/master ダウンロードできたら、rgbaster.jsを読み込みます。 <script src="js/rgbaster.js"></script> サンプリングしたい画像に任意のidをつけてrgbaster.jsで読み込んであげましょう。 <img src="images/sample.jpg" id="sampling" height="600" width="900" alt=""> 次にRGBastarのcolorsメソッドに、第1引数でサン
きれいなおねいさんのあつめかた：Bijostagramのはなし。 - TMBのおぼえがき
Bijostagram（びじょすたぐらむ）というWebサービスを作ってみました。 Bijostagram - Cute Girls on Instagram きれいなおねいさんは、好きですか？ Bijostagramとは？ Bijostagramは、きれいなおねいさんの画像がたくさん眺められるサービスです（個人的に作りました）。一番の大きな特徴は、Instagramから自動的にきれいなおねいさんの画像を集めてくる、というところです。Bijostagramでは、集めてきたおねいさん画像をランダムに表示しています。 Instagramは写真版Twitterで、しかも撮影した画像をオサレな感じで加工できてツイートできるというサービス。２月末に公式のAPIが公開されたので、いじってみました。→インスタグラムのAPIについてはこちら Bijostagramは、画像抽出と画像配置のアルゴリズムをPer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
