# users

username: admin
nickname: 谢亚昕
password: $2b$10$myM4RbkRi0aJTDtnWe5tkOMlAxgikUiKyGKSDWnQCrJdyW4xEcAbS
avatar: /public/assets/1776525370653-225518498-20220227202437-10bcc.webp
role: admin
status: active
public_slug: admin
bio_markdown:
  ---
  desc: 这是一段只在列表里展示的短说明
  ---

  ## aas
  fsa
  f
  f
  dsf
  dssdfs

bio_visibility: public
avatar_visibility: public
social_links_json:
  [{"label":"GitHub","url":"https://github.com/yourname","visibility":"public","icon":"i-simple-icons-github"},{"label":"个人站","url":"https://example.com","visibility":"public","icon":"i-lucide-globe"}]


# rss_items

guid: https://www.zhangxinxu.com/wordpress/?p=12166
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/mediabunny-video-water-clip-merge/
title: 借助mediabunny纯JS实现视频水印、剪裁、合成等功能
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-17_152137.webp" width="160" height="103" alt="视频合成封面图" class="alignright size-medium" loading="lazy" />

  mediabunny是一个非常成熟的音视频处理工具库，目前是众多基于WebCodecs API的项目中出类拔萃的那一个，本文就将通过多个案例，展示如何使用mediabunny实现视频的水印、剪裁以及合成等。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-17_152137.webp" width="160" height="103" alt="视频合成封面图" class="alignright size-medium" loading="lazy" />

  mediabunny是一个非常成熟的音视频处理工具库，目前是众多基于WebCodecs API的项目中出类拔萃的那一个，本文就将通过多个案例，展示如何使用mediabunny实现视频的水印、剪裁以及合成等。


guid: https://www.zhangxinxu.com/wordpress/?p=12155
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/js-weakref/
title: 务必谨慎使用JS WeakRef弱引用
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-13_155748.webp" width="160" height="102" alt="WeakRef封面图" class="alignright size-medium" loading="lazy" />

  先前有WeakMap和WeakSet，现在又出了JS WeakRef弱引用，可以优化内存开销，看案例很有价值，不过无论是官方还是我个人都建议大家谨慎使用，这又是为何呢？

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-13_155748.webp" width="160" height="102" alt="WeakRef封面图" class="alignright size-medium" loading="lazy" />

  先前有WeakMap和WeakSet，现在又出了JS WeakRef弱引用，可以优化内存开销，看案例很有价值，不过无论是官方还是我个人都建议大家谨慎使用，这又是为何呢？


guid: https://www.zhangxinxu.com/wordpress/?p=12118
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/css-pyramidal-grid/
title: CSS六边形头像的实现与蜂巢布局
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-7_162049.jpeg" width="160" height="100" alt="蜂巢布局头像" class="alignright size-medium" loading="lazy" />

  如题，介绍六边形头像的CSS实现技巧，以及如何基于这个六边形实现高大上的蜂巢布局效果，又是展现CSS潜力的一天。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-7_162049.jpeg" width="160" height="100" alt="蜂巢布局头像" class="alignright size-medium" loading="lazy" />

  如题，介绍六边形头像的CSS实现技巧，以及如何基于这个六边形实现高大上的蜂巢布局效果，又是展现CSS潜力的一天。


guid: https://www.zhangxinxu.com/wordpress/?p=12115
canonical_url: https://www.zhangxinxu.com/wordpress/2026/03/css-corner-shape-background-pattern/
title: CSS corner-shape与背景底纹技术
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-30_140506.jpeg" width="160" height="96" alt="背景底纹技术" class="alignright size-medium" loading="lazy" />

  corner-shape可以生成多种复杂的图形，那么，有没有什么办法把这些图形变成底纹背景呢？

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-30_140506.jpeg" width="160" height="96" alt="背景底纹技术" class="alignright size-medium" loading="lazy" />

  corner-shape可以生成多种复杂的图形，那么，有没有什么办法把这些图形变成底纹背景呢？


guid: https://www.zhangxinxu.com/wordpress/?p=12112
canonical_url: https://www.zhangxinxu.com/wordpress/2026/03/webtransport-api/
title: 浅学WebTransport API：下一代Web双向通信技术
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-17_161657.png" width="160" height="97" alt="WebTransport封面图" class="alignright size-medium" loading="lazy" />

  WebSocket还没用明白，现在又出了个WebTransport API，也是用来实现实时通信的，更强大，更完美，所有现代浏览器都已支持，无论是高并发、低延时还是可以丢数据的场景都支持。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-17_161657.png" width="160" height="97" alt="WebTransport封面图" class="alignright size-medium" loading="lazy" />

  WebSocket还没用明白，现在又出了个WebTransport API，也是用来实现实时通信的，更强大，更完美，所有现代浏览器都已支持，无论是高并发、低延时还是可以丢数据的场景都支持。


