Js 之将html转为图片html2canvas
一、效果图
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*海报生成开始*/
.html-haibao-btn {
cursor: pointer;
font-size: 0.7em;
padding: 7px;
border-radius: 30px;
position: fixed;
top: 30%;
right: 10px;
z-index: 999;
background: #ff8f22;
color: #fff;
line-height: 1;
}
.tc-template__bg {
background: #03a9f4 !important;
}
.tcui-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
}
@media screen and (min-width: 1024px) {
.tcui-dialog {
width: 35%;
}
}
.tcui-dialog {
position: fixed;
z-index: 5000;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.tcui-dialog__bd {
padding: 0 1.6em 0.8em;
min-height: 40px;
font-size: 15px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #999999;
}
.tcui-dialog__ft {
position: relative;
line-height: 48px;
font-size: 18px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.tcui-dialog__btn {
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
color: #3CC51F;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
position: relative;
} .tcui-mask_transparent {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0
}
.tcui-toast {
position: fixed;
z-index: 5000;
width: 7.6em;
min-height: 7.6em;
top: 180px;
left: 50%;
margin-left: -3.8em;
background: rgba(40,40,40,0.75);
text-align: center;
border-radius: 5px;
color: #FFFFFF
}
.tcui-loading {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background:transparent url('/mobile/image/loading.gif')no-repeat;
background-size: 30px;
background-position: center;
}
.tcui-icon_toast {
margin: 22px 0 0;
display: block
}
.tcui-icon_toast.tcui-icon-success-no-circle:before {
color: #FFFFFF;
font-size: 55px
}
.tcui-icon_toast.tcui-loading {
margin: 30px 0 0;
width: 100%;
height: 38px;
vertical-align: baseline
}
.tcui-icon_toast.tcui-icon-info,.tcui-icon_toast.tcui-icon-cancel {
font-size: 55px;
color: #FFF
}
.tcui-toast__content {
margin: 5px 0 15px;
color: #fff;
}
.tcui-dialog__ft:after {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.html-haibao-box {
width: 100%;
position: absolute;
top: -10000px;
z-index: 999;
background: #fff;
}
.html-haibao-box .haibao-pic {
width: 100%;
max-height: 300px;
overflow: hidden;
}
.html-haibao-box .haibao-pic img {
width: 100%;
height: auto;
}
.html-haibao-box .haibao-title {
line-height: 25px;
font-size: 1.2em;
padding: 10px;
color: #000;
}
.html-haibao-box .haibao-zuozhe {
width: 100%;
height: 25px;
margin-top: 10px;
margin-bottom: 15px;
color: #2b95d3;
}
.html-haibao-box .haibao-zuozhe-right {
float: right;
}
.html-haibao-box .haibao-zuozhe-right .zuozheby {
float: left;
line-height: 25px;
margin-right: 10px;
color: #d8d8d8;
}
.html-haibao-box .haibao-zuozhe-right .zuozhelogo {
width: 25px;
height: 25px;
float: left;
margin-right: 5px;
}
.html-haibao-box .haibao-zuozhe-right .zuozhelogo img {
width: 25px;
height: 25px;
object-fit: cover;
border-radius: 100%;
}
.html-haibao-box .haibao-zuozhe-right .zuozhename {
float: left;
line-height: 25px;
margin-right: 20px;
}
.html-haibao-box .haibao-zuozhe-left {
float: left;
margin-left: 15px;
}
.html-haibao-box .haibao-zuozhe-left .dian {
width: 5px;
height: 5px;
background-color: #d8d8d8;
border-radius: 100%;
float: left;
margin-right: 5px;
margin-top: 9px;
} .html-haibao-box .haibao-footer {
width: 100%;
height: 91px;
background-color: #f8f8f8;
border-top: 1px solid #eee;
padding: 10px;
float: left;
}
.html-haibao-box .haibao-footer .qrcode {
width: 70px;
height: 70px;
float: left;
}
.html-haibao-box .haibao-footer .qrcode img {
width: 70px;
height: 70px;
float: left;
}
.html-haibao-box .haibao-footer .desc {
float: left;
margin-left: 10px;
}
.html-haibao-box .haibao-footer .desc .desc_msg {
line-height: 40px;
font-size: 1em;
color: #999;
}
.html-haibao-box .haibao-footer .desc .siteinfo {
font-size: 1.05em;
color: #333;
height: 20px;
line-height: 20px;
width: 290px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_left {
margin-bottom: -1px;
width: 5px;
height: 13px;
margin-left: 6px;
margin-right: 5px;
display: inline-block;
border-top: 2px solid #666;
border-left: 2px solid #666;
}
.html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_right {
width: 5px;
height: 13px;
margin-left: 4px;
display: inline-block;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
margin-bottom: -3px;
}
/*海报生成结束*/
body{
height: 100%;
}
.content{
height: 2000px;
overfow-y: auto;
}
</style>
</head>
<body>
<div id="html-haibao-btn" class="html-haibao-btn tc-template__bg">生成<br>海报</div>
<div class="js_dialog" id="showHaibaoBox" style="display: none;">
<div class="tcui-mask"></div>
<div class="tcui-dialog">
<div class="tcui-dialog__bd" style="padding:0;line-height: 40px;color: #999;border-bottom: 1px solid #eaeaea;">
长按图片保存海报
</div>
<div class="tcui-dialog__bd" id="id_haibao_img" style="padding:0;">
<img style="max-width: 100%;" src="">
</div>
<div class="tcui-dialog__ft">
<a href="javascript:;" class="tcui-dialog__btn tcui-dialog__btn_primary">知道了</a>
</div>
</div>
</div>
<div id="loadingHaibao" style="display:none;">
<div class="tcui-mask_transparent"></div>
<div class="tcui-toast">
<i class="tcui-loading tcui-icon_toast"></i>
<p class="tcui-toast__content">海报生成中...</p>
</div>
</div>
<div id="html-haibao-box" class="html-haibao-box">
<div class="haibao-pic">
<img style="max-width: 100%" src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg">
</div>
<div class="haibao-title">{$title}</div>
<div class="haibao-zuozhe">
<div class="haibao-zuozhe-left">
<div class="dian"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>
<div class="haibao-zuozhe-right">
<div class="zuozheby">Author</div>
<div class="zuozhelogo"><img src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg"></div>
<div class="zuozhename">{$user_info['company']}</div>
</div>
</div>
<div class="haibao-footer">
<div class="qrcode"><img style="max-width: 100%;" id="html-haibao-qrcode" src=""></div>
<div class="desc">
<div class="desc_msg">长按二维码识别阅读全文</div>
<div class="siteinfo">来自<span class="kuohao_left"></span>同城头条·乐清优选<span class="kuohao_right"></span>
</div>
</div>
</div>
</div>
<div class="content">
111
</div>
</body>
<script type="text/javascript" src="http://www.boyuan.com/mobile/static/lib/jquery/jquery-2.1.1.min.js"></script>
<script src="./html2canvas/html2canvas.min.js"></script> </html> <script>
$("#html-haibao-btn").click(function () {
$('#loadingHaibao').fadeIn(100);
setTimeout(function(){loadHaibao();},100);
});
$(".tcui-dialog__btn").click(function () {
$('#showHaibaoBox').fadeOut(200);
})
function loadHaibao() {
var share_url = window.location.href;
$.ajax({
type: 'post',
url: '/api/a/getHaiBao.php?action=article',
data: {
share_url: share_url,
itemid: 523
},
dataType: 'json',
success: function (res) {
if (res.code == 0) {
$("#html-haibao-qrcode").attr("src", res.qrcode);
html2canvas(document.querySelector("#html-haibao-box"), {allowTaint: false, y: "-10000"}).then(function(canvas) {
console.log(canvas);
var dataURL = canvas.toDataURL();
$('#id_haibao_img img').attr('src', dataURL);
$('#showHaibaoBox').fadeIn(200);
$('#loadingHaibao').fadeOut(100);
}); }else{
layer.open({
content: res.msg
, skin: 'msg'
, time: 2 //2秒后自动关闭
});
}
},
error: function(){ },
complete: function () { }
})
}
</script>
三、插件下载地址
http://html2canvas.hertzen.com/
Js 之将html转为图片html2canvas的更多相关文章
- js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- C#实现 word、pdf、ppt 转为图片
office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...
- Sequence.js - 适合电子商务网站的图片滑块
Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...
- 将UIWebView显示的内容转为图片和PDF
今天开发MarkEditor时要用到将 UIWebView 中显示的内容转为图片,方便转发到各个社交网络(Twiiter,Facebook,Weibo),这样内容就不受长度限制,类似于长微博. 之前关 ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- word、pdf、ppt 转为图片
office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- Android View转为图片保存为本地文件，异步监听回调操作结果；
把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...
随机推荐
- 移动端 H5 上拉刷新，下拉加载
http://www.mescroll.com/api.html#options 这里有几个重要的设置 1.down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决 2.up 中的 a ...
- 使用IP代理初体验
在很多时候我们需要用到IP代理,比如爬虫.投票等 封IP是一种很常用的办法,所谓道高一尺.魔高一丈,IP代理应运而生 最简单的一段代码 static void Main(string[] args) ...
- 【原创】大叔经验分享（84）spark sql中设置hive.exec.max.dynamic.partitions无效
spark 2.4 spark sql中执行 set hive.exec.max.dynamic.partitions=10000; 后再执行sql依然会报错: org.apache.hadoop.h ...
- Pyhon中迭代器与生成器
迭代器 我们知道,可以直接用for循环的数据类型有以下几种: 一类是集合数据类型:list.tuple.dict.set.str等 一类是generator:包括生成器和带yield的generato ...
- react中key值的理解
react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据 ...
- PHP常见算法
算法的概念:解决特定问题求解步骤的描述,在计算机中表现为指令的有限序列,并且每条指令表示一个或多个操作.一个问题可以有多种算法,每种算法都不同的效率.一个算法具有的特征:有穷,确切,输入,输出,可行 ...
- FlowPortal BPM 验证组的使用方法
1.在表单上指定验证组 2.在流程上指定验证组 3.启用多个验证组 流程审批线上设置验证组时可以设置多个验证组,多个验证组之间以分号分割,如:AAA;BBB.
- XML文件解析之JDOM解析
1.JDOM介绍 JDOM的官方网站是http://www.jdom.org/,JDOM解析用到的jar包可以在http://www.jdom.org/dist/binary/中下载,最新的JDOM2 ...
- selenium重定向新窗口
1.跳转新窗口 # 浏览器跳转新窗口后,selenium绑定新窗口 print('页面跳转后重新绑定selenium.') time.sleep(3) search_window = driver.c ...
- Mycat详解及配置读写分离(Centos7)
目录 一.理论概述 二.环境 三.部署 一.理论概述 原理简述 参考文档 MyCAT主要是通过对SQL的拦截,然后经过一定规则的分片解析.路由分析.读写分离分析.缓存分析等,然后将SQL发给后端真实的 ...