画像をクライアント側で縮小してプレビューした後にアップロードする | egashira.jp
2015-08-10 iPhoneでひしゃげてしまうバグに対応した、JavaScriptで画像を縮小処理する方法を紹介します。 JPEGの回転情報から正しい向きで表示したり、ジャギーを減らすためにエルミートフィルターを使ったスムージングも行います。 画像を投稿できるサイトなどでは、写真を"魅せる"ためのサイトでない限りディスプレイ幅以上の解像度のデータは必要なく、アップロードされた画像ファイルをサーバ側で縮小処理したデータのみを保存していることも多いのではないでしょうか？ iPhoneのOSがバージョン6になってから、ようやくHTMLの<input type="file">がサポートされ、スマホ界隈でも画像投稿が熱くなってる感じがしますが、スマホのカメラはメガピクセルが当たり前なので、そのままだとファイルサイズが1メガ以上になってしまい、通信帯域を無駄に使ってしまいます。 HTML5で実用
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
Canvasで画像縮小をやってみた - aoyama-techのブログ
カメラ解像度アップにより、画像サイズがメガ超えしていることからアップロードへの影響があるため、 Canvasを使ってクライアントサイドで画像縮小をやってみた。 Canvasって？ ざっくりいうとjavascriptで画像を書けたり、画像を操作したりできます。 Canvasとは - Canvas - HTML5.JP 今回は、画像縮小を実際にやってみてどれくらいファイルサイズが削減できるのかためしてみた。 なんと、2MBくらいの画像が260KB程度まで落ちた！ 読み込み速度もはやい！！ これならラクラクアップロードできそうやね ♪ サンプルコード html <div id="contents" style="margin:20px; border-top:solid 1px #000;"> <h3>canvasTest</h3> <input id="inputFile" name="pho
【第21回 HTML5とか勉強会】 ゲーム開発はHTML5+スマホベースが新潮流
ゲーム開発でHTML5やCSS3、JavaScriptの使いどころは？ 2011年9月27日、サイバーエージェント セミナールームで、「第21回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会だ。今回のテーマは「HTML5＋ゲーム」。当日の様子をお伝えしよう。 「Smartphone 向け HTML5 ゲームの作り方」 まず、ディー・エヌ・エーの城戸氏（@sou）からプレゼンがスタートした。城戸氏はDeNAで海外向けWebViewHTML5アプリ開発や、内製タイトルのスマホ対応などを手掛けている。 mobageでは、さまざまなタイトルがすでにAndroid/iOS対応済みであることを紹介した。具体的にはHTML/CSS3ベース、Canvasベース、SWFベース（ExGame）といった複数の実現方法を使い分けている
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
Canvasとは - Canvas - HTML5.JP
Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。 実際に、Canvasを使って円グラフを作ってみました。上図はFirefox 2.0での結果をキャプチャーしたものです。Canvasで描かれたのは色がついた図形部分です。Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上であれば、実際のCanvasの動作をご覧頂くことができます。 [Canvasを使った円グラ
JavaScript で画像処理！ canvas を使ってみよう - WebOS Goodies
前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの
【レポート】Canvas 3D Renderer & 3D WalkerでHTML Canvasの実力を知る (MYCOMジャーナル)
ColorJackなどもそうだが、最近、Flashや特別なプラグインをインストールしなくても3D描画をサポートするWebサービスが出始めている。今のところFirefox、Opera、Safariなどでは動作するが、IEでは動作しない。これは「HTML Canvas Element」を使っているからだが、ここでは同機能を紹介しておきたい。 HTML Canvas Elementは2Dのビットマップサーフェス。JavaScriptから直接描画できるキャンパスのことで、同機能を活用すると特別なプラグインをインストールすることなく、同様の機能を実現できる。HTML Canvas Elementは現在策定が進んでいる「Web Applications 1.0 - Working Draft」において規定されている要素のひとつで、現在のところ2Dコンテキストを規定しているが、将来的には3Dコンテキスト
canvas : 画像の合成方法いろいろ - WebOS Goodies
使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形（パス or ビットマップ画像）、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています（簡
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/mochaui