svg、canvas 转img图片

需求：quill富文本+echarts图表

思路：echarts生成svg。然后转成img图片。添加到quill里

啥也不说，直接上代码。


<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>

  <body>
    <div id="svg-wrap">
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect width="200" height="200" style="fill: #ddd"></rect>
      </svg>
    </div>
    <canvas id="canvas"></canvas>
    <script>
      window.onload = function () {
        //获取svg内容
        var svg = document.getElementById('svg-wrap').innerHTML;
        console.log('svg', svg);
        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');

        //新建Image对象
        var img = new Image();

        //svg内容
        img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg)); //svg内容中可以有中文字符
        img.src = 'data:image/svg+xml,' + svg; //svg内容中不能有中文字符

        //svg编码成base64
        img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg))); //svg内容中可以有中文字符
        img.src = 'data:image/svg+xml;base64,' + window.btoa(svg); //svg内容中不能有中文字符

        //图片初始化完成后调用
        img.onload = function () {
          //将canvas的宽高设置为图像的宽高
          canvas.width = img.width;
          canvas.height = img.height;

          //canvas画图片
          c.drawImage(img, 0, 0);

          //将图片添加到body中
          document.body.appendChild(img);
        };
      };
    </script>
  </body>
</html>

 

posted @ 2022-01-21 17:58  WongDaWEEE  阅读(355)  评论(0)  编辑  收藏  举报