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 ...
随机推荐
- SQL Server系统函数：类型转换函数
原文:SQL Server系统函数:类型转换函数 1.基本的转化 SELECT CAST(2008 as varchar(4)) + ' year!' SELECT CONVERT(varchar(4 ...
- NodeJs 的Module.export 和 export
NodeJs 的Module.export 和 export 是一样的. 但是Module.export ={....} 可以起效,.export ={....} 是失效的. 这里的export ...
- SIFT算法研究
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://underthehood.blog.51cto.com/2531780/65835 ...
- 基于【 centos7】一 || 安装ELK
一.安装jdk 上传安装包并解压:tar -zxvf ... 配置环境变量: 在配置文件中添加如下配置信息:vi /etc/profile export JAVA_HOME=/usr/local/jd ...
- CAS客户端认证流程
CAS登陆流程 Step 1:浏览器向CAS客户端发起登陆请求,CAS客户端生成“登陆URL”,并把浏览器重定向到该URL 登陆URL: https://${cas-server-host}:${ca ...
- iOS有哪些数据类型/基本数据类型？
简述 本文主要探究使用OC作为iOS开发语言时,我们能使用哪些数据类型. 一切类型始于C. C语言的类型 基本数据类型: 基本数据类型(fundamental data types)也叫原始数据类型( ...
- MySQL锁表解决方法
https://blog.csdn.net/a5582ddff/article/details/79566678 MySQL锁表解决方法 一.我的处理过程 1.查进程,主要是查找被锁表的那个进程的ID ...
- js 五 jquery的使用，调用
4 this 关键字 this 表示当前函数或方法的调用者 1 全局函数由window调用,所以全局函数中的this 指的是window对象 2 事件处理函数中使用this,指的是当前事件的触发对象 ...
- NORDIC 烧录BLE协议栈后不能用JLINK仿真bootloader问题及修改方案
问题原因: bootloader的程序区域是0X78000~0X7E000 但是在bootloader程序中定义了0X0FF8与0XFFC位置处的数据,此数据与BLE协议栈冲突,BLE协议栈的flas ...
- I2C总线、设备、驱动
I2C总线.设备.驱动 框架 I2C驱动框架可分为3个部分,分别是:I2C核心层.I2C总线驱动层(适配器层)以及I2C设备驱动层: I2C核心层 提供了统一的I2C操作函数,主要有两套函数smbus ...