HTML5モバイル開発画像圧縮アップロード機能

H5アクティビティは非常に一般的です。1つのフォームは、ユーザーが写真をアップロードできるようにするためです。モバイルターミナルは、一般的に携帯電話の品質を高くしています。アップロードが直接アップロードされると、多くのトラフィックが消費され、エクスペリエンスは良くありません。したがって、アップロードする前に、ローカルエリアを圧縮する必要があります。

Xiaobai地区は参照しなければなりません

モバイル画像アップロードの概念がない場合は、Filreader、Blob、およびFormdataの3つの概念を補完する必要があります。

意味

FileReaderオブジェクトを使用して、Webアプリケーションは、ユーザーコンピューターに保存されているファイル（またはRAWデータバッファー）を読み取ることができます。

方法

イベント処理手順

使用

var filereader = new FileReader（）;

バイナリオブジェクトであるBlob（バイナリ大きなオブジェクト）は、バイナリファイルを保存できるコンテナです。

FormDataオブジェクトを使用して、一連のキー値を使用して完全なフォームをシミュレートし、XMLHTTPREQUESTを使用してこのフォームを送信できます。

トピック

1）入力ファイルは写真をアップロードし、FilReaderを使用してユーザーがアップロードした画像を読み取ります。

2）画像データはIMGオブジェクトに送信され、IMGをCanvasに描画し、Canvas.todataurlを使用して圧縮します。

3）圧縮されたBase64形式の画像データを取得し、バイナリに変え、formdataにプラグを付け、最後にxmlhttprequestを介してformdataを送信します

fileEle.onChange = function（）{if（！this.files.length）return; .test（_simplefile.type））return; // plugin exif.js var _orientation; .getTag（これ、「オリエンテーション」）; .src;圧縮（_img）;

/** *画像のサイズを計算し、サイズに応じてサイズを圧縮します *1。iphone携帯電話html5画像方向の問題をアップロードし、exif.js * 2を使用します。 blobbuilder* @param {object} _img image* @param {number} _ontation photo information* @return {string}画像写真の画像写真*/function compress（_img、_orientation）{// 2。ターゲットサイズ画像の高さが写真の画像をアップロードすると、両方ともターゲットチャートよりも大きく、ターゲットマップとその他の圧縮がある場合、アップロードの比率が拡大します。 var _goalwidth = 750、//ターゲットwidth_goalheight = 750、//ターゲットheight_imgwidth = _img.naturwidth、// image width_imgheight = _img.naturalheight、// picture height_tempwi dth = _imgwidth、//ズームまたは削減後の一時的な幅_r = 0;ターゲットチャート、および等しい圧縮が圧縮されます_r = _imgwidth / _goalwidth; /_imgheight;}} else {if（_imgwidth <_goalwidth）{// _r = _goalwidth/_imgwidth;} else {//小さい_r = __r = __r = _ __r = _goalheight/_ imgheight;} } _tempwidth = math.ceil（_imgwidth * _r）; _tempheight = math.ceil（_imgheight * _r）;} // 3。 get（ 'canvas-clip'）方向エラー問題スイッチ（_orientation）{//ホームキーは、_tempwidth = -_ imgwidthの場合（_tempwidth = 180）。携帯電話6：_canvas.height = _imgwidth; height = _imgwidth; pi/180）; = _canvas.todataurl（ 'image/jpeg'）;

/** *写真をnos * @param {object} _blog blobフォーマット画像 * @return {void} */function uploadphoto（_data）{// 4。canvas //window.atobメソッドで写真情報を取得するBase64形式の画像は、バイナリ文字列に変換されます。 split（ '、'）[1]; _data.length）; var_ubufffer = newt8ar ray（_buffer）; new blobをサポートしない、blobbuilder var _blobを使用してください{_blob = new blob（[_ buffer]、{type： 'image/jpeg'}）;} catch（ee）{window.blobbuilder || windo.webkitblobbuilder ||。 （）; $ requestdwrbyget、[_suffix、 ''、 ''、 '1']、function（_tokens = _tokens || ||！_token.objectname ||！ '）false; ）; _formdata.append（ 'x-nos-token'、_ploadtoken）; （_xhr.readystate === 4）{if（if（_xhr.status> = 200 && _xhr.status <300）|| _x​​hr.status === 304）{var _imgurl = http://nos.netease.com / + _bucketname + + _ objectname + /act/taxiu？op = effect＆origimgurl = ' + _newurl;

iPhoneの撮影画像の方向を決定する：exif

上記は、Xiaobianによって導入されたHTML5の開発画像で、あなたが質問をしてください皆さん。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！