蹭熱點，請給我一面國旗@微信官方

今天下午微信朋友圈炸了，所有人都在要國旗。迎國慶換新顏活動 | 騰訊新聞的合成服務 微信中打開。
我們呢，也來蹭蹭熱度，聊聊其中的技術。

猜測如何實現

1. 授權-獲取用戶頭像
2. 載入圖片
3. 手勢操作-移動縮放
4. 合成圖片
5. 下載圖片

求證如何實現

當然，上面只是我以爲。通過觀察分析節點，我發現

1. 的確是載入圖片了。地址爲blob:開頭
2. 但是並無canvas操作，而且基於DOM,用scale、translate等transfrom來支持
3. 合成依賴html2canvas庫
4. 下載基於長按圖片。

自己動手實現

因爲我的公衆號是個人號，沒權限。所以我們稍微的改一下。
對不起父老鄉親們，昨天我沒寫完就下班了。測試地址，終於寫完了。下面說說關鍵點

1. 上傳圖片
   使用FileAPI獲取文件，URL.createObjectURL(file)將file轉換url

        // 上傳頭像功能塊
        uploadInput.addEventListener('change', function(){
            if(this.files.length){
                var file = this.files[0];
                avatarView.style.backgroundImage = 'url('+URL.createObjectURL(file)+')';
                // avatarView.src=URL.createObjectURL(file)
            }
        })

2. 手勢操作
   e.touches裏面會有當前觸發點。通過transfrom來合成，當然因爲多個值會造成座標系偏移，我使用多層來處理。

    <div class="avatarViewScale" id="avatarViewScale" style="transform: scale(1,1)">
     <div class="avatarViewTranslate" id="avatarViewTranslate" style="transform: translate(0,0)">
      <div class="avatar avatarView" src="https://www.lilnong.top/static/img/avator/avator-14.jpg" id="avatarView"></div>
     </div>
    </div>

   1. 移動是比較touchstart記錄點與touchmove記錄點的插值。比較好算
   2. 縮放是也是比較記錄點，但是需要用勾股定理計算比例
3. 合成圖片
   通過cavnas的drawImage來合成。我覺得偏移量應該要注意一下。
4. 下載圖片
   通過 canvas.toDataURL('image/jpeg') 來生成base64url然後放入img。通過微信自帶的長按下載來實現

總結

太忙了。好不容易寫完。感覺實現上還是蠻簡單的，做好就不容易了。

1. 毛邊問題
2. 圖片預加載策略
3. 旋轉的算法
4. 自定義素材

微信公衆號：前端linong