タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

画像処理とjavascriptに関するmi_kattunのブックマーク (3)

  • ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ

    先日、画像を縮小して表示するページを作成してこのブログで紹介しました(JavaScriptで縮小画像の作成 | while(isプログラマ))。 ただ、このページからiPadやiPod touchで開いたうえで、ファイルの選択から『写真を撮る』を選び、縦向き(縦長)にして写真を撮ってみると、縮小した写真は横向きに表示されてしまいました。これは、写真が標準で縦表示になっているわけではなく、Exif情報のOrientation(向き情報)によって縦方向の写真となっているためにおこります。HTML5のcanvasではどうやらExif情報を考慮してくれないようで、そのため縦に撮った写真が横に表示されてしまったというわけです(それどころか、Orientationによって縦表示とされている写真をimgタグで普通に表示させても、PCのブラウザからは横表示になってしまうという)。 ただ、これでは少し困るの

    ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ
  • iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal

    iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ&フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File APIHTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 (略) ファイルを選択したあとは何ができるか... action による Multipart post Ajax (XMLHttpRequest 2) を使用したファイル送信(プログレス表示にも対応) File AP

    iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
  • JavascriptでJPEG画像からEXIFのOrientation情報のみを取得する | egashira.jp

    2015-08-10 Javascriptを使ってクライアントサイドで画像を縮小する場合に必要となるOrientation情報を、最小のコードと処理でJPEG画像から取得する関数を作りました。 クライアントサイドで画像を縮小してプレビューし、アップロードすることで通信帯域やサーバの負荷を抑えるJavascriptは比較的簡単に作れます。しかしiPhoneで試してみるとなんか変な状態になってしまいました。調べてみるとiOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処というページを見つけて、iPhone側に問題がありそうで、解決策も提示されているようです。 そこで必要となるのが、画像の正しい方向(回転とか鏡像とか)なのですが、JPEG内のEXIF情報に書き込まれているっぽいです。EXIF情報を取得するためのJavascriptコードもいろいろあるのですが、E

  • 1