html2canvas 使用介绍及模糊问题

简介

Html2canvas 是一个 JavaScript 库，可以将网页中的 HTML 元素转换为 Canvas 元素，从而实现将网页截图保存为图片的功能。你可以使用 Html2canvas 来动态生成网页截图，或者将特定区域截图保存为图片。

安装

npm install --save html2canvas
// 或
yarn add html2canvas

使用

import html2canvas from 'html2canvas';

html2canvas(dom,{}).then(function(canvas) {
    const imgUrl = canvas.toDataURL('image/png');
    //imgUrl为base64形式的图片
});

配置项

属性	默认值	概述
allowTaint	false	是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
backgroundColor	#ffffff	画布背景色，设置null为透明
canvas	null	现有canvas元素用作绘图的基础
foreignObjectRendering	false	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时
ignoreElements	(element) => false	返回true，可从渲染中删除匹配的元素
logging	true	启用日志以进行调试
onclone	null	当文档被克隆用于呈现时调用的回调函数可用于修改将要呈现的内容，而不会影响原始源文档。
proxy	null	代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像
removeContainer	true	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率
useCORS	false	是否尝试使用CORS从服务器加载图像（支持图片跨域！）
width	Element width	canvas的宽度
height	Element height	canvas的高度
x	Element x-offset	裁剪画布X坐标
y	Element y-offset	裁剪画布y坐标
scrollX	Element scrollX	渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY	Element scrollY	呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响媒体查询等内容
windowHeight	Window.innerHeight	渲染元素时使用的窗口高度，这可能会影响媒体查询等内容

如果您希望将某些元素排除在渲染之外，可以向这些元素添加data-html2canvas-ignore属性，html2canvas将从渲染中排除它们。

模糊问题解决

• 增大dpi

dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。
默认情况下，HTML2Canvas使用96 DPI，但是我们可以通过设置“dpi”属性来增加输出的分辨率。

• 增大scale

默认情况下，HTML2Canvas使用1的比例，但是我们可以通过设置“scale”属性来增加输出的分辨率。例如，将缩放比例设置为2，则输出画布的尺寸将是原始HTML元素尺寸的两倍。这也将导致输出的分辨率提高到4倍。

//获取设备比
function getDPR(){
   if (window.devicePixelRatio && window.devicePixelRatio > 1) {
       return window.devicePixelRatio;
   }
   return 1
}

html2canvas(element, {
    scale: 2,
    dpi: 300
});

在上面的示例中，我们将比例设置为2，并将DPI设置为300。这将以更高的质量生成2倍于原始HTML元素尺寸的输出。