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

最新推荐文章于 2024-10-10 11:08:26 发布

Annn_kk

最新推荐文章于 2024-10-10 11:08:26 发布

阅读量7k

点赞数 1

分类专栏： JS 文章标签： js html2canvas

本文链接：https://blog.csdn.net/Annn_kk/article/details/89678675

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

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

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

html2canvas.js：https://github.com/niklasvh/html2canvas/

Canvas2Image.js：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即可。

这里有两种转换方法：

基于原生canvas的toDataURL方法将canvas输出为data：URI类型的图片地址，再将该图片地址赋值给< image>元素的src属性，然后通过< a>标签进行下载。
使用第三方库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.进阶的清晰度优化方案

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

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

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

基本原理为：

如果原来使用百分比设置元素宽高，更改为px为单位的宽高，避免样式二次计算导致的模糊
默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化
除了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中的图片的配置

要求CDN的图片配置好CORS，CDN配置好后，通过chrome开发者工具可以看到响应头中应含有Access-Control-Allow-Origin的字段。
开启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原生的通用截屏保存方法：

  <script>
        //dowloadImg($('#img'),"下载图片")
        function downloadImg(selector, name) { //通用图片保存下载方法，将页面的img标签保存为图片格式
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous');
            image.onload = function () {//图片元素完成后触发事件
                var canvas = document.createElement('canvas')//创建一个canvas标签元素
                canvas.width = image.width;
                canvas.height = image.height;
                var imgType = "image/png";//设置默认下载的图片格式

                var context = canvas.getContext('2d');//设置canvas，context属性，获取“画笔”
                context.drawImage(image, 0, 0, image.width, image.height);//绘制图片
                var url = canvas.toDataURL(imgType);//将图片转换为base64编码
                // 生成一个a元素
                var a = document.createElement('a');
                // 创建一个单击事件
                var event = new MouseEvent('click');

                // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                a.download = name || '下载图片名称';
                // 将生成的URL设置为a.href属性
                a.href = url;

                // 触发a的单击事件
                a.dispatchEvent(event);
            }
            image.src = document.querySelector(selector).src;//将img标签的src值赋给image对象的src值。
        }
    </script>