JavaScript 将 SVG 转换为 Base64 图片教程

想要在网页中使用 Base64 格式的 SVG 图片？这篇教程将教你如何使用 JavaScript 将 SVG 转换为 Base64 图片。

代码示例

以下 JavaScript 代码演示了如何将 SVG 转换为 Base64 图片：javascript// 获取 SVG 元素var svgElement = document.getElementById('your-svg-id');

// 创建一个 Canvas 元素var canvas = document.createElement('canvas');canvas.width = svgElement.width.baseVal.value;canvas.height = svgElement.height.baseVal.value;

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

// 将 SVG 绘制到 Canvas 上var svgString = new XMLSerializer().serializeToString(svgElement);var DOMURL = self.URL || self.webkitURL || self;var img = new Image();var svgBlob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});var url = DOMURL.createObjectURL(svgBlob);

img.onload = function() { context.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url);

// 将 Canvas 转换为 Base64 图片 var base64Image = canvas.toDataURL('image/png');

// 在控制台输出 Base64 图片 console.log(base64Image);};

img.src = url;

代码说明:

获取 SVG 元素: 使用 document.getElementById() 方法获取需要转换的 SVG 元素，将 'your-svg-id' 替换为你的 SVG 元素的 ID。2. 创建 Canvas 元素: 创建一个新的 Canvas 元素，并设置其宽度和高度与 SVG 元素一致。3. 获取绘图上下文: 通过 canvas.getContext('2d') 获取 Canvas 的 2D 绘图上下文。4. 将 SVG 绘制到 Canvas: 使用 XMLSerializer().serializeToString() 将 SVG 元素序列化为字符串，然后创建一个 Blob 对象，最后使用 createObjectURL 创建一个临时的 URL。创建一个 Image 对象，将临时 URL 赋值给 Image 对象的 src 属性，并在 Image 对象加载完成后将其绘制到 Canvas 上。5. 将 Canvas 转换为 Base64: 使用 canvas.toDataURL() 方法将 Canvas 转换为 Base64 编码的 PNG 图片。6. 输出 Base64 图片: 将转换后的 Base64 图片输出到控制台，你也可以将其用于其他用途，例如设置图片的 src 属性。

总结

通过以上步骤，你可以轻松地使用 JavaScript 将 SVG 转换为 Base64 图片。这种技术在网页开发中非常实用，可以帮助你优化图片加载速度、减少 HTTP 请求次数，提升用户体验。