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

由于代码比较简单就不一一介绍了。个好国旗

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

效果

所有图片素材均来自腾讯官网亿华云计算