如何简单实现一个刷爆朋友圈的"国旗头像生成器"😂

相信大家昨天的朋友圈大部分是这样的

又或者是这样的...

起因是，腾讯新闻做了一个，可以生成带有"国旗"的图片H5网站，扫码即可以体验：

活动好像已结束...

那么，如何自己实现一个简单的例子呢？用html2canvas插件简单到飞起！

html2canvas

顾名思义，其作用就是将html的指定dom节点转换成canvas画布，假设页面布局如下：

<div class="creator">
  <!-- 头像 -->
  <div class="avatar"></div>

  <!-- 国旗（定位在盒子的右下角或者其他） -->
  <div class="national"></div>
</div>

然后简单的处理如下：

<script  src="./html2canvas.js"></script>
<script>
  html2canvas(document.querySelector(".creator")).then(canvas => {
    // do somthing ...
  });
</script>

拿到canvas之后，再将其转换成图片：

let url = canvas.toDataURL("image/png");

然后再渲染到img标签，然后提示用户"长按保存"就行啦！如果图片跨域或者不清晰，配置以下参数即可：

html2canvas(dom, {
  useCORS: true,
  scale: window.devicePixelRatio * 2
});

一个简单的案例

这是我自己写的一个小案例（没有去优化，如图片裁剪，知道实现思路就行，大家自行扩展，国旗的图案就别较真啦！）

扫码即可以体验：

赶紧自己也去动手实现一个吧！

相关链接

html2canvas官网：
http://html2canvas.hertzen.com/

html2canvas的cdn地址：
https://www.bootcdn.cn/html2canvas/

交流

微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号，回复"1"获取群聊二维码，一起学习、一起交流、一起摸鱼🌊