/*海报弹窗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>

随机推荐

  1. 20201101gryz模拟赛解题报告

    写在前面 2020rp++ 停课的第一场模拟赛 拿上一年的上一年的day1来考的, 结果得分期望220pts,实际135pts,rank3,太菜了 考着考着机房灯突然灭了,当时慌的一批 以为断电代码要 ...

  2. Docker监控平台prometheus和grafana,监控redis,mysql,docker,服务器信息

    Docker监控平台prometheus和grafana,监控redis,mysql,docker,服务器信息 一.通过redis_exporter监控redis 1.1 下载镜像 1.2 运行服务 ...

  3. 高性能Web框架

    不管 Web 前端架构运行机制还是 Web 后端架构中,网络是必不可少的且占分量很重.用户通过网络访问 Web 服务器,Web 后端架构中各种服务之间通过网络来进行通信和协作,网络是现代 Web 应用 ...

  4. 使用Spring MVC实现文件上传与下载

    前段时间做毕业设计的时候,想要完成一个上传文件的功能,后来,虽然在自己本地搭建了一个ftp服务器,然后使用公司的工具完成了一个文档管理系统:但是还是没有找到自己想要的文件上传与下载的方式. 今天看到一 ...

  5. Spring Security原理分析:系列集合

    Spring Security 工作原理概览:https://blog.csdn.net/u012702547/article/details/89629415 spring security执行原理 ...

  6. cmath取整函数

    #include <iostream> #include <cmath>//头文件 using namespace std; int main () { double n; c ...

  7. zoj3494 BCD Code(AC自动机+数位dp)

    Binary-coded decimal (BCD) is an encoding for decimal numbers in which each digit is represented by ...

  8. python代理池的构建4——mongdb数据库的增删改查

    上一篇博客地址:python代理池的构建3--爬取代理ip 一.mongdb数据库的增删改查(Mongo_pool.py) #-*-coding:utf-8-*- ''' 实现代理池的数据库模块 ●作 ...

  9. MHA 高可用介绍

    目录 MHA 介绍 MHA 简介(Master High Availability) MHA 工作原理(转载) MHA 架构 MHA 工具 Manager 节点 Node 节点 MHA 优点 MHA ...

  10. mssql数据库提权(xp_cmdshell)

    1.关于 "xp_cmdshell" "存储过程":其实质就是一个"集合",那么是什么样的结合呢,就是存储在SqlServer中预先定义好的 ...