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

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

猜想如何實現

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. 自定義素材

---

更新時間 2019年9月26日11:34:54
https://www.lilnong.top/stati...

1. 放大了一下倍圖片解決毛邊

2. 增長了旋轉功能

   ctx.translate(widthHeight / 2, widthHeight / 2)
   ctx.transform.apply(ctx, getComputedStyle(avatarViewRotate).transform.match(/-?[\d.]+/g))
   ctx.translate(-1 * widthHeight / 2, -1 * widthHeight / 2);

---

更新時間 2019年9月26日13:47:19
https://www.lilnong.top/stati...

1. 兼容pc
2. 修改轉換優先級

---

更新時間 2019年10月9日09:08:37

1. 只考慮技術實現，未生成大圖（已修復 750*750）

微信公衆號：前端linong