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

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

创新互联长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为庐江企业提供专业的成都网站建设、成都网站设计，庐江网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

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

 
 
 

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

效果

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

标题名称：教你如何给你的头像添加一个好看的国旗
网站URL：http://www.mswzjz.com/qtweb/news14/185764.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联