记html2canvas采坑记，为何生成的canvas样式与html中的不同
目标：
1.想要让canvas中的图片正常显示，不能使用backgroundImage，而且最好不要使用div嵌套img标签，直接使用img。
2.能不使用定位就不使用定位（最好用margin、padding表现dom元素的位置），如果想使用，就在此定位元素外嵌套一个position：relative的标签。(大神告诉我用定位是最好的，下次测试一下，margin/padding需要计算的东西太多了)
3.chrome和别的浏览器生成的canvas关于样式的表现是不同的。
月重复的活动
-
辽宁 大连
-
03/22 — 07/29
￥32
小北户外
扫描二维码和我一起去玩吧
.u-selection-wrap .shadow {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.u-selection-wrap {
position: fixed;
z-index: 9;
top: 0;
bottom: 0;
left: 0;
padding-top: 88px;
width: 100%;
}
.u-selection-wrap .u-selection-poster-content {
position: absolute;
top: 50%;
left: 50%;
margin-left: -312px;
margin-top: -450px;
z-index: 2;
width: 624px;
height: 900px;
background: white;
border-radius: 20px;
box-sizing: border-box;
padding: 20px;
}
.u-selection-wrap .u-selection-poster-content .cover-img {
width: 582px;
height: 388px;
margin: 0 auto;
}
.u-selection-wrap .u-selection-poster-content .cover-img img {
width: 100%;
height: 100%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.cover-img {
width: 582px;
height: 388px;
margin: 0 auto;
}
.cover-img img {
width: 100%;
height: 100%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.title {
max-height: 88px;
font-size: 30px;
line-height: 42px;
overflow: hidden;
margin: 17px 0;
}
.info {
color: #848484;
line-height: 50px;
}
.price {
margin-top: 20px;
padding: 0 20px;
height: 40px;
background: rgba(253, 124, 103, 1);
border-radius: 25px;
line-height: 40px;
font-size: 32px;
color: #fff;
display: inline-block;
}
.poster-bottom {
position: absolute;
bottom: 40px;
width: 100%;
}
.avatar {
position: absolute;
bottom: 5px;
width: 76px;
height: 76px;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14);
border: 4px solid rgba(255, 255, 255, 1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #fff;
}
.avatar img {
position: relative;
width: 76px;
height: 76px;
border-radius: 50%;
}
p {
position: relative;
margin-left: 100px;
}
.qrcode {
position: absolute;
bottom: 0;
right: 40px;
height: 102px;
width: 102px;
border: 9px solid #fff;
}
.qrcode img {
height: 102px;
width: 102px;
}
//此style，在chrome上显示正常，别的浏览器正常设置定位即可，不明白到底什么原因var poster = document.getElementById('poster');
html2canvas(poster, {
useCORS: true,
logging: true,
// canvas: canvas
}).then(function (canvas) {
document.body.appendChild(canvas);
var url = canvas.toDataURL('image/png').split(',')[1];
//url是base64
})