超火的渐变头像源码，直呼 “搜1Z？”

大家好，我是石头哥。


国庆节期间，你也一定看到了超火的“渐变国旗头像”吧？


今天，就给大家分享自己 DIY 的工具以及源码。


朋友圈里下图这样的头像，你数数你朋友圈里有多少个？

制作方法很简单（点击文末阅读原文即可），上传图片，选择样式，保存图片即可。

<<< 左右滑动见更多 >>> 我稍微看了下，这其实背后的代码非常简单，直接纯前端即可完成。 前面还发现朋友圈有大佬制作了微信小程序可以一键获取微信头像，一键设置等很方便。（哈哈，本来开始石头哥也准备做一个，发现大佬已经做出来了，就懒得去折腾了） 比如这是我看到的一款网络普遍流传的在线工具的源码。 主要是用了 fabric.js 这个前端的库（官网：http://fabricjs.com/），将小挂件的图片和你的头像图片，直接用Canvas绘制即可。 Fabric.js is a powerful and simple Javascript HTML5 canvas library Fabric provides interactive object model on top of canvas element Fabric also has SVG-to-canvas (and canvas-to-SVG) parser 比如，我也依葫芦画瓢（其实就是复制粘贴）直接 DIY 了一款，收集了24个小挂件如下图所示：

核心代码其实就那么几行，页面定义 cavas 以及相关交互的按钮等：

然后就是用户交互后，改变 cavas 中的内容： function viewer() { var file = document.getElementById("upload").files[0]; 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) { ... canvasFabric = new fabric.Canvas("cvs", { width: screenWidth, height: screenWidth, backgroundImage: new fabric.Image(img, { scaleX: screenWidth / img.width, scaleY: screenWidth / img.height }) }); changeHat(); } function changeHat() { ... if (hatInstance) { canvasFabric.remove(hatInstance) } hatInstance = new fabric.Image(hatImage, { top: 0, left: 0, scaleX: screenWidth / hatImage.width, scaleY: screenWidth / hatImage.height, cornerColor: "#0b3a42", cornerStrokeColor: "#fff", cornerStyle: "circle", transparentCorners: false, rotatingPointOffset: 30 }); canvasFabric.add(hatInstance) } 其实到这里也就结束了。你甚至还可以加点其他的页面元素进去。 这里再教大家一个方法能够快速复制并且 DIY 自己的页面，然后绑定自己的域名。 你只需要 fork 这个仓库：http://github.com/tl3shi/guoqing.coderstone.cn

DIY 上面的 index.html 换成自己的样式。可直接用 github 的 pages 服务绑定自己的域名。 项目根目录下新增一个文件名 CNAME，例如我的域名 guoqing.coderstone.cn 然后域名解析，新增一个 CNAME 指向 $id.github.io. 即可，例如我其中一个 github 账号 id 是tl3shi，这个时候记录值为 tl3shi.github.io.）

然后等生效就可以通过自己 DIY 的网址访问(阅读原文访问)啦：guoqing.coderstone.cn