html2canvas截取元素时

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失效

阅读 2.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进