【解决前】移动端上传照片预览+draw on Canvas（解决iOS等设备照片旋转90度的bug）

by q3011893

HTML

<input accept="image/*" id="file" type="file" />
<br/>
<br/> 预览：
<br/>
<img id="photo" src="" />
<br/>
<br/>
<button id="drawBtn">draw on Canvas</button>
<br/>
<canvas id="canvas" width="350" height="250"></canvas>

CSS

#photo {
   width: 350px;
   height: 250px;
 }

JavaScript

//上传照片
 $("#file").change(function() {
   drawTempPhoto();
 });
 //在Canvas上draw
 $("#drawBtn").click(function() {
   drawPhoto($("#photo")[0], 0, 0, 350, 250);
 });

 //绘制照片
 function drawTempPhoto() {

   //检验是否为图像文件
   var file = document.getElementById("file").files[0];
   if (!/image\/\w+/.test(file.type)) {
     alert("看清楚哦，这个需要图片！");
     return false;
   }
   var reader = new FileReader();
   //将文件以Data URL形式读入页面
   reader.readAsDataURL(file);
   reader.onload = function(e) {

     //预览效果
     var img = $("#photo")[0];
     //加载图片，此处的this.result为base64格式
     img.src = this.result;

   }

 }

 //绘制照片
 function drawPhoto(photo, x, y, w, h) {

   var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
     var ctx = canvas.getContext("2d");

     //draw on Canvas
     var img = new Image();
     img.onload = function() {

       var canvas_w = Number(ctx.canvas.width);
       var canvas_h = Number(ctx.canvas.height);

       // 执行Canvas的drawImage语句
       ctx.drawImage(img, x, y, w, h);

     }
     img.src = photo.src; // 设置图片源地址
   }
 }

 //exif.js
 (function() {

   var debug = false;

   var root = this;

   var EXIF = function(obj) {
     if (obj instanceof EXIF) return obj;
     if (!(this instanceof EXIF)) return new EXIF(obj);
     this.EXIFwrapped = obj;
   };

   if (typeof exports !== 'undefined') {
     if (typeof module !== 'undefined' && module.exports) {
       exports = module.exports = EXIF;
     }
     exports.EXIF = EXIF;
   } else {
     root.EXIF = EXIF;
   }

   var ExifTags = EXIF.Tags = {

     // version tags
     0x9000: "ExifVersion", // EXIF version
     0xA000: "FlashpixVersion", // Flashpix format version

     // colorspace tags
     0xA001: "ColorSpace", // Color space information tag

     // image configuration
     0xA002: "PixelXDimension", // Valid width of meaningful image
     0xA003: "PixelYDimension", // Valid height of meaningful image
     0x9101: "ComponentsConfiguration", // Information about...