在线工具给头像添加圣诞帽html源码

最新推荐文章于 2021-06-17 03:13:13 发布

qq_40108181

最新推荐文章于 2021-06-17 03:13:13 发布

阅读量1.4k

点赞数 2

分类专栏：源码分享文章标签：圣诞节 html

源码分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近马上圣诞节也要来临，跟一波风，弄了一个关于在线制作圣诞帽的小程序，感兴趣的朋友可以去尝试一下哦~
在线工具给头像添加圣诞帽html源码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>给你的头像加上圣诞帽-Merry Christmas-爱实验吧-1024吧</title>
  <style>
  body {
    font-size: 20px;
    text-align: center;
    margin: 0;
  }
  label {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 10px;
  }
  .header {
    color: #108757;
    height: 3rem;
  }
  #cvs {
    display: none;
    margin: 0 auto;
  }
  .canvas-container {
    margin: 0 auto;
  }
  .hide, #exportBtn {
    display: none;
  }
  .body {
    margin: 4rem auto 3rem;
    height: 10rem;
    width: 10rem;
    border: solid 1px #aaa;
    box-shadow: 0 0 5px #aaa;
    border-radius: 1rem;
    line-height: 10rem;
    position: relative;
  }
  #export {
    display: none;
    margin: 0 auto;
    width: 250px;
    height: 250px;
  }
  .footer {
    display: flex;
    justify-content: space-around;
  }
  button {
    font-size: 18px;
    color: #fff;
    padding: 0 30px;
    height: 2.3rem;
    background: #8fd16f;
    border: 0;
    border-radius: 20px;
  }
</style>
</head>
<body>
  <div class="header">
    <h2>圣诞节马上要到了~给你的头像加上圣诞帽叭~</h2>
  </div>
  <div class="body" id="uploadContainer">
    <small id="uploadText">上传头像</small>
    <input id="upload" type="file" onchange="viewer()" style="height: 10rem; width: 10rem; position: absolute; top: 0; left: 0; opacity: 0">
  </div>
  <img id="export" alt="圣诞快乐" src="http://www.241ba.com/sd/index.html">
  <canvas id="cvs"></canvas>
  <p id="tip" style="opacity: 0">点击帽子调整位置和大小</p>
  <div class="footer">
    <button id="change" onclick="changeHat()" style="display: none;">换 一 顶</button>
    <button id="exportBtn" onclick="exportFunc()">生成头像</button>
    <!-- <a onClick='reUpload()'>重来</a> -->
  </div>
    <div style="display: none">
      <img id="img" src="http://www.241ba.com/sd/index.html" alt="">
      <img class="hide" id="hat0" src="./hat0.png">
      <img class="hide" id="hat1" src="./hat1.png">
      <img class="hide" id="hat2" src="./hat2.png">
      <img class="hide" id="hat3" src="./hat3.png">
      <img class="hide" id="hat4" src="./hat4.png">
      <img class="hide" id="hat5" src="./hat5.png">
      <img class="hide" id="hat6" src="./hat6.png">
      <img class="hide" id="hat7" src="./hat7.png">
      <img class="hide" id="hat8" src="./hat8.png">
      <img class="hide" id="hat9" src="./hat9.png">
      <img class="hide" id="hat10" src="./hat10.png">
      <img class="hide" id="hat11" src="./hat11.png">
      <img class="hide" id="hat12" src="./hat12.png">
      <img class="hide" id="hat13" src="./hat13.png">
    </div>

    <script src="./fabric.min.js"></script>
    <script>
      var cvs=document.getElementById("cvs");var ctx=cvs.getContext("2d");var exportImage=document.getElementById("export");var img=document.getElementById("img");var hat="hat6";var canvasFabric;var hatInstance;var screenWidth=window.screen.width<500?window.screen.width:300;function viewer(){var file=document.getElementById("upload").files[0];console.log(file);var reader=new FileReader;if(file){reader.readAsDataURL(file);reader.onload=function(e){img.src=reader.result;img.onload=function(){img2Cvs(img)}}}else{img.src=""}}function img2Cvs(img){cvs.width=img.width;cvs.height=img.height;cvs.style.display="block";canvasFabric=new fabric.Canvas("cvs",{width:screenWidth,height:screenWidth,backgroundImage:new fabric.Image(img,{scaleX:screenWidth/img.width,scaleY:screenWidth/img.height})});changeHat();document.getElementById("uploadContainer").style.display="none";document.getElementById("uploadText").style.display="none";document.getElementById("upload").style.display="none";document.getElementById("change").style.display="block";document.getElementById("exportBtn").style.display="block";document.getElementById("tip").style.opacity=1}function changeHat(){document.getElementById(hat).style.display="none";var hats=document.getElementsByClassName("hide");hat="hat"+(+hat.replace("hat","")+1)%hats.length;var hatImage=document.getElementById(hat);hatImage.style.display="block";if(hatInstance){canvasFabric.remove(hatInstance)}hatInstance=new fabric.Image(hatImage,{top:40,left:screenWidth/3,scaleX:100/hatImage.width,scaleY:100/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)}function exportFunc(){document.getElementsByClassName("canvas-container")[0].style.display="none";document.getElementById("exportBtn").style.display="none";document.getElementById("tip").innerHTML="长按图片保存或分享";document.getElementById("change").style.display="none";cvs.style.display="none";exportImage.style.display="block";exportImage.src=canvasFabric.toDataURL({width:screenWidth,height:screenWidth})}
    </script>
  </body>
  </html>

ps：不支持上传图片和js，这些自己百度找点就行了。

qq_40108181

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在线工具给头像添加圣诞帽html源码

最近马上圣诞节也要来临，跟一波风，弄了一个关于在线制作圣诞帽的小程序，感兴趣的朋友可以去尝试一下哦~&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF
复制链接

扫一扫