欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

IOS中html5上傳圖片方向問題解決方法

 更新時(shí)間:2016年01月27日 09:52:04   投稿:hebedich  
這篇文章主要介紹了IOS中html5上傳圖片方向問題解決方法的相關(guān)資料,需要的朋友可以參考下

用html5編寫圖片裁切上傳,在iphone手機(jī)上可能會(huì)遇到圖片方向錯(cuò)誤問題,在此把解決方法和大家分享一下,
用到了html5的 FileReader和Canvas,如果還沒有接觸的同學(xué),先了解一下其方法。

 //此方法為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 回調(diào)方法,返回校正方向后的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大小,確定旋轉(zhuǎn)角度,iphone默認(rèn)的是home鍵在右方的橫屏拍攝方式
  switch(dir){
    //iphone橫屏拍攝,此時(shí)home鍵在左側(cè)
    case 3:
      degree=180;
      drawWidth=-width;
      drawHeight=-height;
      break;
    //iphone豎屏拍攝,此時(shí)home鍵在下方(正常拿手機(jī)的方向)
    case 6:
      canvas.width=height;
      canvas.height=width; 
      degree=90;
      drawWidth=width;
      drawHeight=-height;
      break;
    //iphone豎屏拍攝,此時(shí)home鍵在上方
    case 8:
      canvas.width=height;
      canvas.height=width; 
      degree=270;
      drawWidth=-width;
      drawHeight=height;
      break;
  }
  //使用canvas旋轉(zhuǎn)校正
  context.rotate(degree*Math.PI/180);
  context.drawImage(this,0,0,drawWidth,drawHeight);
  //返回校正圖片
  next(canvas.toDataURL("image/jpeg",.8));
 }
 image.src=img;
}

相關(guān)文章

  • iOS密碼在進(jìn)入后臺(tái)1小時(shí)后重新設(shè)置

    iOS密碼在進(jìn)入后臺(tái)1小時(shí)后重新設(shè)置

    這篇文章主要介紹了iOS密碼在進(jìn)入后臺(tái)1小時(shí)后重新設(shè)置的相關(guān)資料,需要的朋友可以參考下
    2017-08-08
  • iOS實(shí)現(xiàn)控制屏幕常亮不變暗的方法示例

    iOS實(shí)現(xiàn)控制屏幕常亮不變暗的方法示例

    最近在工作中遇到了要將iOS屏幕保持常亮的需求,所以下面這篇文章主要給大家介紹了關(guān)于利用iOS如何實(shí)現(xiàn)控制屏幕常亮不變暗的方法,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • ios 單利的完整使用實(shí)例 及銷毀 宏定義

    ios 單利的完整使用實(shí)例 及銷毀 宏定義

    下面小編就為大家分享一篇ios 單利的完整使用實(shí)例 及銷毀 宏定義,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • iOS實(shí)現(xiàn)點(diǎn)擊狀態(tài)欄自動(dòng)回到頂部效果詳解

    iOS實(shí)現(xiàn)點(diǎn)擊狀態(tài)欄自動(dòng)回到頂部效果詳解

    在IOS開發(fā)過程中,經(jīng)常會(huì)有這種需求,需要通過點(diǎn)擊狀態(tài)欄返回到頂部,給用戶更好的體驗(yàn)效果,下面這篇文章給大家詳細(xì)介紹了實(shí)現(xiàn)過程,有需要的可以參考借鑒。
    2016-09-09
  • iOS通過逆向理解Block的內(nèi)存模型

    iOS通過逆向理解Block的內(nèi)存模型

    自從對(duì) iOS 的逆向初窺門徑后,我也經(jīng)常通過它來分析一些比較大的應(yīng)用,參考一下這些應(yīng)用中某些功能的實(shí)現(xiàn)。這個(gè)探索的過程樂趣多多,不僅能滿足自己對(duì)未知的好奇心,還經(jīng)常能發(fā)現(xiàn)一些意外的驚喜。這篇文章主要介紹了iOS通過逆向如何深入理解Block內(nèi)存模型的相關(guān)資料。
    2017-01-01
  • iOS獲取手機(jī)ip地址代碼

    iOS獲取手機(jī)ip地址代碼

    這篇文章主要為大家詳細(xì)介紹了iOS獲取手機(jī)終端ip地址的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Terminal該如何自定義提示詳解

    Terminal該如何自定義提示詳解

    這篇文章主要給大家介紹了關(guān)于Terminal如何自定義提示的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-06-06
  • iOS內(nèi)存管理Tagged Pointer使用原理詳解

    iOS內(nèi)存管理Tagged Pointer使用原理詳解

    這篇文章主要為大家介紹了iOS內(nèi)存管理Tagged Pointer使用原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式

    iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式

    這篇文章主要介紹了iOS 開發(fā)之 - 關(guān)閉鍵盤 退出鍵盤 的5種方式的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單

    iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單

    這篇文章主要介紹了 iOS10 widget實(shí)現(xiàn)3Dtouch 彈出菜單的相關(guān)資料,需要的朋友可以參考下
    2016-12-12

最新評(píng)論