此方法不需要对原始网页"直接"进行修改,全部通过console进行操作即可
- 引入外部js
var cpscript = document.createElement('script');
cpscript.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
document.getElementsByTagName('head')[0].appendChild(cpscript);
- 在调试控制台【Elements】标签页定位所需截取的区域,并记下外层div的id后者class名称
可以此控制截取的区域,并实现全屏截图 ~
- 方式一:直接拼接生成的图片到页面最底部,需手动复制或者另存到本地
// 使用id选择器
html2canvas(document.querySelector("#id_name"),{scale:1.5})
.then(canvas => { //scala默认1 控制字体线条粗细
document.body.appendChild(canvas)
});
- 方式二:直接将生成的图片下载到本地,文件名需直接在js代码中指定
// 使用class选择器
var oriDoc = document.querySelector(".vsc-initialized")
html2canvas(oriDoc).then(function (canvas) {
//console.log("canvas", canvas)
//生成图片
var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
let $a = document.createElement('a');
$a.setAttribute('href', imgData);
//自定义图片名称位置
$a.setAttribute('download', 'pic_name.png');
let body = document.getElementsByTagName('body')[0];
body.appendChild($a);
//图片下载
$a.click();
//悄悄的我走了 正如我悄悄的来 我轻轻的挥一挥衣袖 不带走一片云彩
body.removeChild($a);
});
参考文档
1. html2canvas保存图片
2. 将HTML页面内容转换为图片或PDF文件
3. 如何在浏览器控制台(Console)中引入外部JS