zoukankan      html  css  js  c++  java
  • IOS web网页图片上传问题

    用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,
    用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方法。

     //此方法为file input元素的change事件
     function change(){
      var file = this.files[0];
      var orientation;
      //EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js
      EXIF.getData(file,function(){
        orientation=EXIF.getTag(this,'Orientation');
      });
      var reader = new FileReader();
      reader.onload = function(e) {  
        getImgData(this.result,orientation,function(data){
          //这里可以使用校正后的图片data了 
        }); 
      }
      reader.readAsDataURL(file);
    }
    
    
    // @param {string} img 图片的base64
    // @param {int} dir exif获取的方向信息
    // @param {function} next 回调方法,返回校正方向后的base64
    function getImgData(img,dir,next){
     var image=new Image();
     image.onload=function(){
      var degree=0,drawWidth,drawHeight,width,height;
      drawWidth=this.naturalWidth;
      drawHeight=this.naturalHeight;
      //以下改变一下图片大小
      var maxSide = Math.max(drawWidth, drawHeight);
      if (maxSide > 1024) {
        var minSide = Math.min(drawWidth, drawHeight);
        minSide = minSide / maxSide * 1024;
        maxSide = 1024;
        if (drawWidth > drawHeight) {
          drawWidth = maxSide;
          drawHeight = minSide;
        } else {
          drawWidth = minSide;
          drawHeight = maxSide;
        }
      }
      var canvas=document.createElement('canvas');
      canvas.width=width=drawWidth;
      canvas.height=height=drawHeight; 
      var context=canvas.getContext('2d');
      //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
      switch(dir){
        //iphone横屏拍摄,此时home键在左侧
        case 3:
          degree=180;
          drawWidth=-width;
          drawHeight=-height;
          break;
        //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
        case 6:
          canvas.width=height;
          canvas.height=width; 
          degree=90;
          drawWidth=width;
          drawHeight=-height;
          break;
        //iphone竖屏拍摄,此时home键在上方
        case 8:
          canvas.width=height;
          canvas.height=width; 
          degree=270;
          drawWidth=-width;
          drawHeight=height;
          break;
      }
      //使用canvas旋转校正
      context.rotate(degree*Math.PI/180);
      context.drawImage(this,0,0,drawWidth,drawHeight);
      //返回校正图片
      next(canvas.toDataURL("image/jpeg",.8));
     }
     image.src=img;
    }
  • 相关阅读:
    IT运维监控解决方案介绍
    Apdex——衡量服务器性能的标准
    服务器监控(包括性能指标与web应用程序)
    使用厂商MIB库查找设备OID值并实施监控的方法
    华为USG6550 MIB CPU MEM
    LInux下实时网络流量监控工具nload教程
    11gR2 集群(CRS/GRID)新功能—— SCAN(Single Client Access Name)
    如何实现网卡bond
    LeetCode(31)-Factorial Trailing Zeroes
    activiti自己定义流程之整合(五):启动流程时获取自己定义表单
  • 原文地址:https://www.cnblogs.com/neverleave/p/6215521.html
Copyright © 2011-2022 走看看