如何将HTML/CSS页面内容保存为PNG/JPEG格式用作电脑壁纸？

针对你的需求，这里有几个简单靠谱的方法，不用复杂工具就能搞定：

方法一：浏览器自带截图功能（最省心） #

• 先调整页面到目标壁纸分辨率：
  1. 按F12打开开发者工具，点击左上角的设备模拟器图标（手机平板样式）
  2. 在顶部输入框填入你需要的分辨率（比如1920x1080），页面会自动适配尺寸
• 右键页面空白处，选择「另存为图片」（Chrome/Firefox均支持），或用快捷键Ctrl+Shift+S（Chrome），选择「完整页面」或「选定区域」保存为PNG/JPEG格式

方法二：精确截取指定元素 #

如果你只想保存页面内的某个设计元素（比如你做的带边框盒子），可以用开发者工具的节点截图：

1. 按F12打开开发者工具，点击左上角的选择元素图标，选中目标div或元素
2. 在元素面板里右键选中的元素，选择「Capture node screenshot」，浏览器会自动将该元素导出为PNG图片

方法三：用代码一键导出（适合重复导出场景） #

如果想在页面里添加导出按钮，点击即可生成图片，可以用html2canvas工具（需先将脚本下载到本地）：

1. 下载html2canvas的脚本文件到你的项目文件夹
2. 在HTML中添加以下代码：

<!-- 引入本地的html2canvas脚本 -->
<script src="./html2canvas.min.js"></script>
<!-- 导出按钮 -->
<button onclick="saveWallpaper()">保存为壁纸</button>

<script>
function saveWallpaper() {
  // 可替换为特定元素的ID，比如document.getElementById('your-box')
  html2canvas(document.body).then(canvas => {
    const downloadLink = document.createElement('a');
    downloadLink.download = 'my-wallpaper.png';
    downloadLink.href = canvas.toDataURL('image/png');
    downloadLink.click();
  });
}
</script>

3. 打开HTML页面，点击按钮即可自动下载图片

注意：不要直接修改HTML文件的扩展名（比如把.html改成.png），这种方法无效，文件本质仍是HTML代码而非图片格式。

内容的提问来源于stack exchange，提问作者DONO'KODING