iphone手機html5上傳圖片方向問題解決

golden_hamster 發布于2019-08-19 17:27 / 2831人閱讀

摘要：用編寫圖片裁切上傳，在手機上可能會遇到圖片方向錯誤問題，在此把解決方法和大家分享一下，用到了的和，如果還沒有接觸的同學，先了解一下其方法。

用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;
}

GPU云服務器云服務器 html5+圖片上傳圖片上傳html5 手機端上傳圖片手機網站上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78531.html

html5 上傳本地圖片處理各種問題

摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成原文還是在簡書上： html5 上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子：1.上傳手機本地圖片，然后裁剪（后加的需...

iOS122 2019-08-19 17:16 評論0 收藏0
html5 上傳本地圖片處理各種問題

摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成原文還是在簡書上： html5 上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子：1.上傳手機本地圖片，然后裁剪（后加的需...

Taste 2019-08-01 14:59 評論0 收藏0
移動端圖片上傳旋轉、壓縮的解決方案

摘要：上傳的文件經過就可以實現預覽圖片了，這方面不清楚的可以查看進階系列文件上傳下載旋轉旋轉需要用到的方法。前言在手機上通過網頁 input 標簽拍照上傳圖片，有一些手機會出現圖片旋轉了90度d的問題，包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機拍照角度來對照片進行旋轉，從而解決這個問題。 Orientatio...

blair 2019-08-20 17:38 評論0 收藏0