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 ...
随机推荐
- linux 添加硬盘找不到使用/sys/class/scsi_host/host/scan
添加磁盘到dg--首先通知存储管理员划分相应的盘到指定的机器,说明共享--扫描磁盘(两个节点执行)[root@testrac1 ~]# echo "- - -" > /sys ...
- Unity 宽度适配 NGUI
这是很久之前写的一篇Note,现在移到Blog上来,可能有些参数,NGUI插件等等不和现在版本相同.不过大概的思路应该不会错. ps: 可能有部分內容是摘抄自其他作者,没办法考证了,如有请务必联系我. ...
- SQL将同样标识的查询结果查重并用逗号拼接
SELECT B.TaskID , LEFT(SamList, LEN(SamList) - 1) AS ResultListFROM ( SELECT TaskID , ( SELECT Sampl ...
- 6.显示锁Lock 和 线程通信Condition
显示锁 Lock 一.用于解决多线程 安全问题的方式: synchronized: 1.同步代码块 2.同步方法 jdk1.5 后:第三种:同步锁Lock (注意:同步(synchro ...
- ImportError: No module named yaml
问题: import yaml ImportError: No module named yaml 解决: wget http://pyyaml.org/download/pyyaml/PyYAML- ...
- Linux下的库文件搜索路径
对于以压缩包发布的软件,在它的目录下通常都有一个配置脚本configure,它的作用确定编译参数(比如头文件位置.连接库位置等),然后生成Makefile以编译程序.可以进入该软件的目录,执行 ...
- (转载)关于FLASH寿命的读写方法
NOR(或非)和NAND(与非)是市场上两种主要的Flash闪存,sNORFLASH 和CPU之间不需要其他电路控制,NOR flash可以芯片内执行程序,而NAND FLASH 和CPU 的接口必须 ...
- centos下关闭自动锁屏
自己这段时间在学习Linux,选用的系统的为CentOS,在实际操作过程中遇到问题,在无任何操作情况下,系统过一段时间自动锁屏需要重新输入密码.经过多次尝试以后终于成功!解决方法如下: Setting ...
- vs看源代码
资源地址:https://www.cnblogs.com/HouZhiHouJueBlogs/p/4274197.html 资源地址:http://referencesource.microsoft. ...
- 1.caffe初入
1.FrameWork of Caffe Caffe是一种编程框架,内部提供了一套编程机制,或者说一个模板框架,用以实现GPU并行架构下的机器学习,DeepLearing等算法,能在性能上大幅度提升, ...