更改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