目标：
1.想要让canvas中的图片正常显示，不能使用backgroundImage，而且最好不要使用div嵌套img标签，直接使用img。
2.能不使用定位就不使用定位（最好用margin、padding表现dom元素的位置），如果想使用，就在此定位元素外嵌套一个position：relative的标签。(大神告诉我用定位是最好的，下次测试一下，margin/padding需要计算的东西太多了)
3.chrome和别的浏览器生成的canvas关于样式的表现是不同的。
<section class="u-selection-wrap"> <div class="shadow"></div> <div class="u-selection-poster-content" id="poster"> <div class="u-box"> <div class="cover-img"> <img alt="" src="http://img.saihuitong.com/8/img/22/153d136d872.jpg" class=" "> </div> <div class="title event-title"> <p class="bg">月重复的活动</p> <p class="bg"></p> </div> <ul class="info"> <li class="address f28"> <i class="icon icon-address"></i> 辽宁 大连 </li> <li class="time f28"> <i class="icon icon-calendar"></i> 03/22 — 07/29 </li> </ul> <p class="price">￥32 </p> <div class="poster-bottom"> <div class="avatar"> <img alt="" src="http://st.saihuitong.com/res/img/avatars/system/4_ava025.jpg" class=" "> </div> <p class="sasname f28">小北户外</p> <p class="info">扫描二维码和我一起去玩吧</p> <div class="qrcode"> </div> </div> </div> </div> </section> .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 })
