html2canvas绘制bug

使用html2canvas的时候,经常出现没出现在屏幕里面的部分就画成黑色,在github上找到了

This issue can be shown as a duplicate of previous issues #542#511#588, etc. However the problem is still open.

Html2canvas is successful when the bounds of the window is never changed and the target element is always %100 visible on the screen. However, this assumption is not always valid. When the bounds of the window is changed or scroll down/up operations only effects the bounds of the defaultView, but the dom structure remains the same after first initiation. In order to fix the problem I applied the following change in the source code and works fine for my case. Hope it can be placed in 0.5.0 release.

  • renderDocument expects the windowWidth and windowHeight values. But the actual values (core.js, line 44) refers to document.defaultView.innerWidth and document.defaultView.innerHeight values. If the size of the view changed, unless your element is a part of the actual document, rendering do not take into consideration of your whole element, it only renders the visible area. If you pass appropriate values, it renders the whole element without any problem.

if you call renderDocument( node.ownerDocument,
options,
options.innerWidth, //first width of the window when the document is created
options.innerHeight,//first heightof the window when the document is created 
index )
like this it works properly.

时间: 2024-10-29 04:38:09

html2canvas绘制bug的相关文章

关于使用html2canvas 绘制图片的坑

html2canvas绘制跨域图片之后,会导致画布被污染,从而无法使用canvas的toDateUrl()等方法获取图片数据的方法,这是canvas的限制而并非html2canvas的原因.好了锅甩好了下面进入正题 公司最近有一个需求,保存一张海报,但是卡在了将绘制后图片转化成base64的个砍上.查了下原因,就是因为绘制了跨域图片,从而导致画布无法导出成数据.行吧既然是跨域,那么就和后台说一下,把特定的图片的Access-Control-Allow-Origin设置成*吧,但是改完之后的结果却

杂项2018-6-8

*js执行顺序优先级process.nextTick > promise.then > setTimeout > setImmediate 原因是使用 Promise.then 添加的回调函数会被放到 microtask 队列中,而 setTimeout 的回调函数会在macrotask .事件循环会先取 microtask 的任务,直到清空.而 macrotask 队列则每次只取一个任务,之后会再次清空 microtask 队列,再取一个 macrotask . * js执行顺序优先级

CGridListCtrlEx

原文出处: http://www.codeproject.com/Articles/29064/CGridListCtrlEx-Grid-Control-Based-on-CListCtrl 另见: https://code.google.com/p/cgridlistctrlex 转载请注明出处! 简介 微软的ClistCtrl提供了以报表的形式在表格中显示数据的功能,但是功能有限, 我们不得不自己扩充一些功能, 如下: Sorting  排序 Cell navigation and keyb

WebGL 绘制Line的bug(一)

熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象. 一切看起来都很完美,perfect. 然而,不幸的是,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(应该是大多数情况下)线宽只能设置为1,而不能设置成其他的值. 通过网址http://alteredqualia.com/tmp/webgl-linewidth-test/,我们可以测试

绘制扇形效果线条小Bug解决

绘制线条基本代码: 变量: CPoint m_ptOrigin;//起点坐标 bool m_bTrue;//检查鼠标左键是否按下 CPoint m_ptOldOrigin;//记录上一次绘制终点坐标,用于绘制边界线 初始化: m_ptOrigin = 0; m_bTrue = false; m_ptOldOrigin = 0; 代码实现: void CDrawView::OnLButtonDown(UINT nFlags, CPoint point){ // TODO: Add your mes

IText&Html2canvas js截图 绘制 导出PDF

Html2canvas JS截图 HTML 1 <div id="divPDF"> 2 需要截图的区域 3 </div> JS 1 <script src="../Js/html2canvas.js"></script> 2 <script type="text/javascript"> 3 4 function getPDF() { 5 html2canvas($('#divPDF')

WebGL 绘制Line的bug(三)

上一篇已经讲述了通过面模拟线条时候,每一个顶点的顶点数据包括:端点坐标.偏移量.前一个端点坐标.后一个端点坐标,当然如果我们通过索引的方式来绘制的话,还包括索引数组,下面的代码通过传递一组线条的端点数组来创建上述相关数据:?```bk.Line3D = function (points,colors){? ? ?this.points = points;? ? ?this.colors = colors;} bk.Line3D.prototype.computeData = function()

Html2canvas - 项目中遇到的那些坑点汇总(更新中...)

水平居中的元素截图后向左跑偏 明明是水平居中的代码,截图出来的会偏左,结构是左图片右文字,有时候是图片自己跑到最左边,有时候是整体偏左一点点 这个问题也不是经常遇到,场景是父div元素text-align=center;内部两个子元素设为display:inline-block的模式.然后画图就会出现左边的div偏左靠或直接在左边的情况. 问题未解决,出现时也没研究因为啥,等有时间的时候就不出现了... 靠背景图露脸的dom们会有底线 截图时,如果有一个dom元素是用背景图填充的,里边没有任何结

使用html2canvas在H5端独立生成图片

前言 流量之于互联网公司,就如同水之于万物一样重要,那么当今国内的移动互联网流量主要集中在哪里呢?答案是显而易见的,那就是我们每天都在使用的微信. 2018年年初,微信的月活用户数已经突破了10亿,成为了国内首个月活超过10亿的产品."3Q大战"之后的腾讯逐渐由封闭走向了开放,而微信作为腾讯在移动互联网时代最重要最成功的战略级产品,也在切实实践着腾讯的开放战略.在这样的大背景下,如何利用好微信内的流量,引导用户去做分享和传播,就成为摆在我们面前的重要课题.但是微信方面基于自身利益以及用