近日朋友圈又火了，聽說原因是 @騰訊官網 就能得到一個好看的國慶節頭像，那么我們自己動手實現一個吧，教你如何給你的頭像添加一個好看的國旗。

由于代碼比較簡單就不一一介紹了。

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

效果

[[278273]]

所有圖片素材均來自騰訊官網