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

最新推荐文章于 2024-12-11 11:13:26 发布

xiaofengclouder

最新推荐文章于 2024-12-11 11:13:26 发布

阅读量1.7k

点赞数

分类专栏：小技巧文章标签： javascript html 经验分享 chrome

本文链接：https://blog.csdn.net/sinat_25207217/article/details/121383784

版权

小技巧专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了一种通过浏览器控制台操作实现网页截图的方法，无需直接修改网页源代码。具体步骤包括引入html2canvas库，使用JavaScript选择需要截图的区域并生成图片，最后将图片展示在页面上或直接下载。

摘要由CSDN通过智能技术生成

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

引入外部js

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

html2canvas官网

在调试控制台【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);
});