這是最近給公司寫一個項目,項目要求大概是這樣子:
1.上傳手機本地圖片,然後裁剪(後加的需求)
2.能夠旋轉圖片,用於裁剪(後面加的需求)
3.填寫各種文字,選擇顏色,之後把文字和2個相關的圖片,水印到裁剪的圖片上,上傳伺服器生成一個圖片地址,返回,分享出去。
功能就是大概上面這些,其他的也就是各種小功能,不提了,技術選型說下,整體上使用Vue(包括router,resource,webpack等等)
那麼這幾個需求怎麼做呢:
1、 本地上傳,使用html5 的File Api 拿到圖片的base64編碼,賦值給img的src(坑1,2),然後彈出一個圖層,進行裁剪,最開始裁剪是在img的上面套一個p來進行坐標計算,計算完了使用canvas來截取圖片,然後取值(坑3)。
2、這個功能就是使用canvas的旋轉圖片解決,要注意的是,旋轉的時候要保持橫縱比,而且要注意寬高的大小(坑4)。
3、使用canvas來疊加浮水印和圖片即可,主要是注意座標。
那麼說說坑:
1、拿到src的base64編碼,看似沒有問題,實際上有個巨大的問題,很多圖片在手機上顯示為豎屏,但是拿到的base64編碼,直接賦值給img的src後,發現是橫屏的。一開始發現這種情況,以為是個別現象,最後不斷嘗試之後,發現是個非常普遍的情況,特別是IPhone手機,而且還分你選擇的圖片文件夾,相冊和照片流同一張圖片,一個橫屏,一個豎屏。導致我完全無法理解這是為什麼? ? ?基本一個下午耗在這個問題上了。
直到晚上回去,問我一個朋友IOS開發的大神,@葉孤城,他告訴我,因為現在IPhone的攝像頭就是橫著的,手機裡顯示豎屏的原因是ios自己做了處理,他們可以根據圖片的一個拍攝角度數值來判斷橫豎問題,但這個數值在我們web端確拿不到,很尷尬。那要怎麼解決這個問題呢? ? ------- 我使用的方案:旋轉圖片,可以讓使用者自己去主動旋轉圖片,選取角度。 還有另一個解決方案,在坑2也用到,後面講。
2、除了這個橫屏之外,android手機有的上傳,選擇了圖片之後,沒有任何反應,我開始一度認為原因是不支持html5的File Api,所以沒有顯示上傳的圖片,後面就各種debugger,發現原因是沒有觸發Input標籤的change事件,而且不管怎麼樣都沒有辦法觸發,為了解決這個問題,查閱了各種官方文件和stackoverflow之後,發現可以為type="file"的input增加兩個屬性來表示手機上傳圖片。
<input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>
這樣加入了accept 和capture之後,有問題的android手機,在選擇圖片的時候,有好幾個資料夾,可以選擇了,其中有的可以上傳,有的不行,經常仔細的測試發現,sd卡上的圖片是拿不到的,也就不會觸發change事件,因為沒有root權限去拿檔案資料。又是一個無解問題,因為你的web在瀏覽器裡面,權限就是低啊,(不得不吐槽下web的權限問題,媽蛋)怎麼解決問題呢? ? ? 繞過去,也就是說如果你的頁面是嵌套在你們公司自己App裡面的,就讓App幫你,那麼我們專案是微信傳播的,一定在微信瀏覽器裡面,所以可以調用微信的JSSDK的選擇圖片介面,他是可以越過這些權限,而且還有一個好處,就是解決坑1的問題,他會處理橫屏問題,就是把看著豎屏,實際橫屏的上傳時都處理為豎屏,但是代價也不小,你要選擇圖片,拿到一個key,然後繼續呼叫sdk傳到微信的伺服器,拿到一個serverid,這個id傳給自己的服務端,讓他們通過這個id,去微信下載圖片到自己的伺服器,返回給你一個Url。過程很曲折,而且下載次數有限制(可以跟微信申請加載限制);
參考: 微信js sdk 選擇圖片介面
3、我們繼續說坑,以上問題,解決了之後,就是裁剪了,開始我使用的方案是這樣子的,獲取到base64之後,賦值給一個img,然後在這個img上進行框選移動,計算坐標然後裁剪,pc端完全沒有任何問題,效率很高,但是放到微信上面測試,發現3個問題(媽蛋,手機端就是坑,一個功能,3個不同的問題),第一個問題,大家都知道現在手機像素高,圖片不小,上傳過來之後,base64也不小,放到img的src中其實就是內存中了,導致整個微信特別容易崩潰(就是崩潰,他就崩潰了,微信就崩潰了---三次),第二個問題,使用vue的on來綁定touch事件,響應很慢,移動一點都不平滑,而且也會崩潰,沒錯,又崩潰了。第三個問題,旋轉要使用canvas轉化,先去圖片數據,轉完後,在給圖片src賦值,很麻煩。
解決方案: 統一使用canvas,不要再用img,知道裁剪完成了,把img的base64拿到就行,而且導出的時候,使用jpeg不要是png,降低一些畫質,我覺得完全沒有影響,也就是圖片的裁剪,旋轉都是canvas,事件建議直接原生綁定。
4、旋轉的坑,這個的問題是我們必須保存住原始圖片的數據,進行canvas先旋轉然後drawImage,要不沒有旋轉出來,canvas自己的imageData,似乎沒有辦法旋轉,我試矩陣的方式好像都不行(也可能是自己數學不好了!!!如果有人知道,就demo)。
以上是html5 上傳本機圖片各種問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!