将HTML网页存储为图片 区域截图 截长屏 截全屏

此方法不需要对原始网页"直接"进行修改，全部通过console进行操作即可

1. 引入外部js

var cpscript = document.createElement('script');
cpscript.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
document.getElementsByTagName('head')[0].appendChild(cpscript);

html2canvas官网

2. 在调试控制台【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