JavaScript SVG 转 Base64 图片指南

想要将 SVG 图像转换为 Base64 编码格式？使用 JavaScript 中的 Canvas 元素和 toDataURL 方法就能轻松实现。以下是一段示例代码：javascript// 创建一个 canvas 元素var canvas = document.createElement('canvas');canvas.width = 100; // 设置 canvas 的宽度canvas.height = 100; // 设置 canvas 的高度

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

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

// 当 Image 元素加载完成后执行回调函数image.onload = function() { // 将 SVG 绘制到 canvas 中 context.drawImage(image, 0, 0);

// 获取 canvas 的 Base64 图像数据 var base64 = canvas.toDataURL();

// 打印 Base64 图像数据 console.log(base64);};

// 设置 Image 元素的 src 属性为 SVG 的 XML 数据image.src = 'data:image/svg+xml;base64,' + btoa(yourSVGData);

代码解释：

首先，我们创建一个 canvas 元素，并设置其宽度和高度。2. 然后，获取 canvas 的上下文，并创建一个 Image 元素。3. 当 Image 元素加载完成后，将 SVG 绘制到 canvas 中。4. 使用 toDataURL 方法获取 canvas 的 Base64 图像数据。5. 最后，打印 Base64 图像数据。

注意：

将代码中的 yourSVGData 替换为你的 SVG 数据。* 你可以直接将 SVG 数据作为字符串传递给 image.src，或者使用 btoa 函数将 SVG 数据转换为 Base64 编码。