用到JS项目
html2canvas
SVG截图还需要用到canvg
使用方法
引入js包
注意: 需要用jq3以上版本, 1.8的各版本会报错
增加js代码, 可以放到一个button的click事件里面
html2canvas($("#container"), { //
$("#container")是你要复制生成canvas的区域,可以自己选
onrendered: function (canvas) {
dataURL =
canvas.toDataURL("image/png");
//下载图片, dataURL 实际是图片的BASE64编码, 不是图片的url地址,
此时图片还没有url
//open_button是一个打开图片的按钮
$('#open_button').attr('href',
dataURL);
},
})
普通网页的截图这样就可以了
但是SVG图形这样就不行了, 截出来始终是空白, 因此需要另一个项目canvg
需要在html2canvas之前加入以下代码
scrollTo(0, 0);
var nodesToRecover =
[];
var nodesToRemove =
[];
var svgElem =
$("#container").find('svg');//divReport为需要截取成图片的dom的id
svgElem.each(function (index,
node) {
var
parentNode = node.parentNode;
var svg =
node.outerHTML.trim();
var canvas
= document.createElement_x('canvas');
canvg(canvas, svg);
if
(node.style.position) {
canvas.style.position +=
node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
这个会把选择的容器内的svg对象转化成canvas对象, 后面再接html2canvas就行了
注意: 这段代码会替换原始的html对象, 可以在做之前把对象先复制一份, 图搞定之后再替回去