html2canvas截取元素时,元素背景的background-size值为contain时截取不到
//我设置的div的样式,其中backgroundSize的值为contain
const noDataStyle = {
width: '100%',
height: 'calc(100% - 2.2rem)',
backgroundImage: `url(${require('../../../images/noData.png')})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'contain'
};
<div style={noDataStyle}></div>
这种情况下可以生成canvas,但是canvas是空的
//如果将background改为img, 例如:
css:
.noDataStyle {
width: 100%;
height: calc(100% - 2.2rem);
}
.noDataStyle > img{
width: 100%;
height: 100%;
object-fit: contain;
}
html:
<div className="noDataStyle"}>
<img src={`${require('../../../images/noData.png')}`}/>
</div>
这种情况,可以生成canvas,并且canvas中有这张图片,但是图片的object-fit:contain失效