angular：html2canvas对ion-avatar节点渲染不正确

Cloud Flower

已于 2023-09-09 14:41:28 修改

阅读量160

点赞数

分类专栏： Angular 文章标签：前端 javascript angular

于 2023-09-08 20:50:23 首次发布

本文链接：https://blog.csdn.net/qq1090504117/article/details/132767300

版权

Angular 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

问题：

如题

解决办法：

简单实现头像遮罩

<div class="ion-avatar" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden">
  <img src="" alt=""/>
</div>

<style>
  .ion-avatar-copy {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

从实际效果来看，ion-avatar做了一些优化，在缩小图片时，细节显示的更楚，而普通的img是稍模糊些的。

具体原因得看源码，暂时定位到object-fit无法在canvas2html中体现