javascript 网页截图 js 截图功能

转载

IT独行侠客 2023-08-29 22:19:53

文章标签 javascript 网页截图 javascript js html 跨域 文章分类 JavaScript 前端开发

前端js代码实现截图功能

据我所知，屏幕截图大致可以分为两种类型。

一种是真-屏幕截图，也就是我们平常QQ，微信，钉钉等社交工具里面所用到的截图。也就是说它能把我们看到的东西截取下来，所见即所得。

javascript 网页截图 js 截图功能_js

javascript 网页截图 js 截图功能_跨域_02

另一种是通过获取网页DOM元素的截图。它的原理就是获取到网页上的DOM元素，再将他们放到canvas画布里面，最后再又画布转为图片，这样就实现了屏幕截图的功能。目前有好多方法可以实现此功能，一一介绍：

1.html2canvas方法(最方便，最常用，效果也不错~)

html2canvas官网

html2canvas是一种JavaScript实现页面截图的类库。它使用起来比较方便。

使用方法：

import html2canvas from "html2canvas"

html2canvas(document.getElementById(container'),{
    backgroundColor: "transparent",
    allowTaint: true,
    }).then((canvas) => {
    	console.log(canvas)
        // 将画布展示到最前端
        canvas.id = 'canvas'
        document.body.appendChild(canvas);
        document.getElementById('canvas').style.position = 'fixed'
        document.getElementById('canvas').style.top = '0'
        document.getElementById('canvas').style.left = '0'
        document.getElementById('canvas').style.zIndex = '9999'
        // 下载图片到本地
        var a = document.createElement("a");
        a.href = canvas.toDataURL("image/jpg");
        a.download = '图片';
        a.click();
});

其中，document.getElementById(container')指定了要截取哪个DOM元素中的内容。第二个参数对象{ backgroundColor: "transparent",allowTaint: true,}指定了一些截图的参数。详细见下表：

参数名称	参数类型	默认值	描述
allowTaint	boolean	false	是否允许跨域
background	string	#fff	canvas的背景颜色，如果没有设定默认透明
height	number	null	canvas高度设定
letterRendering	boolean	false	在设置了字间距的时候有用
logging	boolean	false	在console.log()中输出信息
proxy	string	undefined	代理地址
taintTest	boolean	true	是否在渲染前测试图片
timeout	number	0	图片加载延迟，默认延迟为0，单位毫秒
width	number	null	canvas宽度
useCORS	boolean	false	涉及到画布转图片的问题(截图功能)

此表格来源于：html2canvas

上述表格中比较常用的就只是前两个，涉及到跨域问题。

踩坑记录
canvas渲染：
在涉及到一些有二维地图的页面的时候，一开始没有配置允许跨域，发现截取不到地图等图层内容。我就以为地图等图层内容不存在于DOM元素上，后来检查页面元素节点树才发现，地图等图层也是放置在DOM元素上的，因此在配置了允许跨域后就能重新渲染出来。

canvas画布转图片：
涉及到跨域的图片虽然能够渲染到canvas画布中，但是此时画布因为存在跨域的图片，已经受到了污染，因此无法正常转为图片。在执行上面的**保存画布为图片(即截图功能的实现)**的代码的时候，就需要将useCORS参数设置给加上去，并且设置为true。经过本人亲测，能够实现保存画布为图片(png格式，不知道为啥明明设置了toDataURL("image/jpg")，但还是转的png)。

2.puppeteer

puppeteer

使用方法：
puppeteer.js

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ // 设置视窗大小
        width: 1920,
        height: 1080
    });
    await page.goto('https://zhfw.tianditu.gov.cn/'); // 打开页面
    await page.screenshot({path: 'example.jpg'}); // path: 截屏文件保存路径
    await browser.close();
})();

用命令