html转png

/*海报弹窗2018-3-14*/
.diglogimg{position: fixed;top:0;left:0;z-index: 99;width: 100%;height: 100%;background: rgba(0,0,0,.7);display: none}
#d-header{position: relative;margin: 1.875rem .875rem 1.25rem .875rem;}
#detail-dialog{margin: 1.875rem 0rem 1.25rem 0rem;}
#detail-dialog .wd-xq-swiper{height: 12rem}
#detail-dialog .swiper-wrapper img{height: 100%!important;}
#d-header img{-webkit-border-radius: 3px;border-radius: 3px}
.diglogimg p{color: #fff;font-size: .7rem;text-align: center}
.zhiwen{position: absolute;width: .8rem;height: 1rem;margin-top:2px;margin-left:-20px;background: url("../images/new/xlhb_icon_zhiwen.png") no-repeat;background-size: contain}
.detail-dialog{}
.detail-dialog .dialog-head{position: relative;}
.detail-dialog .banner-price{position: absolute;right: 0;bottom:.75rem;z-index: 99;height: 2rem;line-height: 2rem;padding: 0 10px 0 4px;font-size: .9rem;color:#fff;background: #16BFEF;border-radius: .4rem 0 0 .4rem;}
.detail-dialog .dialog-content{background: #fff;}
.detail-dialog .dialog-content p{margin-top: 5px}
.detail-dialog .dialog-content h3{font-family: PingFangSC-Regular;font-size: .8rem;line-height: .9rem}
.detail-dialog .go-days{padding:0 0 .75rem .75rem;border-bottom: 1px solid #CFD3DB;}
.detail-dialog .go-days span{padding: 4px 10px;color:#fff;background: #FF807A;}
.detail-dialog .go-days strong{padding: 4px 10px;background: #FEC83D;}
.detail-dialog .saosao{margin-left: .75rem}
.detail-dialog .saosao{margin-top: .8rem}
.saosaoicon{width: .7rem;height: .75rem;display: inline-block;margin-right: .5rem;vertical-align: middle}
.detail-dialog .dialog-saosao  .imgsaosao{width:4.5rem;height: 4.5rem}
.dialogClose{position: absolute;right:-8px;top:-11px;z-index: 9;width: 1.1rem;height: 1.1rem;background: url(../images/new/xlhb_btn_del.png) no-repeat;background-size: contain}
#linepost{background: #fff;padding: .75rem 0 .925rem 0;margin: 0 0.875rem;border-bottom: 1px solid #CFD3DB;-wenkit-border-radius: 3px;;border-radius: 3px;}
#linepost .postdetail{padding: 0 2.5rem}
#linepost .border-default1px{padding:.75rem 2.5rem 0 2.5rem}
#linepost .header-logo img{width: 2.5rem;height: 2.5rem;margin: 0 auto}
#linepost .linesao img{width: 10rem;height: 10rem;margin: 0 auto}
/*end*/

<!--海报弹窗-->
<div class="diglogimg diglogimg2">
    <div id="d-header">
        <span class="dialogClose"></span>
        <div id="linepost">
            <div class="postdetail">
                <div class="header-logo"><img src="<!--{$skinUrl}-->/images/home_img_del_kefu.png" /></div>
                <p class="font16 mt15 color333">王小明的微店</p>
                <h3 class="font24 mt10">优选旅游线任你选</h3>
                <div class="mt15 linesao"><img src="line.getQRcode.html?url=<!--{$Url}-->" /></div>
                <p class="color999 mt15 left">扫码关注，优选旅游线任你挑</p>
            </div>
            <ul class="mt15 border-default1px">
                <li class="font16 "><img class="saosaoicon" src="<!--{$skinUrl}-->images/xlhb_icon_geren.png" alt="">李达康</li>
                <li class="font16  mt10"><img class="saosaoicon" src="<!--{$skinUrl}-->images/xlhb_icon_dinahu.png" alt="">13008892881</li>
            </ul>
        </div>
    </div>
    <p><i class="zhiwen"></i>长按图片保存至相册</p>
</div>
<!--end-->

//绘制海报2
// $("XX").click(function () {
//     $(".diglogimg2").show();
//     drawImgPost()
// });

//海报截图
function drawImgPost() {
    //绘制html转到图片
    html2canvas($('#linepost'),{
        onrendered: function(canvas) {
            //document.body.appendChild(canvas);
            convertCanvasToImage2(canvas);
        }
    })
    function convertCanvasToImage2(canvas) {
        var linepost=$('#linepost');
        var image = new Image();
        image.src = canvas.toDataURL("image/png");console.log(image);
        linepost.css({"padding":"0"});
        linepost.html(image);
        return image;
    };
}

<script src="<!--{$skinUrl}-->js/jquery-1.9.1.min.js"></script>
<script src="<!--{$skinUrl}-->js/html2canvas.min.js"></script>

转载于:https://www.cnblogs.com/holy-amy/p/8566898.html