ioshtml圖片上傳

⑴ ios html5 拍照上傳 照片調整90度 為什麼上傳之後 又返回來了

它的主要功能就是上傳兩張人像，通過演算法進行分析對比，最後得出一個相似度的分數，以驗證你們是天造地設還是顏值互補。

但是，當我們把上傳的圖片轉換成base64格式，發送給後台時，會發現偶爾會出現問題，有一些圖片本來是這樣的：

柴犬

處理之後卻變成了這樣：

柴犬2

經過測試發現，只有iOS手機豎著拍的照片才會出現這樣的問題，而iOS手機橫著拍的照片、Android手機拍的照片以及通過屏幕截圖、網路下載等途徑獲得的圖片都不會產生這個問題。

那麼，這到底是為什麼呢？

在開發過程中，由於時間緊迫，未求甚解，使用了github上的一個開源項目 lrz.js 來解決此問題，這個工具的主要用途是在盡量保證圖片質量的前提下壓縮圖片的大小，但同時也附帶了圖片旋轉角度糾正的功能。

通過閱讀 lrz.js 的源代碼，我發現它引入了一個叫做 exif.js 的庫來實現旋轉角度的糾正，它提供了js讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。而拍照方向就是關鍵所在！

exif.js 獲取圖像的拍照方向的代碼如下：

EXIF.getData(IMG_FILE, function () { // IMG_FILE為圖像數據
var orientation = EXIF.getTag(this, "Orientation");
console.log("Orientation:" + orientation); // 拍照方向
});

獲取拍照方向的結果為1-8的數字：

拍照方向信息

注意：對於上面的八種方向中，加了*的並不常見，因為它們代表的是鏡像方向，如果不做任何的處理，不管相機以任何角度拍攝，都無法出現鏡像的情況。

這個表格代表什麼意義？我們來看第一行，值為1時，右邊兩列的值分別為：Row #0 is Top，Column #0 is Left side，其實很好理解，它表示照片的第一行位於頂端，而第一列位於左側，那麼這張照片自然就是以正常角度拍攝的。

而這8種結果，就是第一行與第一列所在的位置的8種組合。

那麼，我們來測試一下iOS手機橫著拍的照片，來看看它的拍照方向是什麼呢？

測試1

結果是1，即以正常角度拍攝的，其實也就是原圖啦~

那麼，我們再測試一下iOS手機豎著拍的照片，來看看它的拍照方向是什麼呢？

測試2

原來是6！即第一行位於右側，第一列位於頂端，其實相當於將照片順時針旋轉了90度！

所以，實際上iOS手機豎著拍出的照片與橫著拍出的照片其本質上是一樣的，只不過豎著拍出的照片被添加了一個順時針旋轉90°的拍照方向，所以顯示的時候，就變成了上下邊窄左右邊寬的狀態，其實也就是橫著拍的照片順時針旋轉90°而成的~

那麼明白了這些，文章開頭所說的照片旋轉bug的原因，也就很簡單啦~

其實就是當我們在前端對圖片進行像素處理或者drawInRect等操作之後，照片的Orientaion信息，即為拍照方向信息被刪除了，所以iOS手機豎著拍的照片又回到了橫著的狀態，看起來也就是逆時針旋轉了90°！

那麼如何糾正這個旋轉角度呢？

其實思路也很簡單：在處理圖片之前，先讀取並保存圖片的拍照方向信息，然後在處理圖片之後，再根據拍照方向，對圖片進行相應的調整，lrz.js 中的代碼如下：

switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 6:
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 8:
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
case 2:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0, resize.width, resize.height);
break;
case 4:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 5:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 7:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
default:
ctx.drawImage(img, 0, 0, resize.width,resize.height);
}

其中，translate是平移變換，scale(-1,1)是向左翻轉，rotate是順時針旋轉。

舉例說明 case 2，當圖片的拍照方向為2時，即第一行位於頂端，而第一列位於右側，其實相當於把照片進行了左右的翻轉。所以，這里對圖片的操作是，先向右平移等於圖片寬度的距離，再向左翻轉，這相當於以圖片水平方向的對稱軸為軸進行了左右翻轉，然後再以（0，0）為起始點繪制原寬高的圖片，即完成了對拍照方向的糾正。

最後

經過一系列的測試，發現確實只有iOS手機的豎拍照片與橫拍照片是通過拍照方向來區別的，Android手機無論豎拍還是橫拍的照片，拍照方向都為1，也就是說即使丟失了拍照方向這一信息，也不會影響到圖片的旋轉角度。而手機或電腦的屏幕截圖、網路上的圖片、通過PS製作的圖片等也是如此。

作者：任無名F
鏈接：http://www.jianshu.com/p/ad4501db178e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

⑵ iOS 載入WebP圖片、WebP動圖

1、為什麼要用WebP格式圖片？

因為WebP格式圖片是 Google 新推出的影像技術，對比png、jpg而言，文件大小減少了20多%，利用壓縮手段，可以使文件大小減少至80%，並且肉眼所看，和原圖沒什麼區別，失真率極低。目前互聯網上傳輸的數據有65%都是圖片，WebP就是出於減少數據量、加速網路傳輸的目的而開發的。

2、如何載入WebP圖片

網上很多文章都說 通過pod 'SDWebImage/WebP'來進行安裝，我pod不下來，換了路徑還不行，後來換個途徑，pod 'SDWebImageWebPCoder'，如果項目里沒有SDWebImage，需要pod 'SDWebImage'。

導入SDWebImageWebPCoder，大概率會在pod install時報錯，因為libwebp這個倉庫的地址連接不上。

（1）在終端輸入pod repo 查看 cocoapods 在本機的PATH，每個人的路徑都可能不一樣

（2）前往文件夾 /Users/個人Mac的home/.cocoapods/repos/cocoapods/Specs/1/9/2/libwebp/1.2.0，打開libwebp.podspec.json

（3）將source下git地址更改為 https://github.com/webmproject/libwebp.git ，這是我改過的

（4）pod install，如果還出錯，那可能是個人Mac的home寫錯了或者pod repo 中的Path選錯了，重新選擇。

（5）使用SDWebImageWebPCoder

3、如何載入WebP動圖

SDWebImage不支持webp gif，但YYimage 支持webp gif，YYimage中有個YYAnimatedImageView類是可以載入webp gif，實現如下

#import "YYImage.h"

#import "YYAnimatedImageView.h"

Github地址 ：https://github.com/codeXSJ/xsjDemo.git

⑶ iOS 關於OSS上傳文件

1.安裝OSS這些就不需要再說了，其次先讓後台配置好一些參數，然後拿到後便可以直接使用了

目前用到的主要參數有以下三個：
ServerUrl
Endpoint
bucketName

2.直接在封裝好的請求文件 CCNetworkRequstionMD5.m 裡面，增加一個方法 （ 多種文件類型上傳，傳入你所需要的文件數組即可）

3.以下是在作業上傳 .m 文件中的使用

在了解這方面的知識，找到了這一篇，借鑒了一下
https://blog.csdn.net/qq_33560608/article/details/88761764

⑷ 上傳文件，html里的input type="file" 在蘋果終端上不可用，顯示為灰色。其他終端都正常

為了解決用戶可能碰到關於"上傳文件，html里的input type="file" 在蘋果終端上不可用，顯示為灰色。其他終端都正常"相關的問題，突襲網經過收集整理為用戶提供相關的解決辦法，請注意，解決辦法僅供參考，不代表本網同意其意見,如有任何問題請與本網聯系。"上傳文件，html里的input type="file" 在蘋果終端上不可用，顯示為灰色。其他終端都正常"相關的詳細問題如下:頁面是jsp，後台是java。功能全部正常。就是在iphone，，ipad，ipod中，inputtype="file"顯示為灰色，如果iphone用戶訪問網頁的話，就不能選擇文件，也不能上傳文件（沒文件選擇）。我...頁面是jsp，後台是java。功能全部正常。
就是在iphone，，ipad，ipod中，input type="file"顯示為灰色，如果iphone用戶訪問網頁的話，就不能選擇文件，也不能上傳文件（沒文件選擇）。
我要的是：iphone用戶訪問網頁，能上傳文件。
回答方向：程序如何打開iphone相冊，或者有iphone專用的消息頭或標簽之類可以選擇本地文件，總之能選擇文件，就OK，功能都正常，在電腦和安卓台都沒有問題，唯獨蘋果的，無法選擇文件。
我看了app里都是會出現點擊某按鈕，彈出select，裡面有 從相冊選擇和拍照。然後可以打開相冊選取文件，或直接拍照上傳。蘋果的台肯定提供了這樣的api可以調取本地的文件系統，和本地攝像頭。只是不會弄而已。
看清楚再回答，混分的關閉問題也不給1分
誰能教會我的，積分10倍送上
如果篇幅太長可發鏈接地址，照樣給分
如果能教會我 像app那樣，可選文件，可拍找上傳的，積分30送上感激不盡
最後，無手機網頁或app開發經驗的人士請勿回答！！展開
===突襲網收集的解決方案如下===
解決方案1：
我也碰到了
安卓正常， 用IPHONE4訪問 ， 文件上傳控制項無法點擊
解決方案2：
沒人回答，幫頂，我樓上的那個太沒公德了
解決方案3：
<input id="fileElem1" pictype='30010003' data-role="none" type="file" name="idFile" accept="image/jpg,image/jpeg,image/png,image/gif" /> 需要支持HTML5，調用的是手機相機和圖庫，有問題的話追問吧本回答被網友採納
解決方案4：
ios6以前的系統不支持input中的file
解決方案5：
每人看得起你那點分
html上傳文件代碼
答：html前端代碼： 文件名: 如果是ubuntu上部署apache2，你應該是php開發者吧，action="upload-file.php" 中的upload-file.php改為你自己的後端php接收文件的邏輯代碼即可！ 這里提供upload-file.php後端接收文件的代碼： 代碼很簡單，我相信你應該...
html點擊button彈出選擇文件，上傳，這個怎麼實現？
答： 從Excel中批量導入 //上傳文件處理 var fileUpdate_button = document.getElementById("fileUpdate-button"); var fileUpdate_input = document.getElementById("fileUpdate-input"); var fileUpdate_form = document.getElementById("fileUpda...
HTML 網頁中怎麼上傳圖片到某個文件夾
答：上傳至某個文件夾，預覽是在前端完成的 此時還沒有進行上傳操作，上傳是需要後台提供介面的 可以通過form表單上傳，後台通過php，java，asp等 接收form提交的文件存儲到文件中返迴文件的網址鏈接
html點擊button彈出選擇文件，上傳，這個怎麼實現
答： 其中樣式在分別給每一個表單元素自定義class！
如何上傳HTML文件到網頁？
答：沒裝IIS的話，就不能通過ftp的形式上傳了。但是卻可以用文件共享的方法來訪問伺服器的。若是用FTP上傳HTML文件，訪問格式是 ftp://ip地址,如 ftp://192.168.0.1 ,如果ftp伺服器許可權設置OK的話，就應該能上傳HTML文件的。 追問： 我暈 你那裡找來...
怎麼上傳html文件
答：這個沒特殊的方法： 首先要有FTP的賬號密碼等連接信息。 一般的網站空間商都會提供以保證程序安裝數據備份等需要。 賬號密碼可以在空間管理後檯面板獲齲 連接方式，使用客戶端軟體，比如flashfxp就可以 打開客戶端，填寫IP，埠，賬號，密碼。...
html input標簽 file類型，上傳的具體是什麼東西？
答：上傳你選擇的文件和相關信息。 在 HTML 文檔中 標簽每出現一次，一個 FileUpload 對象就會被創建。 該元素包含一個文本輸入欄位，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。 該元素的 value 屬性保存了用戶指定...
html可以不使用form上傳文件嗎?
答：選好上傳文件並填寫相應信息才能上傳 或是能過js控制，form1先通過ajax submit再讓form2跳轉 或是把值都取出來一起post到伺服器等等方式
如何成功上傳HTML文件
答：HTML中使用input type="file"上傳文件時，代碼中只能得到文件的名稱，而有些特殊的需要要求得到上傳文件的絕對路徑，為此採用Javascript實現得到文件的絕對路徑。 注意：要有enctype="multipart/form-data" Action代碼： String filePath = requ...
html 表單上傳圖片
答：使用表單中的文件域（）控制項可以上傳文件。 打開DreamWeaver，這里使用的版本是CS6，新建一個php文件。 保存到網站目錄下，命名為upload.php。 在代碼中插入一個表單 對話框中，操作留空，方法選擇「post」，編碼類型輸入「multipart/form-data」，...
為您准備的相關內容:
html 中上傳文件標簽 <input type="file...把HTML5的手機網站嵌入安卓APP中，發現<input t...html寫的type="file"的input怎麼去掉默認提...html中表單里文本上傳file,怎麼讓他在網頁上只顯示按鈕...在HTML中 使用<input type=」file」上傳...HTML 中的 <INPUT TYPE="FILE"/ 標...關於<input type="file" /的問題html中input type="file"怎麼只限制一種文...