html svg canvas图片,javascript svg转canvas和image

代码(内含注释)

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)

}

}

效果图

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都不会在页面显示出来