資訊專欄INFORMATION COLUMN
摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成
原文還是在簡書上： html5 上傳本地圖片處理各種問題
這是最近給公司寫一個項目，項目要求大概是這樣子：
1.上傳手機本地圖片，然后裁剪（后加的需求）
2.能夠旋轉圖片，用于裁剪（后面加的需求）
3.填寫各種文字，選擇顏色，之后把文字和2個相關的圖片，水印到裁剪的圖片上，上傳服務器生成一個圖片地址，返回，分享出去。
功能就是大概上面這些，其他的也就是各種小功能，不提了，技術選型說下，整體上使用 Vue（包括 router，resource，webpack等等）
那么這幾個需求怎么做呢：
1、 本地上傳，使用 html5 的 File Api 拿到圖片的base64編碼，賦值給img的src（坑1，2），然后彈出一個圖層，進行裁剪，最開始裁剪是在img的上面套一個div來進行坐標計算，計算完了使用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添加兩個屬性來表示手機上傳圖片。
這樣添加了 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）。
以上就是這次項目，遇到的各種大坑，其他都是小的地方，不過總體來說，完成了任務，并且使用了新的技術Vue.js。Vue的component還是非常好用的，注意父子關系，props的繼承就沒問題了。
歡迎大家交流相關技術， 如果對Vue感興趣，可以加QQ群： 364912432，240319632。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49696.html
摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目，項目要求大概是這樣子上傳手機本地圖片，然后裁剪后加的需求能夠旋轉圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關的圖片，水印到裁剪的圖片上，上傳服務器生成 原文還是在簡書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目，項目要求大概是這樣子：1.上傳手機本地圖片，然后裁剪（后加的需...
摘要：圖片數據繪制到先構造對象，為，圖片之后繪制到的圖片文件數據繪制到還是先轉換成一個，然后構造對象，為，圖片之后繪制到利用上面的函數，由對象得到格式的，再參考圖片數據繪制到轉換為對象并使用發送轉換為對象后，可以使用上傳圖像文件。 實現功能和適用業務 采集本地攝像頭獲取攝像頭畫面，拍照保存，上傳服務器； 前端上傳圖片處理，展示，縮小，裁剪，上傳服務器 實現步驟 調取本地攝像頭（get...
摘要：圖片數據繪制到先構造對象，為，圖片之后繪制到的圖片文件數據繪制到還是先轉換成一個，然后構造對象，為，圖片之后繪制到利用上面的函數，由對象得到格式的，再參考圖片數據繪制到轉換為對象并使用發送轉換為對象后，可以使用上傳圖像文件。 實現功能和適用業務 采集本地攝像頭獲取攝像頭畫面，拍照保存，上傳服務器； 前端上傳圖片處理，展示，縮小，裁剪，上傳服務器 實現步驟 調取本地攝像頭（get...
閱讀 1443·2021-11-22 13:54
閱讀 4323·2021-09-22 15:56
閱讀 1815·2021-09-03 10:30
閱讀 1318·2021-09-03 10:30
閱讀 2086·2019-08-30 15:55
閱讀 1851·2019-08-30 14:13
閱讀 2059·2019-08-29 15:19
閱讀 2341·2019-08-28 18:13
