js 将svg转canvas和image

<!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;

        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>

svg标签一定要加属性xmlns='http://www.w3.org/2000/svg'
svg标签一定要加属性xmlns='http://www.w3.org/2000/svg'
svg标签一定要加属性xmlns='http://www.w3.org/2000/svg'
不然svg内容和base64添加到img.src会出错,canvas和image都不会在页面显示出来

还要注意://svg内容中不能有中文字符

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值