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

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

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

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

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

html2canvas.jshttps://github.com/niklasvh/html2canvas/

Canvas2Image.jshttps://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原生的通用截屏保存方法:
  <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>
好的,针对你的问题,我可以给你提供一些思路和参考方法: 1. 在 Vue 页面中引入 html2canvas 库,并使用其中的 toDataURL 方法将页面截图生成 Base64 图片数据。 2. 使用 Canvas图片上添加水印。 3. 可以添加多个水印,需要调整水印的位置和大小。 4. 最后将添加水印后的图片保存或上传到服务器。 下面是一个简单的示例代码,仅供参考: ``` <template> <div> <button @click="generateImage">生成图片</button> </div> </template> <script> import html2canvas from 'html2canvas'; export default { methods: { async generateImage() { const canvas = await html2canvas(document.querySelector('#target'), { useCORS: true, }); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = canvas.toDataURL(); // 添加水印 img.onload = () => { // 添加第一个水印 ctx.font = 'bold 20px Arial'; ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'; ctx.fillText('watermark1', 50, 50); // 添加第二个水印 ctx.font = 'bold 30px Arial'; ctx.fillStyle = 'rgba(255, 255, 255, 0.6)'; ctx.fillText('watermark2', 200, 200); // 将添加水印后的图片保存到本地 const link = document.createElement('a'); link.download = 'image.png'; link.href = canvas.toDataURL(); link.click(); }; }, }, }; </script> ``` 这里添加的两个水印只是示例,你可以根据需要添加更多的水印,并调整水印的位置和大小。同时,你需要注意浏览器的跨域问题,如果出现跨域问题,可以使用 `useCORS` 参数解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值