html2canvas是一个用于html截屏的js插件，在网站切图项目中不太常见，以至于在遇到问题的时候，能够被查阅到的有用信息很少，这次是一个很复杂的使用案例，进行了多次的截屏、拼接、再截屏，并且解决了截屏错位空白问题，增加了保存图片到本地的有效代码方案。

其中关于截屏空白的问题（页面有下拉的时候产生），先后查阅了国内外资料后找到了有效解决方案，颇为曲折。

/*第一次把图标截图放到模板里*/
html2canvas(document.querySelector(".tjqx-bars "),{
//height:850,
//y:window.pageYOffset,
}).then(canvas => {

$('#captureimg').html(canvas);

/*第二次把模板整个截图*/
html2canvas(document.querySelector("#capturetmpl"),{
//height:1240,
//y:window.pageYOffset,
scrollX: 0,
scrollY: -window.scrollY,
}).then(canvas => {
//canvas.setAttribute('id','thecanvas');
$('#capture').html(canvas);

//图片写到body临时存储
var dataURL = canvas.toDataURL();
$(document.body).data('url', dataURL);

//Canvas2Image.saveAsPNG(canvas);

//var dataURL = canvas.toDataURL("image/png");
//console.log(dataURL);
//$(document.body).data('url', dataURL);
//var tmpUrl = "data:application/octet-stream;base64" + dataURL;
// $('.kzdialog-fz').attr('href', tmpUrl);

//关闭
layer.close(index);
});

 

 

//复制图片提示
$('.kzdialog-fz').click(function(){

var url = $(document.body).data('url');

$("<a>", {
href: url,
download: "fileName"
})
.on("click", function() {$(this).remove()})
.appendTo("body")[0].click();

//var oCanvas = document.getElementById("thecanvas");
//Canvas2Image.saveAsPNG(oCanvas);



//layer.msg('复制成功');
//layer.msg('复制图片失败 请重试');
})

标签：html2canvas