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

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

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

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

  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.     }) 

效果

[[278273]]

image-20190924171817825

image-20190924171842699

image-20190924171947774

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

 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2020-09-15 13:56:08

公众号机器人图灵机器人

2023-09-29 11:32:07

2021-08-04 17:55:38

keysRedis数据库

2020-09-06 22:59:35

Linux文件命令

2023-01-30 16:21:24

Linux外观

2018-08-26 05:38:44

路由器调制解调器网络设备

2021-06-08 07:48:26

iOS 15 Linux 操作系统

2019-05-21 21:36:42

Python编程语言游戏

2018-08-29 14:50:15

文件加密

2018-10-11 21:00:18

2019-05-21 13:55:22

Python编程语言游戏

2015-11-05 15:54:03

马化腾项目合作

2018-07-03 15:20:36

Promise函数借钱

2012-03-05 19:43:00

lumia

2022-07-26 08:14:16

注册中心ProviderConsumer

2022-12-22 08:22:17

Python图像图像处理

2014-11-19 13:06:59

2022-02-28 08:07:17

Java开发

2021-11-10 11:40:42

数据加解密算法

2024-01-08 13:40:00

并发安全• 数量
点赞
收藏

51CTO技术栈公众号