治療の肖像写真のキャンバス画像の回転後のIOSシステム（使用exif.jsは画像が垂直の問題を90度回転アップロードするIOS電話を解決）

回します。https：//www.cnblogs.com/lovelgx/articles/8656615.html

 

--- ---復元コンテンツ始まります

質問：HTML5 +最後の携帯電話キャンバスアップロード写真、iOS搭載の携帯電話を見つけるには、写真を撮ってますHengpai写真がないような問題、縦が反時計回りに90度回転し、アップロード、Androidの携帯電話は、この問題はありません。

解決策：使用exif.jsは、画像が90度、垂直課題を回転させアップロードするiOS搭載の携帯電話を解決します

写真方向の角度、回転補正のiOS写真の角度の非水平位置を取得するには：だからアイデアは、この問題を解決することです。

Exif.js写真情報読み取りを使用して撮影された、http://code.ciaoca.com/javascript/exif-js/を参照してください

ここでは、メインOrientationプロパティを使用します。

Orientationプロパティを次のように

 

exif.jsは参照  http://code.ciaoca.com/javascript/exif-js/

 主なコードは、次を参照してください。

<input type = "ファイル" ID = "ファイル"> 
<IMG SRC = ID = "プレビュー" "blank.gif"> 
<スクリプトSRC = "exif.js"> </ SCRIPT> 
<SCRIPT> のvar IPT =ドキュメント。 getElementByIdを（ 'ファイル' ）、
    IMG =のdocument.getElementById（ 'プレビュー' ）、
    オリエンテーション= nullを。 ipt.onchange = 関数（）{ varファイル= ipt.files [0 ]、リーダー= 新しいFileReaderの（）、画像= 新しいイメージ（）。もし（ファイル）{EXIF.getData（ファイル、関数（）{オリエンテーション= EXIF.getTag（この、 '方向' ）;}）; リーダー。
ev.target.result; image.onload = 関数（）{ VARのimgWidth = この.width、imgHeight = この.height。// 控制上传图片的宽高IF（imgWidth> imgHeight && imgWidth> 750 ）{imgWidth = 750 。imgHeight = Math.ceil（750 * this.height / この.width）。} そうであれば（imgWidth <imgHeight && imgHeight> 1334 ）{imgWidth = Math.ceil（1334 * this.width / この.height）。imgHeight = 1334 ; } VARキャンバス=のdocument.createElement（ "キャンバス" ）、CTX = canvas.getContext（ '2D' ）。canvas.width = imgWidth。canvas.height = imgHeight。（=オリエンテーションオリエンテーション1 &&！IF ）{ スイッチ（配向）{ ケース6：// 回転= 90度canvas.width imgHeight; canvas.height = imgWidth; ctx.rotate（にMath.PI / 2 ）; // （0そこ回転開始点ctx.drawImageの模式（から得られる、-imgHeight）この、0、 - imgHeight、imgWidth、imgHeight）; BREAK ; ケース3：// 180度回転ctx.rotate（にMath.PI）; CTX。 drawImage（この、-imgWidth、 - imgHeight、imgWidth、imgHeight）; BREAK ; 事例8：// 回転= -90度canvas.width imgHeight; canvas.height = imgWidth; ctx.rotate（Math.PI. 3 * / 2）; ctx.drawImage（この、-imgWidth、0 、imgWidth、imgHeight）。破ります; }} 他{ctx.drawImage（本、0、0 、imgWidth、imgHeight）。} img.src = canvas.toDataURL（ "画像/ JPEG"、0.8 ）。}} reader.readAsDataURL（ファイル）。}} </ SCRIPT>

 

---終わり---コンテンツを復元

上記参照コード、より適用の練習のコードを

主な参考記事  http://www.cnblogs.com/xjnotxj/p/5576073.html

コードは以下の通りであります：

<LIスタイル= "高さ：100pxに、行の高さ：100pxに"> <スパンクラス= "">图片</スパン> 
    <キャンバスID = "myCanvas"スタイル= "表示：なし"> </キャンバス> 
    <IMG SRC = "" ALT = "" ID = "前"スタイル= "表示：なし"> 
    <DIV CLASS = "check_img"> <IMG SRC = "" ALT = "" ID = "check_img"> </ div> 
    <div要素クラス= "imgupdata">＆＃のxe6a8。
        <！ - <入力タイプ= "ファイル" ID = "FILEID"名前= "FILEID" hidefocus = "真"> - > 
        の<input type = "ファイル" ID = "uploadImage"のonchange = "selectFileImage（この）; " /> 
    </ div> 
</ LI>

関数selectFileImage（fileobjの）{
     varファイル= fileObj.files [ '0' ]; VAR agoimg =のdocument.getElementById（ "前会員" ）; // LZKを添加配向角度によって画像VARオリエンテーション= NULL ; IF （ファイル）{ VARのRFILTER ; | = / ^（画像\ / JPEG画像\ / PNG）$ / I // 画像形式を確認（IF！rFilter.test（file.type））{wfy.alert（ "形式の画像をPNG、JPEGを選択してください。" ）; 戻り値;} // VAR = URL URL || webkitURL; // フォト配向角の属性を取得し、ユーザーがコントロールEXIF.getData回転（ファイル、関数（）{EXIF.getAllTags（この）;オリエンテーション= EXIF.getTag（この「オリエンテーション」）;}）; ヴァー= oReader 新しい新規FileReaderの（）; oReader.onload = 関数（E）{ VAR =イメージ新しい新しい画像（）; 'のimage.src = e.target.result; agoimg.src = e.target.result。 = agoimg.onload 関数（）{ VAR = expectWidth この.naturalWidth; VAR = expectHeight この.naturalHeight; VAR = expectWidthのCalc / expectHeight; // 達成するために、幾何学的スケーリングパラメータの比VARキャンバス=のdocument.getElementById（ 'myCanvasを' ）; VAR canvas.getContext = CTX（ "2D" ）; canvas.width = 1200 ; //ここでは簡単に圧縮幅= canvas.height（canvas.width）*設定することができる計算値;はconsole.log（ 'キャンバスデータを' +canvas.width）VARのBase64 = NULL ; // 修復IOSオリエンテーション== 6のみ完全な最適化を行うためのケースを考える場合には（==オリエンテーション6。）{ // '90度回転左（右回り必要アラート（）' ）; ctx.save（）; // 状態保存ctx.translate（canvas.width / 2、canvas.height / 2）; // キャンバス上の設定（0,0）の位置の、すなわち、回転中心点 CTX。ローテート（にMath.PI * 180分の90 [）; // キャンバス90度// キャンバスのdrawImage文実行ctx.drawImage（画像、 - （canvas.width / 2）、 - （canvas.height / 2）、キャンバス.width、canvas.height）; //のキーポイントである、翻訳前にキャンバスの中心に絵を描く ctx.restore（）; // 回復状態} 他{ctx.drawImage（画像、0,0、canvas.width、canvas.height）。} BASE64 = canvas.toDataURL（ "画像/ JPEG"、0.92 ）。$（ "＃のcheck_img"）のattr（ "SRC"。、BASE64）。}。}。oReader.readAsDataURL（ファイル）; } // $（ '＃のuploadImage'）imgloadsize（）; }