SVG导出PNG文件同时解决中文不能导出的问题

最新推荐文章于 2024-04-15 13:52:59 发布

深街孤影

最新推荐文章于 2024-04-15 13:52:59 发布

阅读量313

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_51081257/article/details/128610008

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何在HTML环境中将SVG图形转换为Base64编码的图片，并进一步转换为PNG格式。通过使用XMLSerializer序列化SVG元素，然后利用canvas绘制并导出为数据URL，实现了SVG到PNG的转换，最后提供了一个下载图片的功能。

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

本文仅作为个人记录

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="wsq">
  <title></title>
  <script>

  </script>
  <style>

  </style>
</head>

<body>

  <script src="svgToImg1.js"></script>
  <div>
    <button onclick="svgPng()">change</button>
    <!-- 这里存放你的svg标签 -->
    <svg id="mySvg" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0,0 20,0 80,80 60,80  " stroke="#0052D9" />
      <text style="cursor:default" str_len='14' lengthAdjust='spacingAndGlyphs' x="4" y="36.09" font-size="17"
        font-family="SimSun" fill="rgb(255,5,43)" stroke="rgb(255,5,43)" stroke-width="0" transform="rotate(0 18,15.49)"
        font-interval='0' writing-mode="lr">中文</text>
    </svg>
    <!-- <svg id="mySvg" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0,0 20,0 80,80 60,80  " stroke="#0052D9" />
    </svg> -->

  </div>

  <!-- base64svg -->

  <img src="" id="baseSvg" />

</body>

</html>

const myImg = document.getElementById('myImg'); // 获取Img
// #### Canvas 转 Base64
function canvasBase64() {
  const canvas = document.getElementById('myCanvas');
  const ImgBase64 = canvas.toDataURL('image/png');
  console.log(ImgBase64, 'Canvas 转 Base64');
  myImg.src = ImgBase64;
}
// #### Svg 转 Base64
function svgBase64() {
  const svg = document.getElementById('mySvg');
  const s = new XMLSerializer().serializeToString(svg);
  const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
  console.log(ImgBase64, 'Svg 转 Base64'); s
  myImg.src = ImgBase64;
}
// #### Svg 转 png
function svgPng() {
  const svg = document.getElementById('mySvg');
  // anXMLSerializer.serializeToString(rootNode)
  let s = new XMLSerializer().serializeToString(svg);
  //url 转码

  //Base64 转码
  // s = window.btoa(s);
  const src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(s)))}`;
  //const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
  const img = new Image(); // 创建图片容器承载过渡
  img.src = src;
  document.querySelector('#baseSvg').setAttribute('src', src);
  console.log(document.querySelector('#baseSvg'));
  img.onload = () => {
    // 图片创建后再执行，转Base64过程
    const canvas = document.createElement('canvas');
    // let svg_width = document.getElementById("GraphHead").children[0].getAttribute("width");
    // let svg_height = document.getElementById("GraphHead").children[0].getAttribute("height");
    let svg_width = document.getElementById("mySvg").width.baseVal.value;
    let svg_height = document.getElementById("mySvg").height.baseVal.value;

    canvas.width = svg_width;

    canvas.height = svg_height;
    const context = canvas.getContext('2d');
    console.log(img);
    context.drawImage(img, 0, 0);
    const ImgBase64 = canvas.toDataURL('image/png');
    console.log(ImgBase64, 'Svg 转 png');

    //4.创建图片元素
    var img2 = document.createElement("img");
    //5.生成图片
    img2.setAttribute("src", ImgBase64);

    //下载该图片
    img2.onload = function () {
      var a = document.createElement("a");
      //下载
      a.download = "SVG图片";
      a.href = img2.getAttribute("src");
      a.click();
    };

  }

}

完成导出网页端svg文件转成图片功能