??快來領取國慶節專屬頭像！！26種樣式隨你挑！??-有解無憂

最近大家是不是看到很多朋友的頭像已經換成國慶專屬頭像了？我去小程式看了一下，發現要看視頻才能保存圖片，真的太氣人了！！
請添加圖片描述
于是想自己寫一個網頁版，隨心所欲選擇樣式，想換就換！！

在線定制地址：國慶專屬頭像

從手機相冊選擇一個頭像（最好是正方形），然后選擇一個喜歡的樣式，再點擊生成就可以了，
請添加圖片描述

這個專案是我從Git上面找的，當時代碼已經寫的差不多了，但是缺少頭像樣式，所以就去Git上面看了一下，發現已經有大佬制作好了，于是在大佬的基礎上改了一點東西，搭建到我的主機上給大家免費使用，
github原始碼地址

因為大佬的原專案的檔案上傳只是一個input，沒有樣式，所以我加了一個label，

          <div class="operation-btns">
              <label class="button_qwe" for="fle" >選擇頭像</label>
          <input type="file" id="fle" accept="image/*" style="position:absolute;clip:rect(0 0 0 0);" >
          </div>

另外大佬的專案里面選擇頭像之后還要點擊上傳才能顯示在頁面中，我覺得這樣是比較繁瑣的，新加了一點代碼，使其選擇完圖片時直接顯示，

$('#fle').change(function () {
        // 先獲取用戶上傳的檔案物件
        let fileObj = this.files[0];
        // 生成一個檔案讀取的內置物件
        let fileReader = new FileReader();
        // 將檔案物件傳遞給內置物件
        fileReader.readAsDataURL(fileObj); //這是一個異步執行的程序，所以需要onload回呼函式執行讀取資料后的操作
        // 將讀取出檔案物件替換到img標簽
        fileReader.onload = function(){  // 等待檔案閱讀器讀取完畢再渲染圖片
           $('#create').css('display','inline-block');//顯示生成頭像

            $('#cropper-img').attr('src',fileReader.result);
        }
    });

完整html代碼：
github原始碼地址

<!doctype html>
<!DOCTYPE html><html lang="en" style="opacity: 1; font-size: 26.6666px;"><head><meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="迎國慶換新顏">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telphone=no,email=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="icon" href="img/logo.png">
    <title>
      迎國慶換新顏-國慶頭像
    </title>
    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fea455faf8a55b8c58928f6fe0af0800";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
    <script charset="utf-8" async="" src="js/jweixin-1.0.0.js">
    </script>
<style>.p2{
font-size:20px;color:#3a2d2db8;text-align:center;
}
a{text-decoration: none;}
a:hover, a:focus {
    color: #74777b;
}</style>
    <script>
      !
      function() {
        var i = 0; !
        function e(t) {
          var n = 40; (document.documentElement.clientWidth !== window.innerWidth || 0 === document.documentElement.clientWidth && 0 === window.innerWidth) && i < 10 ? (document.documentElement.style.opacity = 0, window.setTimeout(e, 0), i++) : (document.documentElement.style.opacity = 0, setTimeout(function() {
            var e = 500 < window.innerWidth ? 500 : window.innerWidth;
            n = parseInt(e / 750 * 1e4 * 40) / 1e4,
            document.documentElement.style.opacity = 1,
            document.documentElement.style.fontSize = n + "px"
          },
          0))
        } ()
      } ()
    </script>
    <script src="js/TGMobileShare-noadtag19.min.js">
    </script>
    <script>
      !
      function(n) {
        "use strict";
        n.loadCSS || (n.loadCSS = function() {});
        var o = loadCSS.relpreload = {};
        if (o.support = function() {
          var e;
          try {
            e = n.document.createElement("link").relList.supports("preload")
          } catch(t) {
            e = !1
          }
          return function() {
            return e
          }
        } (), o.bindMediaToggle = function(t) {
          function e() {
            t.media = a
          }
          var a = t.media || "all";
          t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e),
          setTimeout(function() {
            t.rel = "stylesheet",
            t.media = "only x"
          }),
          setTimeout(e, 3e3)
        },
        o.poly = function() {
          if (!o.support()) for (var t = n.document.getElementsByTagName("link"), e = 0; e < t.length; e++) {
            var a = t[e];
            "preload" !== a.rel || "style" !== a.getAttribute("as") || a.getAttribute("data-loadcss") || (a.setAttribute("data-loadcss", !0), o.bindMediaToggle(a))
          }
        },
        !o.support()) {
          o.poly();
          var t = n.setInterval(o.poly, 500);
          n.addEventListener ? n.addEventListener("load",
          function() {
            o.poly(),
            n.clearInterval(t)
          }) : n.attachEvent && n.attachEvent("onload",
          function() {
            o.poly(),
            n.clearInterval(t)
          })
        }
        "undefined" != typeof exports ? exports.loadCSS = loadCSS: n.loadCSS = loadCSS
      } ("undefined" != typeof global ? global: this)
    </script>
     <link href="css/chunk-nationaldayhead-vendors.0f433423.css"
    rel="stylesheet" as="style" onload="this.οnlοad=null,this.rel=&quot;stylesheet&quot;">
    <noscript>
      &lt;link href="https://qnlite.gtimg.com/qqnewslite/css/chunk-nationaldayhead-vendors.0f433423.css"
      rel="stylesheet"&gt;
    </noscript>
    <link rel="stylesheet" type="text/css" href="css/r-nationaldayhead.6e9074cf.css">
    <script charset="utf-8" src="js/r-nationaldayhead.516767eb.js">
    </script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
  </head>
  <body class="">
    <div id="app">
      <!---->
      <div class="wrapper" style="background-image: url('img/background-image.png');">
        <!-- <img src="http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eruzEDjGnUFZ8czjIvuBY1xh7Fep9T2gPmRxBoczBVgctkgR2zmsibodaiaqqthY65KiaEYtWzMoxCEg/0"
        alt="" class="img-load" style="width: 9.5rem; position: fixed; top: 0px; left: -9999px;"> -->
        <div class="operation-header">
          <!-- <div class="h-logo">
          </div> -->
          <div class="h-title" style="background-image: url('img/title-image.png');">
          </div>
          <div class="h-slogan" style="background-image: url('img/slogan-image.png');">
          </div>
        </div>
        <div class="operation-number">
選擇頭像后點擊左右按鈕切換樣式，
        </div>
        <div class="operation-box">
          <div class="prev">
          </div>
          <div class="operation-img">
            <div class="cropper-content">

                <!--width: 1012px; height: 1012px; transform: scale(0.250324, 0.250324) translate3d(-1515.38px, -1515.38px, 0px) rotateZ(0deg)-->
              <div data-v-6dae58fd="" class="vue-cropper" id="vue-cropper">
                <div data-v-6dae58fd="" class="cropper-box" id="cropper-box">
                 <!--  <div data-v-6dae58fd="" class="cropper-box-canvas" style="">
                   
                 </div> -->
                  <img style="width: 100%;height: 100%;" src="img/head.png" alt="cropper-img" id="cropper-img">
                  <img src="img/hat1.png" class="frame-image" id="FrameImage">
                </div>
                <div data-v-6dae58fd="" class="cropper-drag-box cropper-move">
                </div>
                <div data-v-6dae58fd="" class="cropper-crop-box" style="width: 0px; height: 0px; transform: translate3d(0px, 0px, 0px); display: none;">
                  <span data-v-6dae58fd="" class="cropper-view-box">
                    <!-- <img data-v-6dae58fd="" src="blob:https://rl.inews.qq.com/ea5cb9d2-d588-467b-86c7-cc3b33cd260b"
                    alt="cropper-img" style="width: 1012px; height: 1012px; transform: scale(0.250324, 0.250324) translate3d(-1515.38px, -1515.38px, 0px) rotateZ(0deg);"> -->
                  </span>
                  <span data-v-6dae58fd="" class="cropper-face cropper-move">
                  </span>
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
          </div>
          <div class="next">
          </div>
        </div>
                  <div class="operation-btns">
              <label class="button_qwe" for="fle" >選擇頭像</label>
          <input type="file" id="fle" accept="image/*" style="position:absolute;clip:rect(0 0 0 0);" >
<!--            <a type="button" id="up_button" class="button_qwe">上傳頭像</a>-->
          </div>
        <div class="operation-btns">
          <!-- <div class="o-btn o-btn2" style="background-image:none;">
          
          
          </div> -->
          <a type="button" id="create" style="display: none;" class="button_qwe">生成頭像</a>  
        </div>
          <div class="operation-btns">
            <a type="button" id="down_button" style="display: none;" class="button_qwe">下載</a>  
          </div>

        
        <!---->
        
        <div class="shade-box" style="display:none;z-index: 2004;width: 100%;height: 100%;position: fixed;top: 0;left: 0; background: rgba(0,0,0,0.3);"></div>
        <div class="van-popup van-popup--center" style="z-index: 2005;display: none;">
          <div class="long-press">
            <div class="l-img">
              <img id="head_img" src="data:image/png;bas5Ch/78WAENtJv2RKgAAAABJRU5ErkJggg==">
            </div>
            <div class="l-tips">
              長按保存影像
            </div>
          </div>
        </div>

       
      </div>
    </div>

    
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="js/chunk-vendors.836075e1.js"></script>
     <script src="js/chunk-nationaldayhead-vendors.0ea1c589.js"></script>

    <!--<script src="https://qnlite.gtimg.com/qqnewslite/js/nationaldayhead.5241bf47.js"></script> -->
     <script src="js/WXJssdk.js"> </script>
     <script src="js/qqapi.js?_bid=152"> </script>
   
     <!-- <script type="text/javascript" src="https://mat1.gtimg.com/bbs/static/html2canvas.min.js" charset="utf-8"> </script> -->
    <script src="js/html2canvas.min.js"></script>


    <script type="text/javascript">
       var FrameImage = ['img/head0.png','img/head2.png','img/head3.png','img/head4.png','img/head5.png','img/head6.png','img/head7.png','img/hat8.png','img/hat9.png','img/hat10.png','img/hat11.png','img/hat12.png','img/hat13.png','img/hat14.png','img/hat15.png','img/hat16.png','img/hat17.png','img/hat18.png','img/hat19.png','img/hat20.png','img/hat21.png','img/hat22.png','img/hat23.png','img/hat1.png'];
       var indexS = -1;
    
    function changeThemeType() {};
$('#fle').change(function () {
        // 先獲取用戶上傳的檔案物件
        let fileObj = this.files[0];
        // 生成一個檔案讀取的內置物件
        let fileReader = new FileReader();
        // 將檔案物件傳遞給內置物件
        fileReader.readAsDataURL(fileObj); //這是一個異步執行的程序，所以需要onload回呼函式執行讀取資料后的操作
        // 將讀取出檔案物件替換到img標簽
        fileReader.onload = function(){  // 等待檔案閱讀器讀取完畢再渲染圖片
           $('#create').css('display','inline-block');//顯示生成頭像

            $('#cropper-img').attr('src',fileReader.result);
        }
    });
    $('.next').on('click',function(){
          indexS++;
          if(indexS>=FrameImage.length){
            indexS = 0;
          }

          $('#FrameImage').attr('src',FrameImage[indexS]);
        console.log(indexS)
      });
    $('.prev').on('click',function(){
        indexS--;
        if(indexS<0){
            indexS = FrameImage.length-1;
          }
          $('#FrameImage').attr('src',FrameImage[indexS]);
         console.log(indexS)
      });
    //上傳
    $('#up_button').on('click', () => {
      var file = document.getElementById('fle')
      var formData = new FormData()
      formData.append('uploadImg', file.files[0]);
      formData.append('name', 'zheng');
     
      var reader = new FileReader();
      //上傳圖片最大值(單位位元組)（ 2 M = 2097152 B ）超過2M上傳失敗
      var AllowImgFileSize = 4400000; 
      var file = $("#fle")[0].files[0];
      var imgUrlBase64;
      if (file) {
        //將檔案以Data URL形式讀入頁面  
        imgUrlBase64 = reader.readAsDataURL(file);
        reader.onload = function (e) {
          //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，需要與后臺溝通）
          if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
            alert('上傳失敗，請上傳不大于4M的圖片！');
            return;
          } else {
            //執行上傳操作
            console.log(reader.result);
            $('#create').css('display','inline-block');//顯示生成頭像

            $('#cropper-img').attr('src',reader.result);
            //$.post('http://127.0.0.1:6080/upload', { img64: reader.result })
          }
        }
      }
    })


    //這是另一種寫法
    $(function () {
        $("#create").click(function () {
          
          
                var width = $('#cropper-box').width()
                var height = $('#cropper-box').height()
                var canvasBox = document.createElement("canvas"); 
                var scale = window.devicePixelRatio; 
                var rect = $('#cropper-box').get(0).getBoundingClientRect(); 
                canvasBox.width = width * scale; 
                canvasBox.height = height * scale; 

                canvasBox.style.width = width + "px";
                canvasBox.style.height = height + "px";
                canvasBox.getContext("2d").scale(scale, scale); 
                canvasBox.getContext("2d").translate(-rect.left, -rect.top); 

          setTimeout(function(){
            html2canvas($("#cropper-box")[0], {
                    useCORS: true,
                    dpi: window.devicePixelRatio*2,
                    allowTaint: true, // 是否使用圖片跨域
                    //timeout: 100, // 延遲
                    canvas:canvasBox,
                    scale:scale,
                    width:width,
                    heigth:height,
                   // useCORS: true, // 不同版本不一樣，我加上了
                    onrendered: function(canvas) {
                        // 回傳canvas節點
                        // 
                        $('.van-popup--center').css('display','inline-block');
                          $('.shade-box').css('display','inline-block');//顯示遮罩
                        $('#head_img').attr('src',canvas.toDataURL());
                         $('#down_button').attr( 'href' , canvas.toDataURL() ) ;  
                        $('#down_button').attr( 'download' , 'myjobdeer.png' ) ; 
                        //$('#down_button').css('display','inline-block');
                    }
                }); 
          },10);
         

        });

        //點擊遮罩
        $('.shade-box').on('click',function(){
          $('.shade-box').css('display','none');//遮罩
          $('.van-popup--center').css('display','none');
        })
    });
    </script>
<div style="text-align:center;width:90%;left:5%;bottom:10px;position:fixed;">
    <a href="http://ridesharing.top" target="_blank" class="p2">皮小孩個人主頁</a>
    <a href="http://ridesharing.top/pictures.html" target="_blank" class="p2">隨機圖片</a>
<a href="http://ridesharing.top/tiangou.html" target="_blank" class="p2">舔狗語錄</a>
</div>
</body></html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304981.html

標籤：其他

上一篇：C語言：動態記憶體錯誤

下一篇：（十）ajax異步重繪問題（input和button）