1. 程式人生 > >H5手機端開發問題及解決方案

H5手機端開發問題及解決方案

new add set 底部 屬性 ice data color orm

ios豎屏拍照上傳,圖片被旋轉問題

1.通過第三方插件exif-js獲取到圖片的方向
2.new一個FileReader對象,加載讀取上傳的圖片
3.在fileReader的onload函數中,得到的圖片文件用一個Image對象接收
4.在image的onload函數中,利用步驟1中獲取到的方向orientation,通過canvas旋轉校正,重新繪制一張新圖
註意iPhone有3個拍照方向需要處理,橫屏拍攝,home鍵在左側,豎屏拍攝,home建上下
5.將繪制的新圖轉成Blob對象,添加到FormData對象中,然後進行校正後的上傳操作

iPhoneX適配

// 1.viewport meta 標簽增加屬性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增加樣式
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
// 3.如有fixed底部的元素,也增加上面樣式
xxx {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff; // 記得添加background-color,不然會出現透明鏤空的情況
}

H5手機端開發問題及解決方案