html怎么弄博客截图,使用JS进行页面截图,包括SVG的支持

用到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对象, 可以在做之前把对象先复制一份, 图搞定之后再替回去