画像をクライアント側で縮小してプレビューした後にアップロードする | egashira.jp
2015-08-10 iPhoneでひしゃげてしまうバグに対応した、JavaScriptで画像を縮小処理する方法を紹介します。 JPEGの回転情報から正しい向きで表示したり、ジャギーを減らすためにエルミートフィルターを使ったスムージングも行います。 画像を投稿できるサイトなどでは、写真を"魅せる"ためのサイトでない限りディスプレイ幅以上の解像度のデータは必要なく、アップロードされた画像ファイルをサーバ側で縮小処理したデータのみを保存していることも多いのではないでしょうか？ iPhoneのOSがバージョン6になってから、ようやくHTMLの<input type="file">がサポートされ、スマホ界隈でも画像投稿が熱くなってる感じがしますが、スマホのカメラはメガピクセルが当たり前なので、そのままだとファイルサイズが1メガ以上になってしまい、通信帯域を無駄に使ってしまいます。 HTML5で実用
input[type=file]で投稿画像を即時表示する際のメモ - Qiita
input[type=file]使って投稿画像を表示する時、 大抵の場合はFileReaderオブジェクトのreadAsDataURLメソッドを使うサンプルをよく見かけるけど、 Android4.0だと動作が不安定だった。 $(function(){ var $input = $('#js-input'), $result = $('#js-result'); $input.on('change', function(e){ var file = e.target.files[0]; if (!file) { return; }; var filereader = new FileReader(); filereader.onload = function(e){ var url = e.target.result, $img = $('<img>').on('load error', f
![input[type=file]で投稿画像を即時表示する際のメモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84ad770e90926d6b2d02a209513b70d0d75f54bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9aW5wdXQlNUJ0eXBlJTNEZmlsZSU1RCVFMyU4MSVBNyVFNiU4QSU5NSVFNyVBOCVCRiVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MiU5MiVFNSU4RCVCMyVFNiU5OSU4MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5OSVFMyU4MiU4QiVFOSU5QSU5QiVFMyU4MSVBRSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTcyN2JmODA5NWFkZTEyMjEyODdmMDJhMDgxNjA2ZWE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwRmlOR0FIT0xpQyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjJkOTVlMDM0NDUyYjNjYWZmMzI1YjYzOTBiNGMyNDM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dde4f00a8b480839bb02e0819ea064523)
ブラウザのみで使えるバーコードリーダーを作った - @znz blog
最近の HTML5 の getUserMedia API でカメラの画像をブラウザ上で処理できるようになったということで、 専用のバーコードリーダー機器を買ったり、 モバイル機器で専用のアプリを入れたりしなくても、 ノートPCの内蔵のカメラでも使えるバーコードリーダーを作ってみました。 使い方 Web Barcode Reader (2022-11追記: 放置していたら削除されてしまったためデモサイトは今はありません) を開いて、 既にPC上に画像がある場合はその画像を選択してください。 選択するだけでバーコードの認識が始まります。 iOS や Android などではファイル選択かカメラで撮影かを選べます。 BarcodeReader のライブラリを使って JavaScript のみで認識していて、 バーコードの認識は初回はちょっと時間がかかるようなので、 ゆっくり待ってください。 Go
HTML5で作られた「Clear」のサンプルが超スゴい件 - もとまか日記乙
以下を読んで。 kouseipapa.net/i » 「Clear」をまだ購入してない人はチェックしてみては？HTML5でサンプルが作られてますぞ！ おぉ、最近話題のiOSアプリ「Clear」のHTML5版サンプルだそうです。以下がそのサイト。 HTML5 Clear ちなみにこのサンプル、Safariで表示してアクションボタンから「ホーム画面に追加」してWebクリップ化し、Webクリップから起動すると、以下のように全画面表示になります。 おぉ、なんだかアプリっぽい感じ！面白い！ 最近のHTML5はすごいですねぇ。以前、調べるだけ調べてまだ何も出来てない以下とか、そろそろ何かやりたいなぁ、とも思う次第。 前から気になってたHTML5について色々調べてみました最近気になってきたjQueryについて色々調べてみました - もとまか日記乙 てことで。 ツイートする
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
Koji Morimoto Official Site
国内・海外のアニメーションカルチャーをトップクラスで牽引し進化し続ける “アニメーション監督／映像作家／ヴィジュアルクリエイター／アートディレクター" メインクリエーターとして創設に携わり長年活動していたSTUDIO4℃から基点を離れ、2011年、Φphyという少数精鋭のクリエィティブチームを主宰し、現在制作活動を展開している。 ビジュアルクリエイターとして世界各国のアートプロジェクトに参加、企業へのアートディレクションやCMやプロダクトデザイン、空間デザインなども行う。 現在、アニメーション表現と実写を駆使した、オリジナル実写映画の製作に強い意気込みを掲げている。 アイデアの源は常に「時間を撮りたい。次元の壁を払拭し、 俯瞰した着眼点でこの世を観る」という存在の極を無くした”軸の無”である。 オリジナルの浮遊感は森本ならではのSF的手法と表現であり 広がる地平線、壮大なランドスケープ、緻
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5で作られた3Dシェーダのオーサリングツール「MeShade」
MeShade HTML5+WebGLで作られた、ブラウザで動作する3Dシェーダのオーサリング・ツール「MeShade」が公開されています。 (英語) 「Mesh」というウィンドウの「Load」というボタンをクリックすると、デモが見れます。 「SpiderGL」という3DのJavaScriptライブラリが使用されているようです。
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS
なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さらですけどｗ なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。 上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。 時間がたつと別のメッセージが表示されます。 キャプションの埋め方$(document).ready(function(){ //Slides object with a time (integer) and a html string var slides = { 0: "This is the first subtitle. Y
PC、テレビ、iPadやiPhoneなどマルチデバイス対応のWebアプリケーションを構築する為のオープンソースフレームワーク・JOSHFIRE
ちょっと興味深かったので備忘録。 PCは勿論、iPadやiPhoneなど人気 のタッチデバイスから、TVなどなど、 マルチデバイス対応のWebアプリ を構築する為のフレームワークだそう。 オープンソースで配布されています。 基本的にHTML5+JavaScriptで作られているみたいです。さまざまなデバイスに対応可能で、動画や音楽、画像、ポッドキャストなどにも対応できるようです。 多様なデバイスに対応できる、初めてのオープンソースソフトウェア、と謳っています。基本的にHTML5+jsをベースとしているようです。 様々なデバイスに対応し、動画やポッドキャスト、画像やニュースなどの各メディアの配信も出来るように作られており、タッチデバイスへの対応は勿論、マウスやキーボード、リモコンで操作出来る事でユーザーに優しい設計とよりどりみどりとのこと。 Sample マルチデバイスで閲覧可能なビデオリス
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://camanjs.com/api/classes/Caman.html
camanjs.com
GitHub - arahaya/ImageFilters.js: A Javascript Image filter library for the HTML5 canvas tag.
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
Facebookがモバイル向けHTML5アプリプラットフォーム「Facebook Platform」を公開
FlashをHTML5に変換「Flash to HTML5 Converter」