使用html2canvas完成页面截屏并保存为图片

绝地灬酷狼 2022-04-24 16:34 427阅读 0赞

实现网页页面截屏，并且将其转换为指定图片格式保存下来，需要使用到html2canvas.js。

前面是实现原理和步骤分析，具体实现代码在文章尾部。

#### 一、实现HTML页面截屏并保存为图片 ####

原理是遍历需要转换的页面DOM元素，然后通过html2canvas.js将其转换为canvas标签画布，然后使用Canvas2Image.js控件的convertToImage方法（也可以使用canvas的toDataURL方法），将canvas转换为img标签，然后获取其src值（base64编码），实现将网页保存图片。

**html2canvas.js**：[https://github.com/niklasvh/html2canvas/][https_github.com_niklasvh_html2canvas]

**Canvas2Image.js**：[https://github.com/hongru/canvas2image][https_github.com_hongru_canvas2image]

--------------------

##### 第一步：html标签转换为canvas #####

基于html2canvas.js可以将一个元素渲染为canvas，那如果我们只需要对页面中囊括了所有元素的最大的元素（如最大的div）进行转换即可，这样下面的所有元素都会一齐转换。

只需要调用html2canvas(element\[, options\])即可，下列`html2canvas`方法会返回一个包含有`<canvas>`元素的\`promise‘：

html2canvas(document.body).then(function(canvas) { 
        document.body.appendChild(canvas);
    });

##### 第二步：canvas转化为image #####

在上一步中生成的canvas即为包含目标元素的`<canvas>`元素对象，那实现保存图片只需要将canvas转为image即可。

这里有两种转换方法：

1.  基于原生canvas的toDataURL方法将canvas输出为data：URI类型的图片地址，再将该图片地址赋值给< image>元素的src属性，然后通过< a>标签进行下载。
2.  使用第三方库Canvas2Image.js，调用其convertToImage方法，转换为img标签，再通过标签进行下载。

实际上，`Canvas2Image.js`也是基于`canvas.toDataURL`的封装，相比原生的canvas API对于转为图片的功能上考虑更为具体(未压缩的包大小为7.4KB)，适合项目使用

--------------------

#### 二、生成图片的清晰度优化方案 ####

##### 1.基础的清晰度优化方案 #####

> 最终图片的清晰度取决于第一步中html转换成的canvas的清晰度。

基本原理为：

将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。

##### 2.进阶的清晰度优化方案 #####

在上一步的设置后，大果粒一般的渲染结果依然没有什么好的方法。

所以下面有三条进阶优化的方法：

1.  更改百分比布局为px布局（如果原先是百分比布局的话）
2.  关闭canvas默认的抗锯齿设置
3.  设置模糊元素的width和height为素材原有宽高，然后通过transform：scale进行缩放。这里的scale的数值由具体需求决定

**基本原理为：**

1.  如果原来使用百分比设置元素宽高，更改为px为单位的宽高，避免样式二次计算导致的模糊
2.  默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化
3.  除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰清晰度，对于DOM中其他元素也可以使用css样式的scale来实现同样的缩放

例如：DOM元素样式：

.targetElem { width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}

--------------------

#### 三、含有跨域图片的配置（解决跨域图片的问题） ####

由于canvas对于图片资源的同源限制，如果画布中包含跨域的图片资源则会污染画布，造成生成图片样式混乱，或者是html2canvas方法不执行问题。

以下主要解决两类跨域的图片资源：包括已配置过的CORS的CDN（分布式缓存服务器）中的图片资源和微信用户头像图片资源。

##### 1.针对CDN中的图片的配置 #####

1.  要求CDN的图片配置好CORS，CDN配置好后，通过chrome开发者工具可以看到响应头中应含有Access-Control-Allow-Origin的字段。
2.  开启html2canvas的useCORS配置项，即作如下设置：

var opts = { useCORS: true};
    
    html2canvas(element, opts);

注意：

如果没有开启html2canvas和useCORS配置项，html2canvas会正常执行且不会报错，但是不会输出对应的CDN图片

（例如：同事包含CDN的图片和本地图片的资源的页面，但是只有本地图片能够被正常的渲染出来）

##### 2.针对微信用户头像的配置 #####

如果要将微信平台中的用户头像一并保存为图片，可通过配置服务端代理转发（forward）实现。

--------------------

#### 四、其他注意事项 ####

1.JPEG的黑屏问题

设置canvas2img输出格式为jpeg，会有一定几率导致生成的图片包含大量的黑色块。可能的解决方案：缩减部分图片冤死的体积和尺寸大小

2.不能保留动效

在图片的转化钱，必须停止或者删除动效后才能正确渲染出图片，否则生成图片是破裂的

--------------------

#### 根据上述步骤，具体的实现代码案例如下： ####

##### 1.基于html2canvas.js和Canvas2Image.js： #####

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>截屏并保存</title>
        <script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-ui-1.11.4和jQuery-3.4.0.custom\jquery-3.4.0.min.js"></script>
        <script type="text/javascript" src="C:\Users\Administrator\Desktop\html2Canvas\html2canvas.js"></script>
        <script type="text/javascript" src="C:\Users\Administrator\Desktop\canvas2image-master\canvas2image.js"></script>
        <script> function convert2canvas() { var shareContent = document.getElementById("dialog1"); //获取囊括所有元素的最大的div元素 var width = shareContent.offsetWidth; //获取dom宽度（包括元素宽度、内边距和边框，不包括外边距） var height = shareContent.offsetHeight; 获取dom高度（包括元素高度、内边距和边框，不包括外边距） var canvas = document.createElement("canvas"); //创建一个canvas标签元素 var scale = 2; //定义放大倍数，可以支持小数 var imgType = "image/jpg";//设置默认下载的图片格式 canvas.width = width * scale; //定义canvas宽度 * 倍数（图片的清晰度优化），默认宽度为300px canvas.height = height * scale; //定义canvas高度 * 倍数，默认高度为150px canvas.getContext("2d").scale(scale, scale); //创建canvas的context对象，设置scale，相当于画布的“画笔”拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var opts = { //初始化对象 scale: scale, //添加的scale参数 canvas: canvas, //自定义canvas logging: true, //日志开关，便于查看html2canvas的内部执行流程 width: width, //dom的原始宽度和高度 height: height, useCORS: true //开启html2canvas的useCORS配置，跨域配置，以解决图片跨域的问题 }; html2canvas(shareContent, opts).then(function (canvas) { var context = canvas.getContext('2d'); // 【重要】关闭抗锯齿，进一步优化清晰度 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height,imgType); //将绘制好的画布转换为img标签,默认图片格式为PNG. document.body.appendChild(img); //在body元素后追加的图片元素至页面，也可以不追加，直接做处理 $(img).css({ //设置图片元素的宽高属性 "width": canvas.width / 2 + "px", "height": canvas.height / 2 + "px", }) $(img).attr("id", "img1"); //为图片元素添加id属性 // 生成一个a超链接元素 var a = document.createElement('a'); // 创建一个单击事件 var event = new MouseEvent('click'); // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称 a.download = name || '下载图片名称'; a.href = img.src;//将img的src值设置为a.href属性，img.src为base64编码值 // 触发a的单击事件 a.dispatchEvent(event); }); } </script>
    
    </head>
    
    <body>
    
        <div id="dialog1" title="离职指引">
            <p><a href="" style="display: block;text-align: center;" id="downloadImg" download="downImg">点击下载图片</a></p></br>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <p> 以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制
            </p>
            <input type="button" onclick="convert2canvas();" value="截图并下载"></br>
    
        </div>
    
        </br>
    
    
    
    </body>
    
    </html>

##### 2.基于canvas原生的通用截屏保存方法： #####

[https_github.com_niklasvh_html2canvas]: https://github.com/niklasvh/html2canvas/
[https_github.com_hongru_canvas2image]: https://github.com/hongru/canvas2image