html2canvars常见问题

##html2canvars已经20年了，赶快做个海报辞旧迎新，希望能给大家带来帮助，祝大家新年兴旺。官网：http://html2canvas.hertzen.com/api：有很多，但有几个很重要。NameDefaultDescriptionallowTaintfalse是否允许跨源图像污染画布backgroundColor#ffffffCanvas背景颜色，如果没有在DOM中指定。如果未在DOM中指定，则为透明画布背景颜色设置null。设置null为透明canvasnullExistingcanvaselement用作在现有canvas元素上绘制的基础，用作绘制的基础foreignObjectRenderingfalse如果浏览器支持是否使用ForeignObject渲染-是否使用ForeignObject渲染imageTimeout15000加载图像的超时时间（以毫秒为单位）).设置为0以禁用超时。-加载图像的超时时间（以毫秒为单位）。设置为0以禁用超时。ignoreElements(element)=>falsePredicate函数，它从渲染中移除匹配的元素。loggingtrueEnableloggingfordebugpurposes-enabledebuggingandenableloggingonclonenullCallbackfunctionwhichcalledwhentheDocumenthasbeenclonedforrendering,canbeusedtomodifythecontentsthatwillberenderedfordebugpurposes-回调函数（在被克隆的文件中）渲染时调用的文档）可用于修改将要渲染的内容而不影响原始源文档。用于加载跨源图像的代理的proxynullUrl。如果留空，则不会加载跨源图像。-代理的URL，用于加载跨源图像。如果留空，则不会加载任何跨源图像。removeContainertrueWhethertocleanuptheclonedDOMelementshtml2canvascreatestemporary-是否清理克隆的DOM元素html2canvastemporarycreatesscalewindow.devicePixelRatioThescaletouseforrendering.默认为浏览器设备像素比率。-用于渲染的比率。默认浏览器设备像素比。useCORSfalse是否尝试使用CORS从服务器加载图片widthElementwidth画布的宽度-画布的宽度heightElementheight画布的高度-画布的高度xElementx-offset裁剪画布x坐标画布坐标yElementy-offset裁剪画布y坐标画布坐标scrollXElementscrollXThex-scrollpositiontousedwhenrenderingelement,(forexampleiftheElementusesposition:fixed)-渲染元素时使用的x-scroll位置（例如，如果元素使用position:fixed）scrollYElementscrollYThey-scrollpositiontousedwhenrenderingelement,(forexampleiftheElementusesposition:fixed)-渲染元素时使用的y轴滚动位置（例如，如果元素使用position:fixed）影响Mediaqueries-windowheighttousewhenrenderingelements，这可能会影响Mediaqueries-windowHeightWindow.innerHeightWindowheighttousewhenrenderingElement,whichmayaffectthingslikeMediaqueries-windowheighttousewhenrenderingElement,whichmayaffectmedia这些用于查询和其他内容的api怎么样。..说实话，需要的不多，但是坑也不少。先说几个场景：以分享海报为例（咳咳……最近做了很多）截图不完整lg:场景一：你的海报需要展示在页面中间，一般都是固定定位，固定的，（心想：这很简单），确实很简单。（假设来了）假设一：你的页面不会滚动，页面高度会自己计算，永??远是一屏，完美，下面就不用看了。假设2：您的页面是一个会滚动的长页面。（大家一开始会想：我在滚动的时候也拦截DOM节点，跟滚动有关系吗？干），现实是残酷的，你会发现生成的canvas并没有被完全拦截，甚至一片空白。（留个坑）场景一分析完毕（是的，有2个）场景二：你的页面需要生成一张海报，但是……你不想显示，需要隐藏，两种解决方案：把你的DOM移出可视区域。z-index-1,level-1建议使用absolute。图片获取失败的几种原因：看过源码的都知道，它的原理是克隆你的DOM节点，根据元素位置和内容对比，同步到画布上。对应的图片资源需要服务端开启跨域资源访问。很多时候服务器不允许跨域资源下载导致错误，img标签的这个属性很重要。crossOrigin常用配置：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的时候也需要用到这个属性。该值为滚动条的高度大家可以自行计算。窗口.pageYOffset||文档.documentElement.scrollTop||document.body.scrollTopcallback回调中的canvas就是截图后的canvas数据，你可以把它转换成你需要的格式的图片，转换后的结果是一个base64字符串。事实上，它非常简单和快速。毕竟自己排版很麻烦，所以修改起来也很快。觉得好用的可以点个star支持一下。https://github.com/niklasvh/h...遇到什么问题也可以留言一起解决。对于新的陷阱和问题，我会继续添加文章。