svg转canvas

javascript
  目录
  1. 1. demo
  2. 2. 总结

svg转canvas小例子

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <title>svg2canvas</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:#b44a4a"></rect>
            <text x="15" y="50" fill="#ffffff">中文显示</text>
        </svg>
    </div>
    <canvas id="canvas"></canvas>
    <script>
      window.onload = function(){
        //获取svg内容
        var svg = document.getElementById('svg-wrap').innerHTML;
        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');
        //新建Image对象
        var img = new Image();    
        // 转换重点在这里
        //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>

总结

利用了img可以加载base64数据，将svg转成base64数据。
用到了unescape，encodeURIComponent函数，详情可参考

  web图形