1. 使用 JavaScript 库 html2canvas，将 HTML 元素截图成图片。这个库支持将浏览器上的页面截图，并可选择将生成的图片下载到本地设备。

示例代码如下：

// 引入 html2canvas 库 import html2canvas from "html2canvas";

// 获取带有文本的 HTML 元素 const element = document.getElementById("myElement");

// 将 HTML 元素转变成图片 html2canvas(element).then(function(canvas) { // 将图片转成 PNG 格式，并下载到本地设备 let link = document.createElement("a"); link.download = "myImage.png"; link.href = canvas.toDataURL("image/png"); link.click(); });

2. 使用 CSS 实现带有文字的图片，然后将其保存到本地设备。可以使用 data URI 的形式来嵌入图片。

示例代码如下：

// CSS 样式 .my-image { background: url(data:image/svg+xml;utf8,) no-repeat; }

// HTML 元素

// JavaScript 代码 const element = document.querySelector(".my-image");

function downloadImage(data) { let link = document.createElement("a"); link.download = "myImage.png"; link.href = data; link.click(); }

// 将 CSS 样式转变成图片，并下载到本地设备 domtoimage.toPng(element) .then(function (dataUrl) { downloadImage(dataUrl); });