最近比較忙，一下子做了兩個圖片合成的h5，切圖重構編代碼，測試優化加修改，所以也一直沒有維護投稿郵箱，好多郵件沒回復，好多答應收錄的h5也一直躺在計劃列表中....實在是很抱歉啊。
好了題歸正傳，今天呢就為大家講一講有關圖片合成的小事兒，相信無論你是策劃還是設計，亦或是技術都可以從中獲益的，因為這都是我所經歷的血淋淋的教訓...呃..當然也沒有那麼嚴重啦。
首先呢，你要知道圖片合成是怎麼實現的？
一、有關圖片合成的技術實現
此處你可以略過，僅看圖
方式一後臺合成：
顧名思義，這個方法就是在後臺合成圖片，也就說用戶會在前端頁面中上傳圖片（或是通過微信授權得取），再把數據傳輸給後臺，後臺對該圖片進行處理合成，在把合成過的圖片傳給前端頁面。也就說，所有用戶合成圖片的操作都是由後臺處理的（後臺我不懂，具體怎麼操作的我也就不清楚啦），想像一下吧，有多少人玩兒這個頁面，你的「後臺同學」就要合成多少次，一旦玩兒的人多，他可能就會吃不消，撂挑子不幹哦...
方式二前端合成：
HTML5中有一個非常好用的新標籤canvas！相信大家也並不陌生，很多擁有炫酷畫面的h5都應用了這個canvas標籤。當然，我們華麗麗的小canvas也可將畫布中的內容導出為圖片，所以呢我們只需要將用戶上傳的圖片與背景圖片同時放到畫布中，再導出base64格式的圖片，直接寫入img標籤的src中即可顯示，在ios版微信中，長按該img標籤便可下載！
此刻注意，必須是ios微信殼下才能實現長按保存的功能。安卓微信中這樣操作會報出保存失敗的錯誤（目前為止是這樣子滴），必須得有個接口將base64格式的圖片上傳至後臺，將返回的連結寫入img標籤的src中，才可以在安卓下長按圖片保存。所以啦，這個方法雖說是前端合成，但是為了適配安卓機型也是要後臺配合的。
前端合成圖片的好處呢，是合成圖片的操作分化在每一個手機裡，這樣就不會給「後臺同學」造成很大壓力，但是保不準在哪個低端機型中會出現合成失敗的情況出現，這個嘛，就很難解決了。並且前端合成圖片只能是做比較簡單的合成，至於人臉識別啊什麼的，是需要後臺對上傳照片進行圖形圖像處理分析的，這個需要更強大的技術支撐，不是那麼容易的喲~所以如果你想要這種，一定要提前說明！（嘛，其實通過canvas是可以獲取像素數據的，有了像素數據就可以對圖片進行分析，不過我是沒有試過啦，自己感覺是超費性能的）
二、在策劃時需要注意的幾點
首先你要明確，你的圖片合成想要什麼樣的效果。如果你想在合成的圖片裡讓用戶添加文字，那麼你需要考慮一下幾點：
1、文字從哪裡來？是用戶填寫表單還是授權。
2、用戶輸入的文字過長怎麼辦？
如果你想在合成的圖片裡添加圖片，那麼你同樣需要考慮一下幾點：
1、圖片從哪裡來？是授權還是用戶上傳
2、圖片到哪裡去？
3、效果好不好？
我這裡見過兩種策劃方式，一種就類似案例「美人魚」的那種，直接將合成圖片的背景暴露在用戶眼前，用戶上傳照片後，用戶通過雙指操作對上傳圖片進行位置大小和旋轉角度的修改，在生成圖片前就能知道Ta生成照片的樣子。
還有一種，就是先給用戶一個圈，而不給出背景圖片，用戶即使對上傳圖片進行調整，他也並不能知道最終的生成效果。
文字不明白的請看圖，圖還不明白的..
恩..那就多看幾個案例吧
如果你需要上傳的文字，類似「假結婚證」的案例，那麼你可以讓用戶輸入完文字後，直接給出生成圖片。但是，如果你要做的是「美人魚」這種填臉的案例，我推薦你用上文提到的第一種方式，讓用戶在沒有得到生成圖片結果前，就能對生成圖片的效果有個預知，這樣用戶就能夠對上傳的圖片進行調整。也就是說，像「美人魚」這種，填臉的案例！！！最好不要讓用戶上傳完頭像後，就直接生成照片！！！！若用戶上傳的正臉頭像，而合成圖片的背景是側臉，效果肯定不好啊...
當然還有一點需要注意，那就是關於用戶調整上傳照片時的操作區域（大部分上傳圖片都需要給一個用戶調整圖片的區域，一般來講授權就不必了哈）。請務必將手勢區域弄成滿屏！！！！！！！不然效果會非常不好！
在生成圖片時，會耗費一定時間（比如上文提到的安卓適配問題是需要花時間提交數據的），請給一個「圖片合成中」的提示，優化用戶體驗~
三、在設計時需要注意的幾大坑
製作「美人魚」這種填臉的案例時，請一定要找正臉的背景圖片！！！不然側臉根本就效果不好！！！
如果你接到的策劃流程是「給圈但不給背景圖，最後再出結果」的這種，請儘量將用戶上傳圖片時的圈圈和用戶生成圖片摳圖的那個圈圈保持一致！不然技術這邊會很難操作，嚶嚶嚶..
還有就是在上文提到的，操作區域問題，請務必將操作區域佔滿全屏。當然嘍，如果給出一個貼心的提示，告訴用戶可以滿屏操作拖拽圖片就更好啦~~~
還有幾句嘮叨：
1、一切提前做好準備，不要臨上線的再測試再修改。技術的調整和測試都是需要時間的，有時候很小的一點，也許要花費大量時間。我知道大家都是聰明人，擺脫不要做傻逼事。
2、還有不要輕易的說，你們這個東西很容易，很簡單。一個技術實現容易不容易，只有技術知道，你說這樣的話，只會惹毛他們。說白了，自己可以說自己做的東西很easy，別人可不行！
3、要修改的話，在不能當面說出的時候，請明確說明。不要說類似「改大一點二」的話，一點兒是多大啊。無論如何，請明確說出你的預期，講清一件事兒的能力，相信大家都有。再不行，就像我這種不太會說的，畫張圖也可以吧...
4、長按識別二維碼和長按保存圖片是微信的功能啊，也許其他瀏覽器也有這個功能，但真心不是每個瀏覽器就有的呃...
5、我知道大家有時候有時也是身不由己，做什麼東西可能也都是客戶領導說了算，在如此環境下，希望大家的小火苗還沒有被熄滅，共勉。
此篇文章中的配圖僅僅是示意圖，
那個啥，美感什麼的咱就別多要求了哈~
點擊下方「閱讀原文」，看圖片合成H5案例