最近接到一个需求，微信中用户上传图片生成海报。这个需求比较常规，实现思路也比较简单，通过利用用户的input输入，对所上传的图片进行处理，最后通过第三方库html2canvas合成对应的图片即可。思路虽然简单，但是在实现的过程中会遇到各种各样的小问题，现在就将遇到的问题进行一次总结。
1、iphone以及部分android机型通过摄像头拍摄的照片被旋转了90度
原因：由于目前的手机拍照基本都在2M以上，而ios中只要超过2M图片就会自动旋转。拍照后直接取出来的UIimage（用UIImagePickerControllerOriginalImage取出），它本身的imageOrientation属性是3，即UIImageOrientationRight。如果这个图片直接使用则没事，但是如果对它进行裁剪、缩放等操作后，它的这个imageOrientation属性会变成0。此时这张图片用在别的地方就会发生旋转。imageOrientation是只读的，不能直接修改其值。
解决方法: 当拍照后，获取input中的图片数据，利用exif.js（Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。）获取到Orientation属性，此属性有四个值
1 表示旋转0度，也就是没有旋转。
6 表示顺时针旋转90度
8 表示逆时针旋转90度
3 旋转180度
我们要做的就是在拍照后，从input中获取到图片，然后得到它的Orientation值，根据Orientation值再对图片进行进一步处理，处理代码如下：
import EXIF from \'exif-js\'; var file = { upload: function(e) { var file = e.target.files[0]; var type = file.type.split(\'/\')[0]; if (type != \'image\') { alert(\'请上传图片\'); return; } var size = Math.floor(file.size / 1024 / 1024); if (size > 3) { alert(\'图片大小不得超过3M\'); return; }; var reader = new FileReader(); reader.readAsDataURL(file); var orientation = null; //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { EXIF.getAllTags(this); orientation = EXIF.getTag(this, \'Orientation\'); }); reader.onloadstart = function() {}; reader.onloadend = function(e) { var dataURL = reader.result; var imaged = new Image(); imaged.src = dataURL; imaged.onload = function() { var canvas = document.createElement(\'canvas\'); var ctx = canvas.getContext(\'2d\'); //普通环境下设置canvas的宽高 var w = 0, h = 0; if (this.width < 750) { w = this.width; h = this.height; canvas.width = w; canvas.height = h; } else { w = 750; canvas.width = w; var scale = this.width / this.height; w = w > this.width ? this.width : w; h = w / scale; canvas.height = h; } // if (navigator.userAgent.match(/iphone/i) || navigator.userAgent.match(/samsung/i)) { if (orientation != "") { switch (orientation) { case 3: ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h, w, h); break; case 6: //这里由于将图片纠正了回来，所以也要重新设置canvas的高已达到高度自适应 canvas.width = 750; var scale = this.height / this.width; canvas.height = canvas.width / scale; h = 750 > this.height ? this.height : 750; w = h / scale; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -h, w, h); break; case 8: ctx.rotate(270 * Math.PI / 180); ctx.drawImage(this, -h, 0, h, w); break; case 2: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.drawImage(this, 0, 0, w, h); break; case 4: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(180 * Math.PI / 180); ctx.drawImage(this, -w, -h, w, h); break; case 5: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(90 * Math.PI / 180); ctx.drawImage(this, 0, -w, h, w); break; case 7: ctx.translate(w, 0); ctx.scale(-1, 1); ctx.rotate(270 * Math.PI / 180); ctx.drawImage(this, -h, 0, h, w); break; default: ctx.drawImage(this, 0, 0, w, h); } } else { ctx.drawImage(this, 0, 0, w, h); } //接下来对图片进行操作 }; }; }, event: function() { $(".uploadfile").change(function(e) { file.upload(e); }); }, init: function() { this.event(); } }; module.exports = file;