写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント

写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント

2-1. リサイズ処理   Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サ...概要を表示 2-1. リサイズ処理   Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co

• smartphone
• image
• html5
• javascript