日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
教你如何給你的頭像添加一個好看的國旗

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

創(chuàng)新互聯(lián)長期為數千家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為廬江企業(yè)提供專業(yè)的成都網站建設、成都網站設計，廬江網站改版等技術服務。擁有10年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

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

 
 
 
    
  
  
  
  1. var cvs = document.getElementById("cvs"); 
    2. 
  
  
  
  2. var ctx = cvs.getContext("2d"); 
    3. 
  
  
  
  3. var exportImage = document.getElementById("export"); 
    4. 
  
  
  
  4. var img = document.getElementById("img"); 
    5. 
  
  
  
  5. var hat = "hat6"; 
    6. 
  
  
  
  6. var canvasFabric; 
    7. 
  
  
  
  7. var hatInstance; 
    8. 
  
  
  
  8. var screenWidth = window.screen.width < 500 ? window.screen.width : 300; 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. function viewer() { 
    11. 
  
  
  
  11.     var file = document.getElementById("upload").files[0]; 
    12. 
  
  
  
  12.     console.log(file); 
    13. 
  
  
  
  13.     var reader = new FileReader; 
    14. 
  
  
  
  14.     if (file) { 
    15. 
  
  
  
  15.         reader.readAsDataURL(file); 
    16. 
  
  
  
  16.         reader.onload = function(e) { 
    17. 
  
  
  
  17.             img.src = reader.result; 
    18. 
  
  
  
  18.             img.onload = function() { 
    19. 
  
  
  
  19.                 img2Cvs(img) 
    20. 
  
  
  
  20.             } 
    21. 
  
  
  
  21.         } 
    22. 
  
  
  
  22.     } else { 
    23. 
  
  
  
  23.         img.src = "" 
    24. 
  
  
  
  24.     } 
    25. 
  
  
  
  25. } 
    26. 
  
  
  
  26.  
    27. 
  
  
  
  27. function img2Cvs(img) { 
    28. 
  
  
  
  28.     cvs.width = img.width; 
    29. 
  
  
  
  29.     cvs.height = img.height; 
    30. 
  
  
  
  30.     cvs.style.display = "block"; 
    31. 
  
  
  
  31.     canvasFabric = new fabric.Canvas("cvs", { 
    32. 
  
  
  
  32.         width: screenWidth, 
    33. 
  
  
  
  33.         height: screenWidth, 
    34. 
  
  
  
  34.         backgroundImage: new fabric.Image(img, { 
    35. 
  
  
  
  35.             scaleX: screenWidth / img.width, 
    36. 
  
  
  
  36.             scaleY: screenWidth / img.height 
    37. 
  
  
  
  37.         }) 
    38. 
  
  
  
  38.     }); 
    39. 
  
  
  
  39.     changeHat(); 
    40. 
  
  
  
  40.     document.getElementById("uploadContainer").style.display = "none"; 
    41. 
  
  
  
  41.     document.getElementById("uploadText").style.display = "none"; 
    42. 
  
  
  
  42.     document.getElementById("upload").style.display = "none"; 
    43. 
  
  
  
  43.     document.getElementById("change").style.display = "block"; 
    44. 
  
  
  
  44.     document.getElementById("exportBtn").style.display = "block"; 
    45. 
  
  
  
  45.     document.getElementById("tip").style.opacity = 1 
    46. 
  
  
  
  46. } 
    47. 
  
  
  
  47.  
    48. 
  
  
  
  48. function changeHat() { 
    49. 
  
  
  
  49.     document.getElementById(hat).style.display = "none"; 
    50. 
  
  
  
  50.     var hats = document.getElementsByClassName("hide"); 
    51. 
  
  
  
  51.     hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length; 
    52. 
  
  
  
  52.     var hatImage = document.getElementById(hat); 
    53. 
  
  
  
  53.     hatImage.style.display = "block"; 
    54. 
  
  
  
  54.     if (hatInstance) { 
    55. 
  
  
  
  55.         canvasFabric.remove(hatInstance) 
    56. 
  
  
  
  56.     } 
    57. 
  
  
  
  57.     hatInstance = new fabric.Image(hatImage, { 
    58. 
  
  
  
  58.         top: 40, 
    59. 
  
  
  
  59.         left: screenWidth / 3, 
    60. 
  
  
  
  60.         scaleX: 100 / hatImage.width, 
    61. 
  
  
  
  61.         scaleY: 100 / hatImage.height, 
    62. 
  
  
  
  62.         cornerColor: "#0b3a42", 
    63. 
  
  
  
  63.         cornerStrokeColor: "#fff", 
    64. 
  
  
  
  64.         cornerStyle: "circle", 
    65. 
  
  
  
  65.         transparentCorners: false, 
    66. 
  
  
  
  66.         rotatingPointOffset: 30 
    67. 
  
  
  
  67.     }); 
    68. 
  
  
  
  68.     hatInstance.setControlVisible("bl", false); 
    69. 
  
  
  
  69.     hatInstance.setControlVisible("tr", false); 
    70. 
  
  
  
  70.     hatInstance.setControlVisible("tl", false); 
    71. 
  
  
  
  71.     hatInstance.setControlVisible("mr", false); 
    72. 
  
  
  
  72.     hatInstance.setControlVisible("mt", false); 
    73. 
  
  
  
  73.     canvasFabric.add(hatInstance) 
    74. 
  
  
  
  74. } 
    75. 
  
  
  
  75.  
    76. 
  
  
  
  76. function exportFunc() { 
    77. 
  
  
  
  77.     document.getElementsByClassName("canvas-container")[0].style.display = "none"; 
    78. 
  
  
  
  78.     document.getElementById("exportBtn").style.display = "none"; 
    79. 
  
  
  
  79.     document.getElementById("tip").innerHTML = "長按圖片保存或分享"; 
    80. 
  
  
  
  80.     document.getElementById("change").style.display = "none"; 
    81. 
  
  
  
  81.     cvs.style.display = "none"; 
    82. 
  
  
  
  82.     exportImage.style.display = "block"; 
    83. 
  
  
  
  83.     exportImage.src = canvasFabric.toDataURL({ 
    84. 
  
  
  
  84.         width: screenWidth, 
    85. 
  
  
  
  85.         height: screenWidth 
    86. 
  
  
  
  86.     }) 
    87. 
  
  
  
  87. } 
    88.

效果

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


分享題目：教你如何給你的頭像添加一個好看的國旗
文章起源：http://www.5511xx.com/article/cohcdjh.html