tofacebook.com -专业IT技术社区(贪吃蛇学院) html转png Web程序 - 贪吃蛇学院-专业IT技术平台
140°

html转png Web程序

标签:z-index   rgb   ice   asto   detail   port   radius   oda   logo   

/*海报弹窗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" >李达康</li>
<li class="font16 mt10"><img class="saosaoicon" src="<!--{$skinUrl}-->images/xlhb_icon_dinahu.png" >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>

html转png

标签:z-index   rgb   ice   asto   detail   port   radius   oda   logo   

原文地址:https://www.cnblogs.com/holy-amy/p/8566898.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: