html2canvars常见问题

The ## html2canvars

20年了，快速做出辞旧迎新的海报，希望能给大家带来帮助，祝大家新的一年蒸蒸日上。

官网：http://html2canvas.hertzen.com/
api：很多，有几个很重点。

Name	Default	Description
allowTaint	false	Whether to allow cross-origin images to taint the canvas-是否允许交叉源图像污染画布
backgroundColor	#ffffff	Canvas background color, if none is specified in DOM. Set null for transparent-画布背景颜色，如果在DOM中没有指定。设置null为透明
canvas	null	Existingcanvaselement to use as a base for drawing on-现有的画布元素，用作绘图的基础
foreignObjectRendering	false	Whether to use ForeignObject rendering if the browser supports it-如果浏览器支持，是否使用ForeignObject呈现
imageTimeout	15000	Timeout for loading an image (in milliseconds). Set to0to disable timeout.-加载图像的超时(以毫秒为单位)。设置为0以禁用超时。
ignoreElements	(element) => false	Predicate function which removes the matching elements from the render.-从呈现中删除匹配的元素。
logging	true	Enable logging for debug purposes-开启调试启用日志记录
onclone	null	Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.-回调函数(在克隆文档以进行呈现时调用)可用于修改将要呈现的内容，而不影响原始源文档。
proxy	null	Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.-代理的Url，用于加载跨源图像。如果留空，则不会加载交叉源图像。
removeContainer	true	Whether to cleanup the cloned DOM elements html2canvas creates temporarily-是否清除克隆的DOM元素html2canvas临时创建
scale	window.devicePixelRatio	The scale to use for rendering. Defaults to the browsers device pixel ratio.-用于渲染的比例。默认的浏览器设备像素比例。
useCORS	false	Whether to attempt to load images from a server using CORS-是否尝试使用CORS从服务器加载图像
width	Elementwidth	The width of thecanvas-画布的宽度
height	Elementheight	The height of thecanvas-画布的高度
x	Elementx-offset	Crop canvas x-coordinate画布坐标
y	Elementy-offset	Crop canvas y-coordinate画布坐标
scrollX	Element scrollX	The x-scroll position to used when rendering element, (for example if the Element usesposition: fixed)-渲染元素时使用的x-scroll位置(例如，如果元素使用position: fixed)
scrollY	ElementscrollY	The y-scroll position to used when rendering element, (for example if the Element usesposition: fixed)-渲染元素时使用的y轴滚动位置(例如，如果元素使用position: fixed)
windowWidth	Window.innerWidth	Window width to use when renderingElement, which may affect things like Media queries-显示元素时使用的窗口宽度，这可能会影响媒体查询等内容
windowHeight	Window.innerHeight	Window height to use when renderingElement, which may affect things like Media queries-显示元素时使用的窗口高度，这可能会影响媒体查询等内容

这些api呢。。。说真的，用不上太多，但是有很多坑。先说说几个场景：
以分享海报为例（咳咳。。。最近做的多）

截图不完整lg:

场景1：你的海报需要展示在页面中间，一般都是用固定定位，fixed，（心想：这简单啊），的确很简单。
（假设来了）

假设1：你的页面不会滚动，页面高度自己计算，始终保持一屏，那好很完美，下面的你就不用看了。

假设2：你的页面是个长页面，会滚动的，（大家开始会想：滚动我也是截取DOM节点，和滚动有毛线的关系呢？干），现实是残酷，会发现生成的canvas截取不完整，甚至一片空白。（留个坑）

场景1分析完毕（没错，还有2）

场景2：你的页面需要生成海报，但是......不希望展示出来，需要隐藏掉，两种方案：

1. 把你的DOM移到可视区域外。
2. z-index -1，层级-1建议使用absolute。

图片获取失败的几个原因：

看过源码的都知道，它的原理就是clone你的DOM节点，根据元素位置与内容比对和canvars画布同步。
其中对应的图片资源就需要服务端开启跨域资源访问。

很多时候都是服务器没有开启允许跨域资源下载导致报错

并且img标签的这个属性很重要。crossOrigin

<img crossOrigin src="" alt="">

常用配置：

html2canvas(document.getElementById('DOM'),{
    removeContainer: true,
    useCORS: true,
    allowTaint: true,
    imageTimeout: 0,
    async: true,
    scrollY:_this.scrollTop + 'px',
  }).then(function (canvas) {
    console.log(canvas.toDataURL('image/jpeg'))
  })
  

几个必要属性：
scale : 渲染的比例，文档说的很清楚了，可以动态获取DPR控制比例。
useCORS : true，使用CORS从服务器加载图像。
scrollY : ElementscrollY, 当你的DOM使用了定位的时候，这个属性可以使你的截图不受滚动影响，官方文档举例的是fixed情况，实际上使用了absolute也需要使用这个属性，值就是滚动条高度大家可以自行计算。

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 

回调

回调中的canvars就是截图后的canvars数据，你可以转成你需要的格式的图片，转出来是个base64字符串。

其实还是挺简单的，快捷，毕竟自己排版很麻烦，这样修改起来也很快速。大家觉得好用也可以去点个星支持一下。
https://github.com/niklasvh/h...

大家遇到什么问题，也可以留言，一起解决，新的坑与问题我也会继续补充文章。