• 超火的微信渐变国旗头像,竟然可以用 JavaScript 一键生成。。


    2021 年国庆又来了,大家都在玩国庆头像:

    朋友圈都已经玩疯了,栈长朋友圈好多粉丝都已经换上了,国庆,伟大祖国母亲的生日,就得有点仪式感。。

    好家伙,这次也不用 @官方了,为了满足大家的需求,栈长也做了一个小网站,助你快速生成国旗头像,制作方法都非常简单,只需 3 步,一键生成,整个过程只要几秒钟。。

    生成过程:

    1、选择你想要的的模板;

    2、上传你要生成的的图片;

    3、长按生成图片保存到相册;

    在线生成工具见文末!

    栈长目前搜集了 8 个头像模板:

    大家如果有更好的头像模板,也可以发到Java技术栈公众号后台,分享给大家,栈长有时间会更新上去哦!

    下面随便来看看几个模板的效果!

    模板 1:最火的国旗渐变头像

    模板 2

    模板 3

    模板 4

    一键保存图片到手机相册:

    保存之后是下面这样的效果,然后就可以用作微信头像了!

    是不是非常简单呢?大家也赶紧试试吧!

    作为一名程序猿,怎么能不来一张代码版?

    哈哈,太秀了~

    什么原理?

    栈长稍微花了点时间,搞了一个在线生成网站,这个网站原理也简单,其实就是一个静态网站,根据上传的图片和头像模板利用 H5 中的 Canvas + JavaScript 画制图片,H5 在这里就发挥重要作用了!

    核心代码如下:

    H5:

    <canvas id="canvas" width="800" height="800"></canvas>
    
    <img src="" class="generateImg">
    

    JavaScript:

    // 创建 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")
    

    其实还可以做成小程序版,通过小程序自动获取头像,那就不需要手动上传了。

    为什么要自己开发?

    说实话,网上都有许多现成的,本没想着自己开发,可栈长体验了一翻,各种弹窗、广告,实在受不了,而且那种不明链接安全性也不敢保障,所以自己搞了一个,保证无任何广告,HTTPS + 纯前端操作,不收集任何个人信息,大家放心使用。

    最后,如果生活需要点缀,信念需要颜色,那一定也是中国红,大家赶紧设置自己的渐变国旗头像吧,最后祝我们伟大的祖国生日快乐,繁荣昌盛!

    获取生成工具链接方法如下:

    关注Java核心技术公众号,在公众号后台回复“国庆

    近期热文推荐:

    1.1,000+ 道 Java面试题及答案整理(2021最新版)

    2.别在再满屏的 if/ else 了,试试策略模式,真香!!

    3.卧槽!Java 中的 xx ≠ null 是什么新语法?

    4.Spring Boot 2.5 重磅发布,黑暗模式太炸了!

    5.《Java开发手册(嵩山版)》最新发布,速速下载!

    觉得不错,别忘了随手点赞+转发哦!

  • 相关阅读:
    Vue 02
    Vue 初识
    复杂数据类型之函数 对象
    Collections工具类
    遍历集合的方法总结
    使用Iterator迭代器遍历容器元素(List/Set/Map)
    TreeSet的使用和底层实现
    HashSet基本使用
    HashSet底层实现
    TreeMap的使用和底层实现
  • 原文地址:https://www.cnblogs.com/javastack/p/15358946.html
Copyright © 2020-2023  润新知