把html页面转化成图片——html2canvas

test.html
　　　　　　　　　　　　<div class="fx_zhezhao"></div>
                    <div class="myImg">
                        <img class="fx_off" src="/public/static/mobile/imgs/off.png">
                        <img class="fx_convas">
                    </div>
                    <div  class="fx_page">
                        <img class="fx_img" src="/public/static/mobile/image/touxiang.jpg">
                        <div class="fx_name">miss张miss张miss张miss张miss张miss张miss张miss张</div>
                        <div class="fx_price">￥9999.99</div>
                        <img class="fx_ma" src="/public/static/mobile/image/code.png">
                        <div class="fx_text">点击二维码图片，长按保存分享到好友或朋友圈</div>
                    </div>

test.css
/*我要分享开始*/
.fx_img{
    width: 100%;
}
.fx_page{
    position: relative;
    z-index: 100;
}
.fx_name{
    margin-left: 10px;
    font-size: 16px;
    margin-top: 5px;
    width: calc(80% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx_price{
    font-size: 18px;
    color: #b4282d;
    margin-left: 10px;
    margin-top: 10px;
}
.fx_ma{
    width: 46%;
    margin-left: 27%;
    margin-top: 7%;
}
.fx_text{
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: #999;
    margin-top: 5%;
}
.fx_zhezhao{
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
}
.myImg{
    width: 80%;
    left: 10% !important;
    position: absolute;
    top: 5%;
    left: 0px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    display: none;
    z-index: 9999;
}
.fx_convas{
    width: 100%;
}
.fx_off{
    width: 24px;
    height: 24px;
    position: absolute;
    right: -12px;
    top: -12px;
}
canvas{
    display: none;
}
/*我要分享结束*/

test.js
<script type="text/javascript" src="/public/static/mobile/js/html2canvas.min.js"></script>
<script type="text/javascript">
    $(".fx_page").click(function(){
        var h0 = document.body.clientHeight*0.8;
        console.log(h0);
        html2canvas($(".fx_page"),{ // $(".myImg")是你要复制生成canvas的区域，可以自己选
            useCORS: true,
            onrendered:function(canvas){

                dataURL =canvas.toDataURL();
                $(".page-content").append(canvas);
                console.log(dataURL);
                $(".fx_convas").height(h0);
                $(".fx_convas").attr('src',dataURL);
                $(".fx_zhezhao").show();
                $(".myImg").show();
            },
            background:'#fff'
        })
    })
    $(".fx_off").click(function () {
        $(".fx_zhezhao").hide();
        $(".myImg").hide();
    })
</script>

效果图：

点击 $(".fx_page")后：