当前位置：首页 > news >正文

解决html2canvas图片模糊不清，超出一页长截图问题

news 2025/1/17 3:02:15

前言

最近需要做一个页面截图功能，类似QQ、微信截图功能，核心是将Html网页转换成图片格式，并且尽可能保证截图后图片样式和原网页一致。对比了一些第三方插件以及浏览器自带的API，最终选择使用JavaScript库‌：如html2canvas，可以实现一键生成HTML任意元素截图的功能。

‌html2canvas是一个JavaScript库，用于将HTML元素渲染为Canvas元素，实现网页内容的截图功能‌。
‌功能‌：html2canvas允许直接在用户浏览器截取页面或部分网页的“屏幕截屏”。它基于DOM，根据页面上可用的信息构建屏幕截图，而不是制作实际的屏幕截图。
‌工作原理‌：html2canvas首先解析网页上指定的HTML元素，包括文本、样式和布局等信息，并构建成一个DOM树的内部表示。然后计算每个DOM元素的样式和布局信息，并将其逐个绘制到隐藏的Canvas元素上，形成最终的截图效果。最后，将Canvas元素内容导出为图片格式。
‌局限性‌：html2canvas不支持跨域图片的截图，且不支持呈现插件内容，如flash或java小程序‌。

1.遇到的问题

1.图片截取后不清晰，像是遮上了一层阴影。
2.如果想截图的部分超出一整个页面，不能完整截图一个长图。
3.一些hmtl标签会导致页面截图后，图片和html看到的效果不一致，例如CSS3动画、过渡、滤镜效果、复杂图形和路径等。

2.解决办法

1.调整清晰度的参数
在这里插入图片描述
主要通过调节这两个参数值来使截图的图片更清晰，这是封装了scale、dpi参数的html2canvas.js，下载后引用页面即可

2.获取想截图的内容范围

var width = $('.wrapper-content').outerWidth();   //想截取的标签, wrapper-content为div
var height = $('.wrapper-content').outerHeight();

3.引入库

<script src="/js/screenshot/html2canvas.js"></script>

4.编写方法

代码如下（示例）：

<a href="#" onclick="screenshot();" class="btn btn-sm btn-success">
<i class="fa-solid fa-expand"></i> 屏幕截图</a>

function screenshot() {var now = new Date();var year = now.getFullYear();var month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的var day = now.getDate().toString().padStart(2, '0');var hour = now.getHours().toString().padStart(2, '0');var minute = now.getMinutes().toString().padStart(2, '0');var second = now.getSeconds().toString().padStart(2, '0');layer.load('截图中，请稍后......', 1);setTimeout(function() {var width = $('.wrapper-content').outerWidth();   //想截取的标签var height = $('.wrapper-content').outerHeight();html2canvas($('.wrapper-content'), {allowTaint: true,letterRendering: 1,height: height,width: width,scale: window.devicePiexlRatio, //设备像素比background:null}).then(canvas =>{// 将canvas转换为图片并下载var link = document.createElement("a");link.download = year + month + day + ' ' + hour + minute + second + ".png";link.href = canvas.toDataURL("image/png");link.click();}).catch(error =>{console.error("Screenshot capture failed:", error);});},1300);
}