迎国庆换新颜 国庆红旗风头像在线一键生成 附源码

后天是就是国庆节了，想必朋友圈好友又要更新一波国庆红旗风头像，既然这么火，不懂技术的朋友想做图又这么难，而博主作为程序员的自然要实现一下，一共8种款式可选~

国庆节个性化头像在线生成地址：https://www.zsxcool.com/guoqingjie

仔细研究了下，发现使用JavaScript实现起来并不难，核心代码就是最后使用canvas合成一张图片：

hatInstance = new fabric.Image(hatImage, {
  top: 0,
  left: 0,
  scaleX: screenWidth / hatImage.width,
  scaleY: screenWidth / hatImage.height,
  cornerColor: "#0b3a42",
  cornerStrokeColor: "#fff",
  cornerStyle: "circle",
  transparentCorners: false,
  rotatingPointOffset: 30
});
hatInstance.setControlVisible("bl", false);
hatInstance.setControlVisible("tr", false);
hatInstance.setControlVisible("tl", false);
hatInstance.setControlVisible("mr", false);
hatInstance.setControlVisible("mt", false);
canvasFabric.add(hatInstance)

界面布局也很简单，就几个HTML元素加上一个背景图片：

<div class="wrapper">
  <img src="" alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;">
  <div class="operation-header">
  </div>
  <div class="operation-box">
    <a class="prev" onClick='changeHat()'></a>
    <div class="operation-img">
      <div class="cropper-content" id="content">
        <canvas class="" id='cvs'></canvas>
      </div>
    </div>
    <a class="next" onClick='changeHat()'></a>
  </div>
  <img id='export' alt='国庆专属头像' src='' />
  <div class="operation-btns">
    <a class="o-btn1">
      <input class="o-btn1" id='upload' type='file' onchange='viewer()' style='opacity: 0;'>
    </a>
    <a class="o-btn2" onClick='exportFunc()' style="display: none;">
    </a>
  </div>

  <div class="operation-done">
    <img src="img/act-done-happy.png" alt="" class="act-done-happy">
  </div>
  <center>
    <a href="https://www.zsxcool.com/" target="_blank">
    </a>
  </center>
</div>

蓝奏云：https://zsxcool.lanzoui.com/iF1rlunnjni