使用 JavaScript 将 HTML 字符串转换为 Base64 图片

您可以使用 JavaScript 和 HTML5 Canvas 将 HTML 字符串转换为 Base64 编码的图片。以下是实现步骤和示例代码：

步骤：

1. 创建一个 Canvas 元素。2. 获取 Canvas 的 2D 绘图上下文。3. 创建一个 Image 对象，并将其 src 属性设置为 data URI，其中包含编码后的 HTML 字符串。4. 监听 Image 对象的 load 事件。5. 在 load 事件处理程序中，将 Image 绘制到 Canvas 上。6. 使用 Canvas 的 toDataURL() 方法将 Canvas 内容转换为 Base64 编码的图片字符串。

**示例代码：**javascriptfunction htmlToBase64(htmlStr) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d');

// 创建一个 Image 对象 var img = new Image();

// Image 加载完成后执行 img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0);

// 将 canvas 转换为 Base64 字符串    var base64Str = canvas.toDataURL();

// 打印 Base64 字符串    console.log(base64Str);  };

// 设置 Image 对象的 src，加载 HTML 字符串 img.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(htmlStr);}

// 调用函数并传入 HTML 字符串htmlToBase64('

Hello, World!

运行结果：

运行以上代码，您将在控制台中看到转换后的 Base64 编码的图片字符串。

注意：

• 确保 HTML 字符串中使用的图片资源可以通过网络访问，否则图片可能无法正确加载。- 您可以根据需要修改 Canvas 的大小，以适应不同的 HTML 内容。