svg转图片并下载

最新推荐文章于 2024-05-20 00:20:10 发布

YGangCSDN

最新推荐文章于 2024-05-20 00:20:10 发布

阅读量166

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/YGangCSDN/article/details/136369319

版权

该篇文章介绍了一个JavaScript函数，用于将SVG元素转换为PNG格式，通过创建Canvas和Image对象实现，并提供下载功能。

摘要由CSDN通过智能技术生成

/**
 * 将SVG图像转换为PNG并下载
 * @param {string} id - SVG元素的ID，默认为'svgEle'
 * @param {string} name - 下载的文件名，默认为'svgImage'
 * @param {string} type - 图像类型，默认为'png'
 */
function downloadSvgToPng( id = 'svgEle', name = 'svgImage', type = 'png') {
  try {
    // 获取SVG元素
    let svgNode = document.getElementById(id);
    if (!svgNode) {
      throw new Error(`没有找到ID为${id}的SVG元素`);
    }

    // 获取SVG元素的宽度和高度
    let width = svgNode.clientWidth;
    let height = svgNode.clientHeight;

    // 创建一个XML序列化器来将SVG元素转换为字符串
    let serializer = new XMLSerializer();
    let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgNode);

    // 创建一个新的图像元素，并设置其源为SVG字符串
    let image = new Image();
    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);

    // 创建一个新的canvas元素，并设置其宽度和高度为SVG元素的宽度和高度
    let canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // 获取canvas的2D渲染上下文，并设置其填充颜色为白色
    let context = canvas.getContext('2d');
    context.fillStyle = '#fff';
    context.fillRect(0, 0, 10000, 10000);

    // 当图像加载完成后，将其绘制到canvas上，然后创建一个新的a元素来下载图像
    image.onload = function () {
      context.drawImage(image, 0, 0);

      let a = document.createElement('a');
      a.download = `${name}.${type}`;
      a.href = canvas.toDataURL(`image/${type}`);
      a.click();
    }
  } catch (error) {
    console.error(error);
  }
}