最近朋友圈又火了。听说是因为@腾讯官方网站可以得到一张漂亮的国庆头像，所以我们自己做一个，教你如何给你的头像加一面漂亮的旗帜。由于代码比较简单，就不一一介绍了。varcvs=document.getElementById("cvs");varctx=cvs.getContext("2d");varexportImage=document.getElementById("export");varimg=document.getElementById("img");varhat="hat6";varcanvasFabric;varhatInstance;varscreenWidth=window.screen.width<500?window.screen.width:300;functionviewer(){varfile=document.getElementById("上传").files[0];console.log(文件);varreader=newFileReader;if(file){reader.readAsDataURL(file);reader.onload=function(e){img.src=reader.result;img.onload=function(){img2Cvs(img)}}}else{img.src=""}}functionimg2Cvs(img){cvs.width=img.width;cvs.height=img.height;cvs.style.display="block";canvasFabric=newfabric.Canvas("cvs",{width:screenWidth,height:screenWidth,backgroundImage:newfabric.Image(img,{scaleX:screenWidth/img.width,scaleY:screenWidth/img.height})});changeHat();document.getElementById("uploadContainer").style.display="无";document.getElementById("uploadText").style.display="none";document.getElementById("upload").style.display="none";document.getElementById("change").style.display="块";document.getElementById("exportBtn").style.display="block";document.getElementById("tip").style.opacity=1}functionchangeHat(){document.getElementById(hat).style.display="无";varhats=document.getElementsByClassName("hide");hat="hat"+(+hat.replace("hat","")+1)%hats.length;varhatImage=document.getElementById(hat);hatImage.style.display="block";if(hatInstance){canvasFabric.remove(hatInstance)}hatInstance=newfabric.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)}functionexportFunc(){document.getElementsByClassName("canvas-container")[0].style.display="none";document.getElementById("exportBtn").style.display="none";document.getElementById("tip").innerHTML="长按图片保存或分享";document.getElementById("change").style.display="none";简历。style.display="none";exportImage.style.display="block";exportImage.src=canvasFabric.toDataURL({width:screenWidth,height:screenWidth})}效果所有图片素材均来自腾讯官网
