ios system after treatment portrait photograph canvas picture rotation (use exif.js solve ios phones to upload pictures rotated 90 degrees vertical issues)

Turn: https: //www.cnblogs.com/lovelgx/articles/8656615.html

 

--- --- restore content begins

Question: html5 + end mobile phone when the canvas upload photos, find ios phone will take pictures uploaded vertical rotated 90 degrees counterclockwise, Hengpai photo no such problem; Android phones do not have this problem.

Solution: use exif.js solve ios phones to upload pictures rotated 90 degrees vertical issues

So the idea is to solve this problem: to get photographs direction angle, non-horizontal position of the angle of rotation correction ios photos.

Exif.js photo was taken using the reading information, see http://code.ciaoca.com/javascript/exif-js/

Here the main use the Orientation property.

Orientation property as follows:

 

exif.js reference  http://code.ciaoca.com/javascript/exif-js/

 The main codes refer to the following:

<input type="file" id="files" >
<img src="blank.gif" id="preview">
<script src="exif.js"></script>
<script>
var ipt = document.getElementById('files'),
    img = document.getElementById('preview'),
    Orientation = null;
ipt.onchange = function () { var file = ipt.files[0], reader = new FileReader(), image = new Image(); if(file){ EXIF.getData(file, function() { Orientation = EXIF.getTag(this, 'Orientation'); }); reader.onload = function (ev) { image.src = ev.target.result; image.onload = function () { var imgWidth = this.width, imgHeight = this.height; // 控制上传图片的宽高 if(imgWidth > imgHeight && imgWidth > 750){ imgWidth = 750; imgHeight = Math.ceil(750 * this.height / this.width); }else if(imgWidth < imgHeight && imgHeight > 1334){ imgWidth = Math.ceil(1334 * this.width / this.height); imgHeight = 1334; } var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'); canvas.width = imgWidth; canvas.height = imgHeight; IF (= Orientation Orientation. 1 &&! ) { Switch (Orientation) { Case. 6: // rotation = 90 degrees canvas.width imgHeight; canvas.height = imgWidth; ctx.rotate (Math.PI / 2 ); // (0 , -imgHeight) obtained from the rotation start point ctx.drawImage schematic there ( the this, 0, - imgHeight, imgWidth, imgHeight); BREAK ; Case. 3: // 180 degree rotation ctx.rotate (Math.PI); ctx. the drawImage ( the this, -imgWidth, - imgHeight, imgWidth, imgHeight); BREAK ; Case. 8: // rotation = -90 degrees canvas.width imgHeight; canvas.height = imgWidth; ctx.rotate (Math.PI. 3 * / 2); ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight); break; } }else{ ctx.drawImage(this, 0, 0, imgWidth, imgHeight); } img.src = canvas.toDataURL("image/jpeg", 0.8); } } reader.readAsDataURL(file); } } </script>

 

--- end --- restore content

Through the above reference code, the code of practice of a more applicable

The main reference article  http://www.cnblogs.com/xjnotxj/p/5576073.html

code show as below:

<li style="height:100px;line-height:100px"><span  class="">图片</span>
    <canvas id="myCanvas" style="display: none"></canvas>
    <img src="" alt="" id="ago" style="display: none">
    <div class="check_img"><img src="" alt="" id="check_img" ></div>
    <div class="imgupdata">&#xe6a8;
        <!--<input type="file" id="fileId" name="fileId" hidefocus="true">-->
        <input type="file"  id="uploadImage" onchange="selectFileImage(this);" />
    </div>
</li>

function selectFileImage (fileObj) {
     var File = fileObj.files [ '0' ]; var agoimg = document.getElementById ( "ago Member" ); // image by the orientation angle LZK added var Orientation = null ; IF (File) { var Rfilter ; | = / ^ (Image \ / jpeg Image \ / PNG) $ / i // check image format (! IF rFilter.test (file.type)) {wfy.alert ( "Please select jpeg, png format images." ); return ;} // var = the URL the URL || webkitURL; // Get photo orientation angle attribute, the user rotates the control EXIF.getData (File, function () {EXIF.getAllTags ( the this ); orientation = EXIF.getTag ( the this , 'Orientation');}); Var = oReader new new the FileReader (); oReader.onload = function (E) { var = Image new new Image ();'s image.src = e.target.result; agoimg.src = e.target.result; = agoimg.onload function () { var = expectWidth the this .naturalWidth; var = expectHeight the this .naturalHeight; var = expectWidth Calc / expectHeight; // ratio of geometric scaling parameters to achieve var Canvas = document.getElementById ( 'myCanvas' ); var canvas.getContext = CTX ( "2D" ); canvas.width = 1200 ; // here can easily set the compression width = canvas.height (canvas.width) * Calc; the console.log ( 'Canvas data' +canvas.width) var Base64 = null ; // repair ios Orientation == 6 only consider the case for making full optimization IF (== Orientation. 6 ) { // Alert ( 'need clockwise (left) 90 degree rotation' ); ctx.save (); // save the state ctx.translate (canvas.width / 2, canvas.height / 2); // set (0,0) location on the canvas, i.e., the rotational center point of ctx. Rotate (Math.PI * 90/180 [); // the canvas 90 degrees // perform the canvas drawImage statement ctx.drawImage (image, - (canvas.width / 2), - (canvas.height / 2), canvas .width, canvas.height); // drawing the picture at the center of the canvas before translate, which is the key point ctx.restore (); // recovery state} the else {ctx.drawImage (image, 0, 0, canvas.width, canvas.height); } base64 = canvas.toDataURL("image/jpeg", 0.92); $("#check_img").attr("src", base64); }; }; oReader.readAsDataURL(file); } //$('#uploadImage').imgloadsize();  }