有红又专的国庆节头像如何制作?

马上又要到中国人民的喜庆日子了,朋友圈估计又要开始泛滥国旗头像了。

我的已经准备好了,你们的准备好了吗?让我来教你怎么制作,只面向前端开发者哦!

实现原理

本质是两张图片,怎么合并到一起,作为前端开发者,可能会想到几种做法:

  • 使用两个 Image dom 堆叠到一起,形成合并的效果,然后使用 dom-to-canvas 生成图片
  • 使用 Canvas 读取两个图片,然后 writeImage 到一个 Canvas 中,在截图

这两种办法都可以,但是因为我们 AntV 具备有可视化的强大能力,和基础工具,所以从可视化角度来看,可以讲这两个图片都作为可视化画布的两个图片标注,然后通过调用 API 顺序,就可以迭代层级关系。

具体就是使用 AntV G2 的 Image mark。Image 标记和 Point 标记很类似,都是以 xy 数据通道作为位置居中定位,区别在于 Image 提供一个特殊的 src 数据通道,来指定图片的远程地址或者 base64。

这里有一个简单的浏览器占比数据,我们对它进行可视化,便于看到不同浏览器的占比对比。

具体代码

全量代码如下,Copy 到 G2 的 DEMO 中就可以运行出来效果了。代码非常简单,不过多介绍了。

ts 复制代码
import { Chart } from '@antv/g2';

const SIZE = 256;

const chart = new Chart({
  container: 'container',
  width: SIZE,
  height: SIZE,
});

// 五个模板
const FLAG_TEMPLATE = [
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*FpxcQI7WEusAAAAAAAAAAAAADmJ7AQ/original',
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rx6ST7V6cA0AAAAAAAAAAAAADmJ7AQ/original',
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7rKcTJiP1rMAAAAAAAAAAAAADmJ7AQ/original',
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_GUISa64kgYAAAAAAAAAAAAADmJ7AQ/original',
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Wwy8TJAoCeUAAAAAAAAAAAAADmJ7AQ/original',
  'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DphFRIpOYWQAAAAAAAAAAAAADmJ7AQ/original'
];

// 换成你自己的,可以使用远程 CDN 地址,也可以使用 Base64 编码
const MY_PHOTO = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*vYY6RrxEWKwAAAAAAAAAAAAADmJ7AQ/original'

chart
  .image()
  .data([{ x: 0.5, y: 0.5 }])
  .encode('x', 'x')
  .encode('y', 'y')
  .encode('src', MY_PHOTO)
  .encode('size', SIZE)
  .axis(false)
  .tooltip(false);

  chart
  .image()
  .data([{ x: 0.5, y: 0.5 }])
  .encode('x', 'x')
  .encode('y', 'y')
  .encode('src', FLAG_TEMPLATE[2]) // 换成你自己想要的模板,都试试吧
  .encode('size', SIZE)
  .axis(false)
  .tooltip(false);

chart.render();

最后

其实社区上很多了,但是开放代码的并不多,这里代码开发出来,快点基于这个去封装成小工具,蹭节日流量吧。

相关推荐
Mintopia几秒前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
Qiuner12 分钟前
【源力觉醒 创作者计划】开源、易用、强中文:文心一言4.5或是 普通人/非AI程序员 的第一款中文AI?
人工智能·百度·开源·文心一言·gitcode
掘金安东尼19 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~21 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务24 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛24 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑27 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭33 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿38 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端