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 ...
随机推荐
- java 传入用户名和密码并自动提交表单实现登录到其他系统
不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import ...
- HighChart中的tooltip的第一行数字明显比其他的字要小
问题:HighChart中的tooltip的第一行数字明显比其他的字要小. 解决办法 headerFormat:'<span style="font-size: 14px;font-f ...
- 如何用HAProxy+Nginx实现负载均衡
一.什么是HAProxy HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点, ...
- apidoc 工具的使用
使用rest framerok时,需要写API接口文档,此时就需要用到 apidoc(个人觉得这个用的比较顺手) 需要安装nodejs,,, windows 下 1 然后验证是否安装成功 node ...
- linux三剑客grep，sed，awk
grep 官方帮助文档 Usage: grep [OPTION]... PATTERN [FILE]... Search for PATTERN in each FILE or standard in ...
- JDK8 dockerfile
# AlpineLinux with a glibc-2.28-r0 and Oracle Java 8FROM hub.devops.docker.com/library/alpine-glibc: ...
- Server SAN
http://blog.sina.com.cn/s/blog_5946bd590102veni.html http://blog.sina.com.cn/s/blog_5946bd590102vemm ...
- Oracle 11g Dataguard 配置，维护与详解 (ADG)
一.前言: 本手册主要记录如何配置,还介绍了配置原因,以及注意要点,已经主备切换,以及故障转移等重要操作步骤,我希望这个文章可以作为进行dataguard配置的一个参考手册. 二.前提 1.主库是归档 ...
- SpringBoot LoggerFactory is not a Logback LoggerContext but Logback is on the classpath
SpringBoot 在启动项目的时候一起错误: SLF4J: Class path contains multiple SLF4J bindings.SLF4J: Found binding in ...
- jade反编译，把html编译成jade
通过上面的学习,了解了一个jade模板怎么编译成一个html页面,现在介绍一个工具,怎么把html页面编译成一个jade模板 命令行 npm install html2jade -g 安装到全局 第一 ...