标签：html2canvas canvas html5-canvas css javascript

我提取几个分布在页面上的块,通过CanvasRenderingContext2D.drawImage()将它们绘制到画布上,然后将画布导出为PDF / JPG.

现在,在绘制它们时,我还想整理它们的外观和/或移除/显示某些块的部分,因为从静态的角度来看,样式不再有意义.

我可以在body上附加一个类,而body具有该类时,样式块会有所不同,构建画布,将其导出为选择的内容类型并删除body类,但这会使页面在1-2秒钟内显得古怪. (我想我可以用装载机盖住页面)

我可以克隆该块,对其进行不同的样式设置或应用任何样式(内联或通过类)并从中绘制图像,但这并不是最佳选择.

关于如何正确执行此操作的任何想法？我倾向于进行类似仿真的工作.在本地@print下具有整个“导出样式”,并在将块绘制到画布上之前进行模拟,而不会影响浏览器中呈现的内容,但是我不确定是否可行.

解决方法:

我知道这些方法不能回答您的特定问题,但是也许这些是解决问题的可行方法.

听起来您正在尝试使某些内容可打印.我认为这是由某种用户交互触发的,所以…

这意味着您有一些界面选项.例如,您可以通过在整个事物上放置一个模态来“隐藏”屏幕,并显示一条消息“仅处理片刻”.然后,主体(或其他元素)类解决方案开始工作.

您可以按照建议复制元素.如果您选择这种方式,我会在更改副本时将副本移出屏幕.

 .element {
   position: fixed;
   left: -100vw;
 }

不知道需要重复多少次,很难推荐该选项.

或者,您可以将工作量转移到service worker吗？这将需要将副本与DOM完全分离并在另一个线程中运行的副本复制到内存中.

不过,这是一个非常有趣的问题！

标签：html2canvas,canvas,html5-canvas,css,javascript
来源： https://codeday.me/bug/20191210/2105155.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。