返回顶部

收藏

HTML5 Canvas中加载SVG图像

更多
<html>
<head>
<title>在 Cavas 中加载 SVG 图像</title>
</head>
<body>
以下代码在支持Cavas、SVG、XMLSerializer的浏览器中测试,如Firefox、Chrome。
<table cellspacing="1" cellpadding="10" border="1">
<tr>
<td>SVG原图</td><td>Canvas 对象中加载</td>
</tr>
<tr>
<td id="td1">
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="svg1">
    <circle cx="50px" cy="50px" r="50px" fill="blue"/>
</svg>
</td>
<td><canvas width="100" height="100" id="canvas1"></canvas></td>
</tr>
</table>
<script type="text/javascript">
    window.onload = function () {
        var ctx = document.getElementById("canvas1").getContext('2d');
        //https://developer.mozilla.org/en-US/docs/XMLSerializer
        var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("svg1"));
        var img = new Image();
        //https://developer.mozilla.org/en-US/docs/DOM/window.btoa
        img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);

        //也可以直接写
        //img.src = "data:image/svg+xml;base64," + window.btoa(document.getElementById("td1").innerHTML);

        img.onload = function () {
            //drawImage 可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数
            ctx.drawImage(img, 0, 0);
        };
    }
</script>
</body>
</html>
<!--该代码片段来自于: http://www.outofmemory.cn/codes/html/6896-->

标签:SVG,HTML5,图片加载

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. sxwgf 发表 2015-11-22 02:58:16 基于HTML5和SVG的手机菜单动画
  2. 田田 发表 2015-12-07 03:04:41 H5动效的常见制作手法
  3. 博主 发表 2016-03-28 12:58:40 弹幕、抽奖及投票
  4. EXDestroyer 发表 2015-08-13 05:49:28 如何让SVG整体任意自动缩放
  5. 博主 发表 2015-05-07 07:46:30 弹幕、抽奖及投票
  6. 梦想家 发表 2013-07-17 12:42:10 svg:xml标记的可缩放矢量图形
  7. 歪脖骇客 发表 2016-01-25 06:28:01 在网页中使用SVG技术
  8. Nick Janssen 发表 2013-10-21 13:11:08 Building a 3D MMO Using WebSockets
  9. 田田 发表 2015-12-07 03:04:41 H5动效的常见制作手法
  10. 博主 发表 2015-06-23 05:43:07 弹幕、抽奖及投票
  11. 一丝 发表 2013-01-16 11:10:25 CSS 与 HTML5 响应式图片
  12. TAT.iAzrael 发表 2012-11-21 15:45:18 自动生成HTML5离线App应用的Manifest