一、效果图

二、代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.         /*海报生成开始*/
  9.         .html-haibao-btn {
  10.             cursor: pointer;
  11.             font-size: 0.7em;
  12.             padding: 7px;
  13.             border-radius: 30px;
  14.             position: fixed;
  15.             top: 30%;
  16.             right: 10px;
  17.             z-index: 999;
  18.             background: #ff8f22;
  19.             color: #fff;
  20.             line-height: 1;
  21.         }
  22.         .tc-template__bg {
  23.             background: #03a9f4 !important;
  24.         }
  25.         .tcui-mask{
  26.             position: fixed;
  27.             z-index: 1000;
  28.             top: 0;
  29.             right: 0;
  30.             left: 0;
  31.             bottom: 0;
  32.             background: rgba(0,0,0,0.6);
  33.         }
  34.         @media screen and (min-width: 1024px) {
  35.             .tcui-dialog {
  36.                 width: 35%;
  37.             }
  38.         }
  39.         .tcui-dialog {
  40.             position: fixed;
  41.             z-index: 5000;
  42.             width: 80%;
  43.             max-width: 300px;
  44.             top: 50%;
  45.             left: 50%;
  46.             -webkit-transform: translate(-50%,-50%);
  47.             transform: translate(-50%,-50%);
  48.             background-color: #FFFFFF;
  49.             text-align: center;
  50.             border-radius: 3px;
  51.             overflow: hidden;
  52.         }
  53.         .tcui-dialog__bd {
  54.             padding: 0 1.6em 0.8em;
  55.             min-height: 40px;
  56.             font-size: 15px;
  57.             line-height: 1.3;
  58.             word-wrap: break-word;
  59.             word-break: break-all;
  60.             color: #999999;
  61.         }
  62.         .tcui-dialog__ft {
  63.             position: relative;
  64.             line-height: 48px;
  65.             font-size: 18px;
  66.             display: -webkit-box;
  67.             display: -webkit-flex;
  68.             display: flex;
  69.         }
  70.         .tcui-dialog__btn {
  71.             display: block;
  72.             -webkit-box-flex: 1;
  73.             -webkit-flex: 1;
  74.             flex: 1;
  75.             color: #3CC51F;
  76.             text-decoration: none;
  77.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  78.             position: relative;
  79.         }
  80.  
  81.         .tcui-mask_transparent {
  82.             position: fixed;
  83.             z-index: 1000;
  84.             top: 0;
  85.             right: 0;
  86.             left: 0;
  87.             bottom: 0
  88.         }
  89.         .tcui-toast {
  90.             position: fixed;
  91.             z-index: 5000;
  92.             width: 7.6em;
  93.             min-height: 7.6em;
  94.             top: 180px;
  95.             left: 50%;
  96.             margin-left: -3.8em;
  97.             background: rgba(40,40,40,0.75);
  98.             text-align: center;
  99.             border-radius: 5px;
  100.             color: #FFFFFF
  101.         }
  102.         .tcui-loading {
  103.             width: 20px;
  104.             height: 20px;
  105.             display: inline-block;
  106.             vertical-align: middle;
  107.             background:transparent url('/mobile/image/loading.gif')no-repeat;
  108.             background-size: 30px;
  109.             background-position: center;
  110.         }
  111.         .tcui-icon_toast {
  112.             margin: 22px 0 0;
  113.             display: block
  114.         }
  115.         .tcui-icon_toast.tcui-icon-success-no-circle:before {
  116.             color: #FFFFFF;
  117.             font-size: 55px
  118.         }
  119.         .tcui-icon_toast.tcui-loading {
  120.             margin: 30px 0 0;
  121.             width: 100%;
  122.             height: 38px;
  123.             vertical-align: baseline
  124.         }
  125.         .tcui-icon_toast.tcui-icon-info,.tcui-icon_toast.tcui-icon-cancel {
  126.             font-size: 55px;
  127.             color: #FFF
  128.         }
  129.         .tcui-toast__content {
  130.             margin: 5px 0 15px;
  131.             color: #fff;
  132.         }
  133.         .tcui-dialog__ft:after {
  134.             content: " ";
  135.             position: absolute;
  136.             left: 0;
  137.             top: 0;
  138.             right: 0;
  139.             height: 1px;
  140.             border-top: 1px solid #D5D5D6;
  141.             color: #D5D5D6;
  142.             -webkit-transform-origin: 0 0;
  143.             transform-origin: 0 0;
  144.             -webkit-transform: scaleY(0.5);
  145.             transform: scaleY(0.5);
  146.         }
  147.         .html-haibao-box {
  148.             width: 100%;
  149.             position: absolute;
  150.             top: -10000px;
  151.             z-index: 999;
  152.             background: #fff;
  153.         }
  154.         .html-haibao-box .haibao-pic {
  155.             width: 100%;
  156.             max-height: 300px;
  157.             overflow: hidden;
  158.         }
  159.         .html-haibao-box .haibao-pic img {
  160.             width: 100%;
  161.             height: auto;
  162.         }
  163.         .html-haibao-box .haibao-title {
  164.             line-height: 25px;
  165.             font-size: 1.2em;
  166.             padding: 10px;
  167.             color: #000;
  168.         }
  169.         .html-haibao-box .haibao-zuozhe {
  170.             width: 100%;
  171.             height: 25px;
  172.             margin-top: 10px;
  173.             margin-bottom: 15px;
  174.             color: #2b95d3;
  175.         }
  176.         .html-haibao-box .haibao-zuozhe-right {
  177.             float: right;
  178.         }
  179.         .html-haibao-box .haibao-zuozhe-right .zuozheby {
  180.             float: left;
  181.             line-height: 25px;
  182.             margin-right: 10px;
  183.             color: #d8d8d8;
  184.         }
  185.         .html-haibao-box .haibao-zuozhe-right .zuozhelogo {
  186.             width: 25px;
  187.             height: 25px;
  188.             float: left;
  189.             margin-right: 5px;
  190.         }
  191.         .html-haibao-box .haibao-zuozhe-right .zuozhelogo img {
  192.             width: 25px;
  193.             height: 25px;
  194.             object-fit: cover;
  195.             border-radius: 100%;
  196.         }
  197.         .html-haibao-box .haibao-zuozhe-right .zuozhename {
  198.             float: left;
  199.             line-height: 25px;
  200.             margin-right: 20px;
  201.         }
  202.         .html-haibao-box .haibao-zuozhe-left {
  203.             float: left;
  204.             margin-left: 15px;
  205.         }
  206.         .html-haibao-box .haibao-zuozhe-left .dian {
  207.             width: 5px;
  208.             height: 5px;
  209.             background-color: #d8d8d8;
  210.             border-radius: 100%;
  211.             float: left;
  212.             margin-right: 5px;
  213.             margin-top: 9px;
  214.         }
  215.  
  216.         .html-haibao-box .haibao-footer {
  217.             width: 100%;
  218.             height: 91px;
  219.             background-color: #f8f8f8;
  220.             border-top: 1px solid #eee;
  221.             padding: 10px;
  222.             float: left;
  223.         }
  224.         .html-haibao-box .haibao-footer .qrcode {
  225.             width: 70px;
  226.             height: 70px;
  227.             float: left;
  228.         }
  229.         .html-haibao-box .haibao-footer .qrcode img {
  230.             width: 70px;
  231.             height: 70px;
  232.             float: left;
  233.         }
  234.         .html-haibao-box .haibao-footer .desc {
  235.             float: left;
  236.             margin-left: 10px;
  237.         }
  238.         .html-haibao-box .haibao-footer .desc .desc_msg {
  239.             line-height: 40px;
  240.             font-size: 1em;
  241.             color: #999;
  242.         }
  243.         .html-haibao-box .haibao-footer .desc .siteinfo {
  244.             font-size: 1.05em;
  245.             color: #333;
  246.             height: 20px;
  247.             line-height: 20px;
  248.             width: 290px;
  249.             overflow: hidden;
  250.             white-space: nowrap;
  251.             text-overflow: ellipsis;
  252.         }
  253.         .html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_left {
  254.             margin-bottom: -1px;
  255.             width: 5px;
  256.             height: 13px;
  257.             margin-left: 6px;
  258.             margin-right: 5px;
  259.             display: inline-block;
  260.             border-top: 2px solid #666;
  261.             border-left: 2px solid #666;
  262.         }
  263.         .html-haibao-box .haibao-footer .desc .siteinfo span.kuohao_right {
  264.             width: 5px;
  265.             height: 13px;
  266.             margin-left: 4px;
  267.             display: inline-block;
  268.             border-bottom: 2px solid #666;
  269.             border-right: 2px solid #666;
  270.             margin-bottom: -3px;
  271.         }
  272.         /*海报生成结束*/
  273.         body{
  274.             height: 100%;
  275.         }
  276.         .content{
  277.             height: 2000px;
  278.             overfow-y: auto;
  279.         }
  280.     </style>
  281. </head>
  282. <body>
  283. <div id="html-haibao-btn" class="html-haibao-btn tc-template__bg">生成<br>海报</div>
  284. <div class="js_dialog" id="showHaibaoBox" style="display: none;">
  285.     <div class="tcui-mask"></div>
  286.     <div class="tcui-dialog">
  287.         <div class="tcui-dialog__bd" style="padding:0;line-height: 40px;color: #999;border-bottom: 1px solid #eaeaea;">
  288.             长按图片保存海报
  289.         </div>
  290.         <div class="tcui-dialog__bd" id="id_haibao_img" style="padding:0;">
  291.             <img style="max-width: 100%;" src="">
  292.         </div>
  293.         <div class="tcui-dialog__ft">
  294.             <a href="javascript:;" class="tcui-dialog__btn tcui-dialog__btn_primary">知道了</a>
  295.         </div>
  296.     </div>
  297. </div>
  298. <div id="loadingHaibao" style="display:none;">
  299.     <div class="tcui-mask_transparent"></div>
  300.     <div class="tcui-toast">
  301.         <i class="tcui-loading tcui-icon_toast"></i>
  302.         <p class="tcui-toast__content">海报生成中...</p>
  303.     </div>
  304. </div>
  305. <div id="html-haibao-box" class="html-haibao-box">
  306.     <div class="haibao-pic">
  307.         <img style="max-width: 100%" src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg">
  308.     </div>
  309.     <div class="haibao-title">{$title}</div>
  310.     <div class="haibao-zuozhe">
  311.         <div class="haibao-zuozhe-left">
  312.             <div class="dian"></div>
  313.             <div class="dian"></div>
  314.             <div class="dian"></div>
  315.         </div>
  316.         <div class="haibao-zuozhe-right">
  317.             <div class="zuozheby">Author</div>
  318.             <div class="zuozhelogo"><img src="http://www.boyuan.com/file/upload/201906/27/140615762397.jpg"></div>
  319.             <div class="zuozhename">{$user_info['company']}</div>
  320.         </div>
  321.     </div>
  322.     <div class="haibao-footer">
  323.         <div class="qrcode"><img style="max-width: 100%;" id="html-haibao-qrcode" src=""></div>
  324.         <div class="desc">
  325.             <div class="desc_msg">长按二维码识别阅读全文</div>
  326.             <div class="siteinfo">来自<span class="kuohao_left"></span>同城头条&middot;乐清优选<span class="kuohao_right"></span>
  327.             </div>
  328.         </div>
  329.     </div>
  330. </div>
  331. <div class="content">
  332.     111
  333. </div>
  334. </body>
  335. <script type="text/javascript" src="http://www.boyuan.com/mobile/static/lib/jquery/jquery-2.1.1.min.js"></script>
  336. <script src="./html2canvas/html2canvas.min.js"></script>
  337.  
  338. </html>
  339.  
  340. <script>
  341.     $("#html-haibao-btn").click(function () {
  342.         $('#loadingHaibao').fadeIn(100);
  343.         setTimeout(function(){loadHaibao();},100);
  344.     });
  345.     $(".tcui-dialog__btn").click(function () {
  346.         $('#showHaibaoBox').fadeOut(200);
  347.     })
  348.     function loadHaibao() {
  349.         var share_url = window.location.href;
  350.         $.ajax({
  351.             type: 'post',
  352.             url: '/api/a/getHaiBao.php?action=article',
  353.             data: {
  354.                 share_url: share_url,
  355.                 itemid: 523
  356.             },
  357.             dataType: 'json',
  358.             success: function (res) {
  359.                 if (res.code == 0) {
  360.                     $("#html-haibao-qrcode").attr("src", res.qrcode);
  361.                     html2canvas(document.querySelector("#html-haibao-box"), {allowTaint: false, y: "-10000"}).then(function(canvas) {
  362.                         console.log(canvas);
  363.                         var dataURL = canvas.toDataURL();
  364.                         $('#id_haibao_img img').attr('src', dataURL);
  365.                         $('#showHaibaoBox').fadeIn(200);
  366.                         $('#loadingHaibao').fadeOut(100);
  367.                     });
  368.  
  369.                 }else{
  370.                     layer.open({
  371.                         content: res.msg
  372.                         , skin: 'msg'
  373.                         , time: 2 //2秒后自动关闭
  374.                     });
  375.                 }
  376.             },
  377.             error: function(){
  378.  
  379.             },
  380.             complete: function () {
  381.  
  382.             }
  383.         })
  384.     }
  385. </script>

三、插件下载地址

http://html2canvas.hertzen.com/

Js 之将html转为图片html2canvas的更多相关文章

  1. js将文字填充与canvas画布再转为图片

    需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...

  2. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  3. C#实现 word、pdf、ppt 转为图片

    office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...

  4. Sequence.js - 适合电子商务网站的图片滑块

    Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...

  5. 将UIWebView显示的内容转为图片和PDF

    今天开发MarkEditor时要用到将 UIWebView 中显示的内容转为图片,方便转发到各个社交网络(Twiiter,Facebook,Weibo),这样内容就不受长度限制,类似于长微博. 之前关 ...

  6. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  7. word、pdf、ppt 转为图片

    office word文档.pdf文档.powerpoint幻灯片是非常常用的文档类型,在现实中经常有需求需要将它们转换成图片 -- 即将word.pdf.ppt文档的每一页转换成一张对应的图片,就像 ...

  8. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  9. Android View转为图片保存为本地文件，异步监听回调操作结果；

    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...

随机推荐

  1. [Lua性能] 小试验一例

    local s1 = os.clock() local list1 = {} , do list1[#list1 + ] = end local e1 = os.clock() print(" ...

  2. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  3. 【转载】salesforce 零基础开发入门学习（五）异步进程介绍与数据批处理Batchable

    salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable   本篇知识参考:https://developer.salesforce.com/trailhead/for ...

  4. RANSAC拟合算法

    最小二乘法只适合与误差较小的情况.试想一下这种情况,假使需要从一个噪音较大的数据集中提取模型(比方说只有20%的数据时符合模型的)时,最小二乘法就显得力不从心了. 算法简介 随机抽样一致算法(RANd ...

  5. linux服务器忘记密码操作

    当重启镜像时候 看到这个界面的时候 按1 按1之后进入如下界面 红色区域有解释 按e是编译模式,我们按e OK 这里我们选择第二行按b 进入开发者模式,然后等待启动 然后更改密码

  6. python 学习笔记_3 输入字母，打印出要输入的星期几； 首字母无效，则继续输入，最多2次即可判断结果；否则退出。

    #coding=gbk ''' 输入字母,打印出要输入的星期几: 首字母无效,则继续输入,最多2次即可判断结果:否则退出. ''' week_list=['monday','tuesday','wed ...

  7. go语言defer关键字背后的实现，语法，用法

    原文: https://tiancaiamao.gitbooks.io/go-internals/content/zh/03.4.html ------------------------------ ...

  8. 【翻译】PATH究竟是什么？

    最近,我试图向一个朋友解释他电脑上PATH变量是用来做什么的.我在我们所交流的平台‘the Slack group"写了一篇比较长的消息之后,我意识到这个主题可以写成一个很好的博客,所以开始 ...

  9. Vue基础认识

     一:什么是Vue? vue是一个渐进式的JavaScript框架,采用的是MVVM模式.Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整 ...

  10. git中的基本命令

    工作区:      当前的编辑位置 缓存区:      add 之后的区域 版本库:      commit之后的区域就是版本库 git init .         初始化 git add .    ...