JavaScript 将 SVG (包含文字) 转换为 Base64

想要将 SVG 图像（包括其中的文字）转换为 Base64 编码格式？可以使用 JavaScript 和 Canvas 来实现。以下是一个示例代码：javascript// 获取 SVG 代码var svgCode = document.querySelector('svg').outerHTML;

// 创建一个 Canvas 元素var canvas = document.createElement('canvas');canvas.width = 500; // 设置 Canvas 的宽度canvas.height = 500; // 设置 Canvas 的高度

// 获取 Canvas 的 2D 上下文var ctx = canvas.getContext('2d');

// 创建一个 Image 元素var img = new Image();

// 将 SVG 代码渲染到 Canvas 上img.onload = function() { ctx.drawImage(img, 0, 0); // 将 Canvas 转换为 Base64 var base64 = canvas.toDataURL(); // 在控制台打印 Base64 数据 console.log(base64);};

// 加载 SVG 代码img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgCode)));

代码解释：

获取 SVG 代码: 首先，使用 document.querySelector('svg').outerHTML 获取包含 SVG 代码的元素。2. 创建 Canvas 元素: 创建一个 Canvas 元素，并设置其宽度和高度，用于绘制 SVG 图像。3. 获取 Canvas 上下文: 获取 Canvas 的 2D 上下文，用于在 Canvas 上进行绘制操作。4. 创建 Image 元素: 创建一个 Image 元素，用于加载 SVG 图像数据。5. 渲染 SVG 到 Canvas: 在 Image 元素的 onload 事件处理程序中，将 SVG 代码加载到 Image 对象中，并使用 drawImage 方法将 SVG 图像绘制到 Canvas 上。6. 转换为 Base64: 使用 Canvas 的 toDataURL 方法将 Canvas 内容转换为 Base64 编码的 Data URL 字符串。7. 输出 Base64 数据: 将 Base64 数据打印到控制台，或者根据需要进行其他操作。

安全注意事项:

由于浏览器的安全限制，如果 SVG 代码中包含来自其他域的图像，可能无法将其转换为 Base64。这是为了防止跨域资源访问安全问题。