亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

iphone上傳拍照圖片時圖片會旋轉90度,從相冊選擇就不會,安卓手機也不會,怎么解決?

iphone上傳拍照圖片時圖片會旋轉90度,從相冊選擇就不會,安卓手機也不會,怎么解決?

一只名叫tom的貓 2019-03-20 17:14:52
在網上找了很多代碼,但是不知道他們都應該放在哪個文件里,還有就是,我的圖片用戶拍照或者從相冊選擇后是通過文件的方式傳到后臺,
查看完整描述

5 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

在服務器后端上傳圖片接口中檢查圖片的jpeg exif信息,然后使用圖片處理庫將圖片旋轉正再保存


查看完整回答
反對 回復 2019-04-25
?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

之前也遇到過這個問題,到stackoverflow上搜到了這個答案(IE10+):


function getOrientation(file, callback) {

  var reader = new FileReader();

  reader.onload = function(e) {


    var view = new DataView(e.target.result);

    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

    var length = view.byteLength, offset = 2;

    while (offset < length) {

      var marker = view.getUint16(offset, false);

      offset += 2;

      if (marker == 0xFFE1) {

        if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);

        var little = view.getUint16(offset += 6, false) == 0x4949;

        offset += view.getUint32(offset + 4, little);

        var tags = view.getUint16(offset, little);

        offset += 2;

        for (var i = 0; i < tags; i++)

          if (view.getUint16(offset + (i * 12), little) == 0x0112)

            return callback(view.getUint16(offset + (i * 12) + 8, little));

      }

      else if ((marker & 0xFF00) != 0xFF00) break;

      else offset += view.getUint16(offset, false);

    }

    return callback(-1);

  };

  reader.readAsArrayBuffer(file.slice(0, 64 * 1024));

}


// usage:

var input = document.getElementById('input');

input.onchange = function(e) {

  getOrientation(input.files[0], function(orientation) {

    alert('orientation: ' + orientation);

  });

}

<input id='input' type='file' />

原文點這(第一個答案)


查看完整回答
反對 回復 2019-04-25
?
慕妹3146593

TA貢獻1820條經驗 獲得超9個贊

查看完整回答
反對 回復 2019-04-25
?
呼如林

TA貢獻1798條經驗 獲得超3個贊

圖片 展示元素用 img 就可以 自動修復 不要用第三方的插件


<!DOCTYPE html>  

<html>  

<head>  

    <meta charset="utf-8">  

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  

    <title>圖片上傳</title>

</head>  

<body>  

    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">  

            上傳圖片:  

            <input type="file" accept="image/*" id="input" capture="camera" onchange="selectFileImage(this);" />  

        </div>  

        <div style="margin-top: 10px;">

            <img alt="preview" width="480px" src="" id="myImage"/>  

        </div>

    <script>        

        var input = document.getElementById('input');

        var preview = document.getElementById('myImage');

        input.onchange = function(e) {

            var file = this.files[0];

            var reader = new FileReader();

            reader.onload = function(e) {

                var data = e.target.result;            

                preview.src = data;

            };

            reader.readAsDataURL(file);

        }

    </script>

</body>  

</html> 


查看完整回答
反對 回復 2019-04-25
  • 5 回答
  • 0 關注
  • 1379 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號