将隐藏的DIV保存为画布图像 [英] Save hidden DIV as canvas image
本文介绍了将隐藏的DIV保存为画布图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用以下代码将可见文件保存为图像.
I used the following code to save the visible as image.
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas);
}
});
有什么方法可以保存隐藏的
Is there any way that I can able to save the hidden
推荐答案
有一些解决方案,例如显示属性切换或在隐藏元素内部进行渲染.
There are some solutions out there, like for example display property toggle, or render inside hidden element.
快速切换可见性属性
const el = document.querySelector('.specific');
el.style.display = "block"; // or any other property, like opacity, visibility...
html2canvas(el, {...}).then((canvas) => {
el.style.display = "none";
};
解决方案2
在不可见的包装纸中包裹div(并使其可见)
Solution 2
Wrap your div (and make it visible) inside an invisible wrapper
<div style="position: absolute; opacity: 0; pointer-events:none;">
<div class="specific"></div>
</div>
或
<div style="overflow: hidden; height: 0;">
<div class="specific"></div>
</div>
解决方案3
使用html2canvas onclone回调函数,您可以修改传递给渲染器的对象(我认为这是最好的解决方案)
Solution 3
Using html2canvas onclone callback function you can modify object passed to renderer (I think it's the best solution)
html2canvas(document.querySelector('.specific'), {
onclone: function(doc){
doc.style.display = 'block';
// or doc.style.opacity = '1', doc.style.visibility = 'visible' ...
},
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas);
}
});
这篇关于将隐藏的DIV保存为画布图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文