SVG转Base64图片的实现方法和示例代码

SVG转Base64图片的实现方法和示例代码 第一张

SVG转Base64图片的实现方法

SVG(Scalable Vector Graphics)是一种开放的图像格式,它使用XML格式来描述2D图形,它可以在任何分辨率下渲染,可以被缩放而不会失真。SVG可以转换为Base64图片,这样可以减少图片的大小,提高网页的加载速度,提升用户体验。

SVG转Base64图片的示例代码

下面是一个将SVG转换为Base64图片的示例代码:

// 将SVG转换为Base64图片
function convertSVGToBase64(svg) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = document.createElement('img');
  img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))));
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/png');
    return dataURL;
  };
}

上面的代码将SVG转换为Base64图片的步骤如下:

  • 创建一个canvas元素,并获取它的2D上下文;
  • 创建一个img元素,并将SVG转换为base64编码;
  • 将img元素加载到canvas上;
  • 将canvas上的图像转换为base64图片,并返回。

© 版权声明
THE END
分享