带你领略 html2canvas
这个过程中如果碰到一些天坑，不用怕，小编我已经找到网上的一些解决方案了
html2canvas - 项目中遇到的那些坑点汇总(更新中...)
html2canvas库使用中出现的问题及解决方案
如何安装
使用 npm or yarn
npm install html2canvas
yarn add html2canvas
导入
import html2canvas from 'html2canvas'
用法
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
所以一个基本的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../js/html2cancas.js"></script>
</head>
<body></body>
<script>
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas)
})
</script>
</html>
Name | Default | Description |
|---|---|---|
allowTaint | false | 是否允许跨域渲染画布 |
backgroundColor | #ffffff | 画布背景颜色，如果在DOM中没有指定。设置“null”为透明 |
canvas | null | 现有的“画布”元素用来作为绘图的基础 |
foreignObjectRendering | false | 如果浏览器支持的话是否使用ForeignObject渲染 |
imageTimeout | 15000 | 加载图像的超时(毫秒)。设置为“0”以禁用超时。 |
ignoreElements | (element) => false | 从呈现中移除匹配元素。 |
logging | true | 为调试目的启用日志记录 |
onclone | null | 回调函数，当文档被克隆以呈现时调用，可以用来修改将要呈现的内容，而不影响原始源文档。 |
proxy | null | Url到代理，用于加载跨源图像。如果左侧为空，跨原点图像将不会被加载。 |
removeContainer | true | 是否清除html2canvas临时创建的克隆DOM元素 |
scale | window.devicePixelRatio | 用于渲染的比例。默认浏览器设备像素比率。 |
useCORS | false | 是否尝试使用CORS从服务器加载图像 |
width | Element width | 画布的宽度 |
height | Element height | “画布”的高度 |
x | Element x-offset | 作物画布坐标 |
y | Element y-offset | 作物画布坐标 |
scrollX | Element scrollX | 渲染元素时使用的x轴位置(例如，如果元素使用“position: fixed”) |
scrollY | Element scrollY | 呈现元素时使用的y轴位置(例如，如果元素使用“position: fixed”) |
windowWidth | `Window.innerWidth | 当渲染“元素”时使用的窗口宽度，这可能会影响媒体查询等事情 |
windowHeight | Window.innerHeight | 渲染“元素”时使用的窗口高度，这可能会影响媒体查询等事情 |
如果你希望排除某些元素被渲染，你可以添加data-html2canvas-ignore属性到这些元素，html2canvas将从渲染中排除它们。
下面是所有支持的CSS属性和值的列表。
- background
- url()
- linear-gradient()
- radial-gradient()
- background-clip (Does not support
text) - background-color
- background-image
- background-origin
- background-position
- background-size
- border
- border-color
- border-radius
- border-style (Only supports
solid) - border-width
- bottom
- box-sizing
- content
- color
- display
- flex
- float
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
- height
- left
- letter-spacing
- line-break
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- max-height
- max-width
- min-height
- min-width
- opacity
- overflow
- overflow-wrap
- padding
- position
- right
- text-align
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style (Only supports
solid)
- text-shadow
- text-transform
- top
- transform (Limited support)
- visibility
- white-space
- width
- word-break
- word-spacing
- word-wrap
- z-index
截图模糊的原因
原理就是讲canvas画布的width和height放大两倍。
后来学习canvas的时候，才了解到这种写法不同于css的宽高设置，
因为css里的只是展示画布显示的大小，不像这样是canvas真正的内里图画分辨率的大小。
/*图片跨域及截图模糊处理*/
let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象
width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
canvas = document.createElement("canvas"), //创建一个canvas节点
scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.clientWidth * scale + "px";
canvas.style.height = shareContent.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent,opts).then（）
*元素设置文字阴影，截图后阴影错乱，所有元素都会有阴影*
起初以为是v1.0.0-alpha.12 最新版本的问题,后来改成5也不行，把文字阴影去掉就可以了。
这个问题在大神的博文中有解决方案：https://blog.csdn.net/SDUST_JSJ/article/details/78122610
以下为针对本问题的部分摘录：
文本设置text-shadow截图后却没有文本阴影(2017-09-28)
bug原因
查看了源码，html2canvas确实处理了text-shadow，但是没有正确的处理小数，导致最后文本阴影没有显示出来。具体的代码为第1762行
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
解决方案
针对这两行的正则表达式，我添加了针对小数的判断，修改后的代码如下：
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
测试：
// html2canvas正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g); // ["rgb(102, 102, 102)"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "924px", "924px", "0px"]
// 修改后的正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g); // ["rgb(102, 102, 102) 11.924px 11.924px 0px"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "11.924px", "11.924px", "0px"]