這是最近給公司寫一個項目迟螺，項目要求大概是這樣子：
1.上傳手機(jī)本地圖片拔妥，然后裁剪（后加的需求）
2.能夠旋轉(zhuǎn)圖片，用于裁剪（后面加的需求）
3.填寫各種文字感猛，選擇顏色七扰，之后把文字和2個相關(guān)的圖片，水印到裁剪的圖片上陪白，上傳服務(wù)器生成一個圖片地址颈走，返回，分享出去咱士。

功能就是大概上面這些立由，其他的也就是各種小功能轧钓，不提了，技術(shù)選型說下锐膜，整體上使用 Vue（包括 router毕箍，resource，webpack等等）

那么這幾個需求怎么做呢：
1枣耀、 本地上傳霉晕，使用 html5 的 File Api 拿到圖片的base64編碼，賦值給img的src（坑1捞奕，2）牺堰，然后彈出一個圖層，進(jìn)行裁剪颅围，最開始裁剪是在img的上面套一個div來進(jìn)行坐標(biāo)計算伟葫，計算完了使用canvas來截取圖片，然后取值（坑3）院促。
2筏养、這個功能就是使用canvas的旋轉(zhuǎn)圖片解決，需要注意的是常拓，旋轉(zhuǎn)的時候要保持橫縱比渐溶，而且要注意寬高的大小（坑4）弄抬。
3茎辐、使用canvas來疊加水印和圖片即可，主要是注意坐標(biāo)掂恕。

那么說說坑：
1拖陆、拿到src的base64編碼，看似沒有問題懊亡，實際上有個巨大的問題依啰，很多圖片在手機(jī)上顯示為豎屏，但是拿到的base64編碼店枣，直接賦值給img的src后速警，發(fā)現(xiàn)是橫屏的。最開始發(fā)現(xiàn)這種情況鸯两，以為是個別現(xiàn)象坏瞄，最后不斷嘗試之后，發(fā)現(xiàn)是個非常普遍的情況甩卓，特別是IPhone手機(jī)鸠匀，而且還分你選擇的圖片文件夾，相冊和照片流同一張圖片逾柿，一個橫屏缀棍，一個豎屏宅此。導(dǎo)致我完全不能理解這是為什么？爬范？父腕？基本一個下午耗在這個問題上了。

直到晚上回去青瀑，問我一個朋友IOS開發(fā)的大神璧亮，@葉孤城__,他告訴我，因為現(xiàn)在IPhone的攝像頭就是橫著的斥难，手機(jī)里顯示豎屏的原因是ios自己做了處理枝嘶，他們可以根據(jù)圖片的一個拍攝角度數(shù)值來判斷橫豎問題，但是這個數(shù)值在我們web端確拿不到哑诊，很是尷尬群扶。那么怎么解決這個問題呢？镀裤？ ------- 我使用的方案:旋轉(zhuǎn)圖片竞阐，可以讓用戶自己去主動旋轉(zhuǎn)圖片，選取角度暑劝。 還有另外一種解決方案骆莹，在坑2也用到，后面講担猛。

2幕垦、除了這個橫屏之外，android手機(jī)有的上傳毁习，選擇了圖片之后智嚷，沒有任何反應(yīng)卖丸，我開始一度認(rèn)為原因是不支持html5的File Api纺且，所以沒有顯示出上傳的圖片，后面就各種debugger稍浆，發(fā)現(xiàn)原因是沒有觸發(fā)Input標(biāo)簽的change事件载碌，而且不管怎么樣都沒有辦法觸發(fā)，為了解決這個問題衅枫，查閱了各種官方文檔和stackoverflow之后嫁艇，發(fā)現(xiàn)可以給 type="file"的input添加兩個屬性來表示手機(jī)上傳圖片。

 <input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>

這樣添加了 accept 和 capture之后弦撩，有問題的android手機(jī)步咪，在選擇圖片的時候，有好幾個文件夾益楼，可以選擇了猾漫，其中有的可以上傳点晴，有的不行，經(jīng)常仔細(xì)的測試發(fā)現(xiàn)悯周，sd卡上的圖片是拿不到的粒督，也就不會觸發(fā)change事件，因為沒有root權(quán)限去拿文件數(shù)據(jù)禽翼。又是一個無解問題屠橄，因為你的web在瀏覽器里面，權(quán)限就是低啊闰挡，（不得不吐槽下web的權(quán)限問題锐墙，媽蛋）怎么解決問題呢？解总？贮匕？ 繞過去，也就是說如果你的頁面是嵌套在你們公司自己App里面的花枫，就讓App幫你刻盐，那么我們項目是微信傳播的，一定在微信瀏覽器里面劳翰，所以可以調(diào)用微信的JSSDK的選擇圖片接口敦锌，他是可以越過這些權(quán)限，而且還有一個好處佳簸，就是解決坑1的問題乙墙，他會處理橫屏問題，就是把看著豎屏生均，實際橫屏的上傳時都處理為豎屏听想，但是代價也不小，你要選擇圖片马胧，拿到一個key汉买，然后繼續(xù)調(diào)用sdk傳到微信的服務(wù)器，拿到一個serverid佩脊，這個id傳給自己的服務(wù)端蛙粘，讓他們通過這個id，去微信下載圖片到自己的服務(wù)器威彰，返回給你一個Url出牧。過程很曲折，而且下載次數(shù)有限制（可以跟微信申請加載限制）歇盼；

參考： 微信 js sdk 選擇圖片接口

3舔痕、我們繼續(xù)說坑，以上問題，解決了之后伯复，就是裁剪了盈咳，開始我使用的方案是這樣子的，獲取到base64之后边翼，賦值給一個img鱼响，然后在這個img上進(jìn)行框選移動，計算坐標(biāo)然后裁剪组底，pc端完全沒有任何問題丈积，效率很高，但是放到微信上面測試债鸡，發(fā)現(xiàn)3個問題（媽蛋江滨，手機(jī)端就是坑，一個功能厌均，3個不同的問題）唬滑，第一個問題，大家都知道現(xiàn)在手機(jī)像素高棺弊，圖片不小晶密，上傳過來之后，base64也不小模她，放到img的src中其實就是內(nèi)存中了稻艰，導(dǎo)致整個微信特別容易崩潰（就是崩潰，他就崩潰了侈净，微信就崩潰了---三遍）尊勿，第二個問題,使用vue的on來綁定touch事件，響應(yīng)很慢畜侦，移動一點都不平滑元扔，而且也會崩潰，沒錯旋膳，又崩潰了澎语。第三個問題，旋轉(zhuǎn)要使用canvas轉(zhuǎn)化溺忧，先去圖片數(shù)據(jù)咏连，轉(zhuǎn)完后盯孙，在給圖片src賦值鲁森，很麻煩。

解決方案： 統(tǒng)一使用canvas振惰，不要再用img歌溉，知道裁剪完成了，把img的base64拿到就行，而且導(dǎo)出的時候痛垛，使用jpeg不要是png草慧，降低一些畫質(zhì)，我覺得完全沒有影響匙头，也就是圖片的裁剪漫谷，旋轉(zhuǎn)都是canvas，事件建議直接原生綁定蹂析。

4舔示、旋轉(zhuǎn)的坑，這個的問題是我們必須保存住原始圖片的數(shù)據(jù)电抚，進(jìn)行canvas先旋轉(zhuǎn)然后drawImage惕稻，要不沒有旋轉(zhuǎn)出來，canvas自己的imageData蝙叛，貌似沒有辦法旋轉(zhuǎn)俺祠，我試了矩陣的方式好像都不行（也可能是自己數(shù)學(xué)不好！＝枇薄蜘渣！如果有人知道，就demo）肺然。

以上就是這次項目宋梧，遇到的各種大坑，其他都是小的地方狰挡，不過總體來說捂龄，完成了任務(wù)，并且使用了新的技術(shù)Vue.js加叁。Vue的component還是非常好用的倦沧，注意父子關(guān)系，props的繼承就沒問題了它匕。

歡迎大家交流相關(guān)技術(shù)展融， 如果對Vue感興趣，可以加QQ群： 364912432豫柬，240319632告希。

求打賞，求關(guān)注微博烧给。O(∩_∩)O哈哈~

最后附上活動網(wǎng)址燕偶，微信客戶端打開才能使用： 預(yù)測2046

歡迎各位參與玩耍。