蹭热点，请给我一面国旗@微信官方

猜测如何实现

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