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

今天下午微信朋友圈炸了，所有人都在要国旗。迎国庆换新颜活动 | 腾讯新闻的合成服务 微信中打开。
我们呢，也来蹭蹭热度，聊聊其中的技术。

猜测如何实现

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