网站源码 · Source Code

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

•̀.̫•́✧ · 9月29日 · 2021年 ·

国庆红旗头像一键生成

后天是就是国庆节了,想必朋友圈好友又要更新一波国庆红旗风头像,既然这么火,不懂技术的朋友想做图又这么难,而博主作为程序员的自然要实现一下,一共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

0 条回应