1. <style id="GTpwO"><ins id="GTpwO"></ins><acronym id="GTpwO"><q id="GTpwO"><progress id="GTpwO"><ruby id="GTpwO"></ruby></progress></q><kbd id="GTpwO"><video id="GTpwO"><ol id="GTpwO"></ol></video><small id="GTpwO"></small><keygen id="GTpwO"></keygen><ruby id="GTpwO"><dt id="GTpwO"><cite id="GTpwO"><param id="GTpwO"></param></cite></dt></ruby><button id="GTpwO"></button></kbd><figure id="GTpwO"><i id="GTpwO"></i></figure><fieldset id="GTpwO"><b id="GTpwO"><noscript id="GTpwO"></noscript></b></fieldset></acronym></style><address id="GTpwO"></address>
      <dl id="GTpwO"><dd id="GTpwO"><textarea id="GTpwO"><link id="GTpwO"><ul id="GTpwO"><thead id="GTpwO"><aside id="GTpwO"><input id="GTpwO"><datalist id="GTpwO"><input id="GTpwO"></input></datalist><video id="GTpwO"></video><cite id="GTpwO"></cite></input><col id="GTpwO"></col></aside></thead></ul></link></textarea><em id="GTpwO"></em><mark id="GTpwO"></mark></dd></dl>
    2. |
      |
      51CTO旗下网站
      |
      |
      移动端

      教你如何给你的头像添加一个好看的国旗

      近日朋友圈又火了,听说原因是 @腾讯官网 就能得到一个好看的国庆节头像,那么我们自己动手实现一个吧,教你如何给你的头像添加一个好看的国旗。

      作者:佚名来源:segmentfault|2020-02-24 09:26

      近日朋友圈又火了,听说原因是 @腾讯官网 就能得到一个好看的国庆节头像,那么我们自己动手实现一个吧,教你如何给你的头像添加一个好看的国旗。

      由于代码比较简单就不一一介绍了。

      1. var cvs = document.getElementById("cvs"); 
      2. var ctx = cvs.getContext("2d"); 
      3. var exportImage = document.getElementById("export"); 
      4. var img = document.getElementById("img"); 
      5. var hat = "hat6"
      6. var canvasFabric; 
      7. var hatInstance; 
      8. var screenWidth = window.screen.width < 500 ? window.screen.width : 300; 
      9.  
      10. function viewer() { 
      11.     var file = document.getElementById("upload").files[0]; 
      12.     console.log(file); 
      13.     var reader = new FileReader; 
      14.     if (file) { 
      15.         reader.readAsDataURL(file); 
      16.         reader.onload = function(e) { 
      17.             img.src = reader.result; 
      18.             img.onload = function() { 
      19.                 img2Cvs(img) 
      20.             } 
      21.         } 
      22.     } else { 
      23.         img.src = "" 
      24.     } 
      25.  
      26. function img2Cvs(img) { 
      27.     cvs.width = img.width; 
      28.     cvs.height = img.height; 
      29.     cvs.style.display = "block"
      30.     canvasFabric = new fabric.Canvas("cvs", { 
      31.         width: screenWidth, 
      32.         height: screenWidth, 
      33.         backgroundImage: new fabric.Image(img, { 
      34.             scaleX: screenWidth / img.width, 
      35.             scaleY: screenWidth / img.height 
      36.         }) 
      37.     }); 
      38.     changeHat(); 
      39.     document.getElementById("uploadContainer").style.display = "none"
      40.     document.getElementById("uploadText").style.display = "none"
      41.     document.getElementById("upload").style.display = "none"
      42.     document.getElementById("change").style.display = "block"
      43.     document.getElementById("exportBtn").style.display = "block"
      44.     document.getElementById("tip").style.opacity = 1 
      45.  
      46. function changeHat() { 
      47.     document.getElementById(hat).style.display = "none"
      48.     var hats = document.getElementsByClassName("hide"); 
      49.     hat = "hat" + (+hat.replace("hat""") + 1) % hats.length; 
      50.     var hatImage = document.getElementById(hat); 
      51.     hatImage.style.display = "block"
      52.     if (hatInstance) { 
      53.         canvasFabric.remove(hatInstance) 
      54.     } 
      55.     hatInstance = new fabric.Image(hatImage, { 
      56.         top: 40, 
      57.         left: screenWidth / 3, 
      58.         scaleX: 100 / hatImage.width, 
      59.         scaleY: 100 / hatImage.height, 
      60.         cornerColor: "#0b3a42"
      61.         cornerStrokeColor: "#fff"
      62.         cornerStyle: "circle"
      63.         transparentCorners: false
      64.         rotatingPointOffset: 30 
      65.     }); 
      66.     hatInstance.setControlVisible("bl"false); 
      67.     hatInstance.setControlVisible("tr"false); 
      68.     hatInstance.setControlVisible("tl"false); 
      69.     hatInstance.setControlVisible("mr"false); 
      70.     hatInstance.setControlVisible("mt"false); 
      71.     canvasFabric.add(hatInstance) 
      72.  
      73. function exportFunc() { 
      74.     document.getElementsByClassName("canvas-container")[0].style.display = "none"
      75.     document.getElementById("exportBtn").style.display = "none"
      76.     document.getElementById("tip").innerHTML = "长按图片保存或分享"
      77.     document.getElementById("change").style.display = "none"
      78.     cvs.style.display = "none"
      79.     exportImage.style.display = "block"
      80.     exportImage.src = canvasFabric.toDataURL({ 
      81.         width: screenWidth, 
      82.         height: screenWidth 
      83.     }) 

      效果

      image-20190924171759373

      image-20190924171817825

      image-20190924171842699

      image-20190924171947774

      所有图片素材均来自腾讯官网

      【编辑推荐】

      1. Java语言为什么经久不衰?且总能霸占编程语言排行榜首?
      2. Go语言和Java、Python等其他语言的对比分析
      3. Java传统编程模型存在的问题
      4. 你对JavaScript掌握多少?项目大牛详细解读JavaScript框架结构
      5. 如何让你的Java代码性能"更高、更优雅、远离BUG"?
      【责任编辑:庞桂玉 TEL:(010)68476606】

      点赞 0
      分享:
      大家都在看
      猜你喜欢

      订阅专栏+更多

      中间件安全防护攻略

      中间件安全防护攻略

      4类安全防护
      共4章 | hack_man

      50人订阅学习

      CentOS 8 全新学习术

      CentOS 8 全新学习术

      CentOS 8 正式发布
      共16章 | UbuntuServer

      266人订阅学习

      用Python玩转excel

      用Python玩转excel

      让重复操作傻瓜化
      共3章 | DE8UG

      229人订阅学习

      视频课程+更多

      强哥带你精通OpenStack私有云

      强哥带你精通OpenStack私有云

      讲师:周玉强44590人学习过

      强哥带你精通zabbix监控

      强哥带你精通zabbix监控

      讲师:周玉强11497人学习过

      网络安全竞赛(CTF)之Web安全入门-CTF入门系列课程之一

      网络安全竞赛(CTF)之Web安全入门-CTF入门系列

      讲师:曲广平19435人学习过

      读 书 +更多

      精通正则表达式(第3版)

      随着互联网的迅速发展,几乎所有工具软件和程序语言都支持的正则表达式也变得越来越强大和易于使用。本书是讲解正则表达式的经典之作。本书...

      订阅51CTO邮刊

      点击这里查看样刊

      订阅51CTO邮刊

      51CTO服务号

      51CTO官微