将dom生成图片时遇到的坑 html2canvas.js

将dom生成canvas并转为图片，生成canvas时，会有一些css样式不被识别，就是说，你用css绘制时是成功的，但是在生成canvas时，样式会丢失。

 

 

 

 

如上图所示，红框内的样式，一开始是用这种方式实现的

<div class="user_info">
    <div class="user_hearder">
        <img class="width100 block" v-bind:src="user.portrait">
    </div>
    <div class="user_nick_name"> <span>{{user.nick_name}} </span> <span>向你推荐</span> </div>
</div>

.user_info{
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
}
.user_hearder{
    z-index:13;
}
.user_hearder img{
    box-sizing: border-box;
    width: 40px;
    border: 3px solid #ffffff;
    border-radius: 50px;
}
.user_nick_name{
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    line-height: 35px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 0px 25px 25px 0px;
    margin-left: -15px;
    padding-left: 30px;
    padding-right: 15px;
}

这样的话样式上是没有问题的，右边的半透明正好被左边的头像覆盖住一部分,但是在生成canvas时就出现了问题。canvas生成插件html2canvas.js根本不识别z-index样式，出现了右边的半透明盖在了头像上面，导致样式错乱。

然后就改成了下面的样式布局

<div class="user_info">
    <div class="user_nick_name">
        <span>{{user.nick_name}} </span>
        <span>向你推荐</span>
    </div>
    <div class="user_hearder">
        <img class="width100 block" v-bind:src="user.portrait">
    </div>
</div>

.user_info{
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.user_hearder{
}
.user_hearder img{
    box-sizing: border-box;
    width: 40px;
    border: 3px solid #ffffff;
    border-radius: 50px;
}
.user_nick_name{
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    line-height: 35px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 0px 25px 25px 0px;
    margin-left: -15px;
    padding-left: 30px;
    padding-right: 15px;
}

这样，布局上，头像写在“***向您推荐”后面，然后运用盒模型，flex-direction: row-reverse;样式改变主轴的方向（即项目的排列方向），这样生成的canvas就是正确的了。