超火的微信漸變國旗頭像，竟然可以用 JavaScript 一鍵生成。。
點擊關注公眾號，Java干貨及時送達
是不是非常簡單呢？大家也趕緊試試吧！
棧長稍微花了點時間，搞了一個在線生成網(wǎng)站，這個網(wǎng)站原理也簡單，其實就是一個靜態(tài)網(wǎng)站，根據(jù)上傳的圖片和頭像模板利用 H5 中的 Canvas + JavaScript 畫制圖片，H5 在這里就發(fā)揮重要作用了！
核心代碼如下：
H5：
<canvas id="canvas" width="800" height="800"></canvas>
<img src="" class="generateImg">
JavaScript：
// 創(chuàng)建 canvas
const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')
// 畫圖
ctx.drawImage(yourImg, 0, 0, 800, 800)
ctx.drawImage(flagImg, 0, 0, 800, 800)
// 顯示
document.querySelector('.generateImg').src = canvas.toDataURL("image/png")
其實還可以做成小程序版，通過小程序自動獲取頭像，那就不需要手動上傳了。
為什么要自己開發(fā)？
說實話，網(wǎng)上都有許多現(xiàn)成的，本沒想著自己開發(fā)，可棧長體驗了一翻，各種彈窗、廣告，實在受不了，而且那種不明鏈接安全性也不敢保障，所以自己搞了一個，保證無任何廣告，HTTPS + 純前端操作，不收集任何個人信息，大家放心使用。
點亮“在看”，在下面公眾號回復“國慶”
??別搞錯了！是關注這個公眾號回復??
評論
圖片
表情