大家好，我是 Java陈序员。

在快节奏的生活里，我们常常被焦虑、失眠、注意力不集中困扰。想睡个安稳觉，想安安静静专注一会儿，想给自己一段不被打扰的放松时光，却总被各种杂音打断。

今天，给大家介绍一款开源免费的安卓应用，专注于白噪音播放！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

XMSLEEP —— 一个专注于白噪音播放的 Android 应用，提供多种自然声音帮助您放松、专注和入眠。应用采用 Material Design 3 设计规范，界面简洁美观，操作流畅。

功能特色：

• 内置多种白噪音：提供雨声、篝火、雷声、森林鸟鸣、猫咪呼噜、键盘等多种自然/场景音效，分类清晰（自然/雨声/城市/河流等），无需联网直接播放
• 音频拓展无上限：音效库随心扩展，不仅支持从 GitHub 动态加载网络音频资源，也可播放手机本地音频文件
• 沉浸式无缝循环：音频支持无缝循环播放，提供沉浸式体验
• 实用功能：支持设置自动停止播放的时间，支持预设、收藏、最近播放等功能
• 精美界面：采用最新的 Material Design 3 设计规范，内置声音配有 webp 动画，支持多种颜色主题，支持浅色/深色模式切换

技术栈：Kotlin + Jetpack Compose + Material Design 3 + ExoPlayer/Media3

快速上手

项目已经提供构建好的安装包，只需下载安装即可使用。

1、打开下载地址，下载安装包

https://github.com/Tosencen/XMSLEEP/releases

2、在安卓手机中运行安装包进行安装

功能体验

• 内置白噪音

• 预设

• 设置倒计时

• 远程白噪音

• 设置

本地开发

1、环境要求：

• Android Studio
• JDK：17+
• Android SDK: API33+
• Gradle：8+

2、克隆或下载项目源码

git clone https://github.com/Tosencen/XMSLEEP.git
cd XMSLEEP

3、配置 Gradle：复制 gradle.properties.example 为 gradle.properties

4、使用 Android Studio 打开项目并同步 Gradle 依赖

5、连接设备或启动模拟器，运行项目

可以说，XMSLEEP 作为一款简单的白噪音播放工具，没有广告，不用联网，无需付费，能在你失眠、疲惫、需要专注的时候，提供最治愈的声音陪伴。快去下载安装体验吧~

项目地址：https://github.com/Tosencen/XMSLEEP

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。

但是任何人在群里打任何广告，都会被 T 掉。

如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：

关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

架构师的核心思维方式是其进行系统架构设计和决策的关键，除了上文提到的设计思维特点外，还包括以下几种核心思维方式。

问题定义思维

架构师设计系统时，应善于发现问题、定义问题。

• 精准识别问题：架构师要能够从复杂的业务场景和技术环境中，精准地识别出真正的问题所在。不能仅仅停留在问题的表面现象，而是要深入挖掘问题的本质。例如，当用户反馈系统响应速度慢时，不能简单地认为是服务器性能问题，而要通过深入分析，可能发现是数据库查询语句不合理、网络延迟、系统架构设计导致的资源竞争等深层次问题。
• 清晰界定问题边界：明确问题的范围和边界，确定哪些因素与问题相关，哪些是无关的干扰因素。这有助于将问题聚焦，避免在解决问题的过程中陷入无关的细节和复杂性中。比如，在设计一个物流配送系统时，需要明确问题是关于配送路线规划的优化，还是库存管理与配送的协同，抑或是配送人员的调度管理，不同的问题边界决定了不同的架构设计方向。

数据驱动思维

架构师设计系统时，应善于利用数据。

• 重视数据收集：意识到数据在架构设计中的重要性，主动收集与系统相关的各种数据，包括业务数据、用户行为数据、系统性能数据等。这些数据是架构师了解系统运行状况、用户需求和业务流程的重要依据。例如，在设计一个在线教育平台时，会收集学生的学习进度数据、课程播放时长数据、用户互动数据等，以便更好地了解用户行为和需求，为架构设计提供支持。
• 基于数据决策：在进行架构设计和优化时，依靠数据进行分析和判断，而不是仅凭经验或直觉。通过对数据的分析，评估不同架构方案的可行性和优缺点，选择最优的方案。比如，通过对系统性能数据的分析，确定是否需要增加缓存机制、调整数据库架构或优化网络拓扑结构等。

复用思维

架构师设计系统时，要有复用思维，减少“重复造轮子”。

• 识别可复用元素：在进行架构设计时，能够敏锐地识别出系统中具有复用潜力的功能、模块、组件或代码。这些可复用元素可以是已经存在的成熟技术框架、开源组件，也可以是企业内部以往项目中积累的经验和资产。例如，在多个不同的业务系统中，可能都需要用户认证和授权功能，架构师可以将这部分功能提取出来，设计成一个可复用的身份认证模块。
• 设计可复用架构：不仅仅是对现有元素的复用，还会在架构层面进行设计，使系统具有良好的可复用性和扩展性。通过采用模块化、分层架构、接口化等设计原则，将系统设计成由多个可独立复用的模块组成，每个模块具有明确的职责和功能，模块之间通过清晰的接口进行交互。这样，在未来的项目中，可以方便地复用这些模块，提高开发效率，降低成本。

创新思维

创新思维可以让架构始终保持生命力。

• 突破传统局限：不局限于传统的架构设计模式和方法，敢于尝试新的技术和理念，突破现有的思维定式和技术瓶颈。例如，在面对大规模数据处理问题时，不局限于传统的关系型数据库架构，而是尝试采用分布式数据库、大数据处理框架等新技术，以实现更高效的数据处理和分析。
• 创造独特价值：通过创新的架构设计，为系统带来独特的价值和竞争优势。可以是提高系统的性能、降低成本、提升用户体验，也可以是实现一些独特的功能，满足市场上尚未被满足的需求。比如，在设计一个社交媒体平台时，通过创新的架构设计，实现了更高效的内容推荐算法，为用户提供了更个性化的内容推荐，从而吸引了更多的用户，提升了平台的竞争力。

风险管理思维

风险管理可以让架构能够抵御不确定因素带来的影响，有时这些影响甚至是致命的。

• 风险识别：在架构设计的各个阶段，能够全面地识别出可能存在的风险，包括技术风险、业务风险、市场风险等。技术风险可能包括新技术的不成熟、技术选型的不匹配等；业务风险可能包括业务需求的频繁变更、业务流程的不合理等；市场风险可能包括竞争对手的压力、市场趋势的变化等。例如，在采用一种新的区块链技术进行金融系统架构设计时，要识别出该技术可能存在的性能瓶颈、安全漏洞以及监管政策的不确定性等风险。
• 风险应对：针对识别出的风险，制定相应的风险应对策略。对于可以接受的风险，制定监控和应急措施；对于可能对系统产生重大影响的风险，要采取措施进行规避或降低风险的发生概率和影响程度。比如，为了应对业务需求变更的风险，可以采用敏捷开发方法，在架构设计中增加灵活性和可扩展性，以便能够快速响应需求的变化；为了应对技术风险，可以进行技术预研和原型验证，选择更成熟、稳定的技术方案。

参考引用

加入鸿蒙生态，共建万物互联。以下是鸿蒙应用开发常用教程。

• 《跟老卫学HarmonyOS开发》开源免费教程， https://github.com/waylau/harmonyos-tutorial
• 《跟老卫学AI大模型开发》开源免费教程， https://github.com/waylau/ai-large-model-tutorial/
• 《跟老卫学仓颉编程语言开发》开源免费教程， https://github.com/waylau/cangjie-programming-language-tutorial
• 《鸿蒙HarmonyOS手机应用开发实战》（清华大学出版社）
• 《鸿蒙HarmonyOS应用开发入门》（清华大学出版社）
• “鸿蒙零基础快速实战-仿抖音App开发（ArkTS版）”（https://coding.imooc.com/class/843.html）
• 《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》（北京大学出版社)
• 《鸿蒙之光HarmonyOS NEXT原生应用开发入门》（清华大学出版社)
• “HarmonyOS NEXT+AI大模型打造智能助手APP(仓颉版)”（https://coding.imooc.com/class/927.html）
• “HarmonyOS 6 AI应用开发”(https://edu.51cto.com/course/39601.html)
• 《仓颉编程从入门到实践》（北京大学出版社）
• 《鸿蒙之光HarmonyOS 6应用开发入门》（清华大学出版社）
• 《鸿蒙架构师修炼之道》（北京大学出版社）

点赞 + 关注 + 收藏 = 学会了

html2canvas 简介

html2canvas 是一个纯前端的 JavaScript 库，能直接在浏览器里把 HTML 元素 “拍” 成 Canvas 图片。不用麻烦后端接口，就能实现网页截图、生成分享海报、保存页面快照等需求。

安装方法

html2canvas 支持两种常见的安装方式，根据你的项目环境选就行：

1. npm /yarn 安装（推荐）

如果你的项目用了 Webpack、Vite 等构建工具，直接用包管理器安装：

# npm 安装
npm install html2canvas

# yarn 安装
yarn add html2canvas

本文使用 Vite 创建 Vue3 项目，通过 Vue3 的语法来讲解。在其他框架使用 html2canvas 用法也是差不多的。

2. CDN 引入

如果是简单的 HTML 项目，直接在页面里引入 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

基础用法

先看一个最简单的例子：点击按钮，把指定的 div 转成 Canvas 并显示在页面上。

<template>
  <div>
    <!-- 要截图的区域 -->
    <div ref="captureRef" style="padding: 20px; background: #f0f0f0;">
      <p style="font-size: 16px; margin: 0;">随便写点什么，html2canvas 会把它变成图片~</p>
    </div>

    <!-- 截图按钮 -->
    <button @click="handleCapture">点击截图</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'

// 获取要截图的 DOM 元素
const captureRef = ref(null)

// 截图函数
const handleCapture = async () => {
  // 调用 html2canvas，等待生成 Canvas
  const canvas = await html2canvas(captureRef.value)
  // 把 Canvas 加到页面上看看效果
  document.body.appendChild(canvas)
}
</script>

这段代码看似简单，但第一个坑也出现了。

此时如果在“截图区”加多一个 h2，结果可能会出乎你所料。

<!-- 要截图的区域 -->
<div ref="captureRef" style="padding: 20px; background: #f0f0f0;">
    <h2>雷猴</h2>
    <p style="font-size: 16px; margin: 0;">随便写点什么，html2canvas 会把它变成图片~</p>
</div>

<h2> 标题的样式没跟着生成出来啊。。。

解决方法很简单，不使用浏览器默认样式，给所有标签都加上指定样式。

<template>
  <div>
    <!-- 要截图的区域 -->
    <div 
      ref="captureRef" 
      class="capture-area" 
      style="padding: 20px; background: #f0f0f0;"
    >
      <!-- 关键样式建议写在行内，或者确保非 scoped -->
      <h2 class="title">这是要截图的内容</h2>
      <p style="font-size: 16px; margin: 0;">随便写点什么，html2canvas 会把它变成图片~</p>
    </div>

    <!-- 截图按钮 -->
    <button @click="handleCapture">点击截图</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'

// 获取要截图的 DOM 元素
const captureRef = ref(null)

// 截图函数
const handleCapture = async () => {
  // 调用 html2canvas，等待生成 Canvas
  const canvas = await html2canvas(captureRef.value)
  // 把 Canvas 加到页面上看看效果
  document.body.appendChild(canvas)
}
</script>

<style scoped>
.capture-area {
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
}
</style>

常用配置选项

html2canvas 提供了很多配置项，能帮你解决各种场景问题，这里列几个最常用的：

如果你要截的元素包含图片，而且这张图片和你的网站存在跨域情况，大概率会出现图片出空白的情况。

<template>
  <div>
    <!-- 要截图的区域 -->
    <div 
      ref="captureRef" 
      class="capture-area" 
      style="padding: 20px; background: #f0f0f0;"
    >
      <!-- 关键样式建议写在行内，或者确保非 scoped -->
      <h2 class="title">这是要截图的内容</h2>
      <img src="https://iili.io/fcR7gSe.md.png" alt="" style="width: 140px;">
      <p style="font-size: 16px; margin: 0;">随便写点什么，html2canvas 会把它变成图片~</p>
    </div>

    <!-- 截图按钮 -->
    <button @click="handleCapture">点击截图</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'

// 获取要截图的 DOM 元素
const captureRef = ref(null)

// 截图函数
const handleCapture = async () => {
  // 调用 html2canvas，等待生成 Canvas
  const canvas = await html2canvas(captureRef.value)
  // 把 Canvas 加到页面上看看效果
  document.body.appendChild(canvas)
}
</script>

<style scoped>
.capture-area {
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
}
</style>

要解决这个问题需要2步操作。

1. 图片服务器配置 Access-Control-Allow-Origin: *（允许跨域）
2. html2canvas 配置 useCORS: true

如果想更稳妥一点，还可以给图片标签加 crossorigin="anonymous" 属性。

https://iili.io 这个图床是允许跨域的，所以我们直接在 html2canvas 里配置 useCORS: true 即可。

// 省略部分代码

const canvas = await html2canvas(captureRef.value, {
  useCORS: true
})

高级用法：导出并下载图片

生成 Canvas 后，通常需要把它转成图片文件让用户下载，这里用 toDataURL 实现

<template>
  <div>
    <!-- 要截图的区域 -->
    <div 
      ref="captureRef" 
      class="capture-area" 
      style="padding: 20px; background: #f0f0f0;"
    >
      <!-- 关键样式建议写在行内，或者确保非 scoped -->
      <h2 class="title">这是要截图的内容</h2>
      <img src="https://iili.io/fcR7gSe.md.png" alt="" style="width: 140px;">
      <p style="font-size: 16px; margin: 0;">随便写点什么，html2canvas 会把它变成图片~</p>
    </div>

    <!-- 截图按钮 -->
    <button @click="handleCapture">点击截图</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'

// 获取要截图的 DOM 元素
const captureRef = ref(null)

// 截图函数
const handleCapture = async () => {
  // 调用 html2canvas，等待生成 Canvas
  const canvas = await html2canvas(captureRef.value, { useCORS: true });
  
  // 1. 把 Canvas 转成 PNG 格式的 base64 数据
  const imgData = canvas.toDataURL('image/png');
  
  // 2. 创建下载链接
  const link = document.createElement('a');
  link.download = '我的截图.png'; // 下载的文件名
  link.href = imgData;
  
  // 3. 触发点击下载
  link.click();
}
</script>

<style scoped>
.capture-area {
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
}
</style>

常见坑点及避坑指南

html2canvas 虽然好用，但坑也不少。

跨域图片不显示或报错

前面已经提到了，如果截图里有跨域图片（比如图床的图），默认会显示空白。原因是浏览器的同源策略限制，html2canvas 无法直接读取跨域图片的像素。

解决方法：

• 图片服务器配置 Access-Control-Allow-Origin: *（允许跨域）
• 给图片标签加 crossorigin="anonymous" 属性
• html2canvas 配置 useCORS: true

<!-- 图片标签加 crossorigin -->
<img src="https://example.com/image.jpg" crossorigin="anonymous">

CSS 样式显示异常

部分 CSS 属性（如 transform、box-shadow、复杂渐变、伪元素 ::before/::after）可能渲染不对，甚至完全不显示。

html2canvas 是通过解析 DOM 和 CSS 手动绘制 Canvas 的，不是所有 CSS 都支持。

解决方法：

• 尽量用简单的 CSS 布局，避免太复杂的特效
• 把复杂样式（如渐变、阴影）转成图片代替
• 查看官方文档的 CSS 支持列表，避开不支持的属性

自定义字体渲染失败

用了自定义字体（如 @font-face），截图里却变成了默认字体。

html2canvas 截图时，字体可能还没加载完，就用了默认字体渲染。

解决方法：

• 等待字体加载完成后再截图，用 document.fonts.ready 即可

document.getElementById('btn').addEventListener('click', async () => {
  // 等待所有字体加载完成
  await document.fonts.ready;
  
  const element = document.getElementById('capture');
  const canvas = await html2canvas(element);
  document.body.appendChild(canvas);
});

滚动条导致截图不全或有滚动条

如果要截图的元素有滚动条，截图会包含滚动条，或者内容被截断。

解决方法：

• 截图前先隐藏滚动条，截图后恢复

const element = document.getElementById('capture');
// 保存原来的 overflow 样式
const originalOverflow = element.style.overflow;
// 隐藏滚动条
element.style.overflow = 'hidden';

const canvas = await html2canvas(element, {
  scrollX: 0,
  scrollY: 0 // 重置滚动偏移
});

// 恢复原来的样式
element.style.overflow = originalOverflow;

iframe 内容无法捕获

如果页面里有 iframe，html2canvas 无法截图 iframe 里的内容。

同源策略限制，无法直接访问 iframe 内部的 DOM。

解决方法：

• 如果 iframe 和主页面同域，可以手动获取 iframe 里的元素再截图
• 如果跨域，基本无解，建议换其他方案（比如后端截图）

页面元素太多导致性能差

截图区域元素多、图片大时，生成 Canvas 会很慢，甚至浏览器卡顿。

解决方法：

• 适当降低 scale（比如设为 1.5 而不是 2）
• 截图前隐藏不必要的元素（比如 display: none）
• 只截图需要的部分，不要截整个页面

SVG 元素显示异常

直接截图 SVG 可能会变形、错位，甚至不显示。

解决方法：

• 先把 SVG 转成图片，再插入 DOM 截图。可以用 canvg 库辅助转换，或者手动把 SVG 转成 base64 图片

// 简单的 SVG 转图片示例
const svgElement = document.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svgElement);
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));

// 等图片加载完后，替换原来的 SVG，再截图
img.onload = async () => {
  svgElement.parentNode.replaceChild(img, svgElement);
  const canvas = await html2canvas(element);
  document.body.appendChild(canvas);
};

z-index 层级错乱

截图里的元素层级和实际页面不一样，该在上面的元素跑到下面了。

html2canvas 对 z-index 的解析有时会出问题，尤其是元素没有显式设置 position 时。

解决方法：

• 给需要层级的元素显式设置 position（如 relative、absolute）
• 调整 DOM 顺序（后面的元素会覆盖前面的），代替 z-index

点赞 + 关注 + 收藏 = 学会了