When taking pictures and uploading pictures through the input tag of the web page on a mobile phone, some mobile phones will have the problem of the picture being rotated 90 degrees, including iPhone and individual Samsung mobile phones. This problem only occurs when these phones are taken vertically, and photos taken horizontally display normally. Therefore, you can solve this problem by getting the camera angle of your phone to rotate the photo.
This parameter is not available in all pictures, but pictures taken by mobile phones have this parameter.
Rotation angle | Parameter value |
---|---|
1 | |
6 | ##90° counterclockwise |
180° | |
EXIF.getData(file, function() { var Orientation = EXIF.getTag(this, 'Orientation');});
ctx.rotate(angle);
After rotation, if drawImage() is performed from the (0, 0) point, the drawn position will be rotated 90 in the left picture The position behind it is not in the visible area. After the rotation, the coordinate axis also rotates. If you want to display it in the visible area, you need to move the (0, 0) point y units in the opposite direction of the y-axis. The starting point at this time is (0, -y ).
var ratio = width / height;if(imgWidth > imgHeight && imgWidth > xx){imgWidth = xx;imgHeight = Math.ceil(xx / ratio);}else if(imgWidth < imgHeight && imgHeight > yy){imgWidth = Math.ceil(yy * ratio);imgHeight = yy;}
canvas.toDataURL("image/jpeg", 1);
<input type="file" id="files" ><img src="blank.gif" id="preview" alt="Solution for mobile image upload, rotation and compression" > <script src="small-exif.js?1.1.11"></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: // 旋转90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(Math.PI / 2); // (0,-imgHeight) 从Solution for mobile image upload, rotation and compression那里获得的起始点ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight); break;case 3: // 旋转180度ctx.rotate(Math.PI); ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);break;case 8: // 旋转-90度canvas.width = imgHeight; canvas.height = imgWidth; ctx.rotate(3 * Math.PI / 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>
The above is the detailed content of Solution for mobile image upload, rotation and compression. For more information, please follow other related articles on the PHP Chinese website!