1：html2canvas官网

首先去官网把这个JS下载下来

<!DOCTYPE html>

<html lang="en">

<head>

   <title>

        </title>

        <meta name="renderer" content="webkit">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="format-detection" content="telephone=no">

        <link rel="stylesheet" href="{:__STYLE__}css/x-admin.css" media="all">

</head>

<style type="text/css">

    .contanie{

        /*background: pink;*/

        font-size: 16px;

        width: %;

    }

    .contanie .fonter_code{

        position: fixed;

        bottom: ;

        right: ;

        background: red;

        display: block;

        background: #fff;

        width: %;

    }

    .fonter_code button{

        float: right;

    }

    .code_title{

    min-height: 90px;

    background: #ff9f0f5e;

    font-size: 40px;

    width: %;

    text-align: center;

    font-weight: ;

    font-family: monospace;

    }

    .code_title_footer{

        min-height: 90px;

        background: #fff;

        font-size: 20px;

        width: %;

        text-align: center;

        display: inline-block;

    }

    .code_conter_qr{

        min-height: 400px;

        background: #fff;

        text-align: center;

        /*padding: 0 30px; */

        margin:  50px;

            border-bottom: 1px solid #ffd9229c;

    }

    .code_conter_qr img {

        width: 250px;

        height: 250px;

        display: block;

        margin:  auto;

        border: 1px solid #ffd9229c ;

           border-radius: 6px;

    }

    .code_span_title{

        font-weight: bold ;

        font-size: 65px;

        display: block;

            padding: 20px ;

    }

    .code_title_footer .code_qr_code span{

        font-size: 16px;

        font-weight: bold;

    }

    .code_qr_code img{

        width: 40px;

        display: inline-block;

        padding:  5px;

    }

    .code_qr_code{

        line-height: 90px;

    }

</style>

<body>

        <div class="contanie">

             <div class="contet_code" id="upload_code">

                   <div class="code_title">

                           <span style="line-height: 90px;">

                               {$data['bname']} 收钱码

                           </span>

                   </div>

                   <div class="code_conter_qr">

                       <div class="code_span_title">

                            <span>在此扫码付款</span>

                       </div>

                       <img src="{:__UPLOAD__}{$data['img']}">

                   </div>

                    <div class="code_title_footer  ">

                        <div class="code_qr_code">

                            <span>支持付款方式:</span>

                            <img src="{:__UPLOAD__}imgs/zfb.png">

                            <img src="{:__UPLOAD__}imgs/wx.png">

                        </div>

                   </div>

             </div>

             <div class="fonter_code">

                 <button type="button" class="layui-btn layui-btn-normal"  onclick="onsubmint()"> 下载</button>

             </div>

        </div>

         <script src="{:__STYLE__}lib/layui/layui.js" charset="utf-8"></script>

       <script src="{:__STYLE__}js/x-layui.js" charset="utf-8"></script>

       <script src="{:__STYLE__}js/jquery.min.js" charset="utf-8"></script>

       <script src="{:__STYLE__}js/html2canvas.js" charset="utf-8"></script>

        <script type="text/javascript">

            function onsubmint(){

            html2canvas(document.querySelector("#upload_code")).then(canvas => {

                 var pageData = canvas.toDataURL('image/jpeg', 1.0);

                       saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");

            });

            var saveFile = function (data, filename) {

                console.log(data);

                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

                save_link.href = data;

                save_link.download = filename;

                var event = document.createEvent('MouseEvents');

                event.initMouseEvent('click', true, false, window, , , , , , false, false, false, false, , null);

                save_link.dispatchEvent(event);

            };

            }

        </script>

</body>

</html>

效果图

js使用html2canvas 生成图片然后下载的更多相关文章

  1. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  2. html2canvas 网页截图 下载 上传

    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  3. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  4. JS - 使用 html2canvas 将页面转PDF

    JS - 使用 html2canvas 将页面转PDF 本方法可以将页面元素块转为pdf. 网站地址 jspdf.js 官网地址:http://jspdf.com GitHub 主页:https:// ...

  5. js、css引用文件的下载方式

    js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...

  6. js中使用showModelDialog中下载文件的时候，闪一下后无法下载

    在js中使用showModelDialog中下载文件的时候,会因为showModelDialog自动设置target为_self导致下载文件“只会闪一下”就消失掉 在吧target设置为_blank后 ...

  7. js接收文件流并下载

    js接收文件流并下载 标签(空格分隔): js 在此输入正文 <script type="text/javascript"> function download(fil ...

  8. 移动端js模拟截屏生成图片并下载功能的实现方案

    一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...

  9. 使用html2canvas.js将HTML生成图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 来了，来了，你们要的Nginx教程来了

    一 Nginx简介 1.1 什么是Nginx Nginx是一个高性能的http和反向代理服务器,其特点是占用内存小,并发能力强.Nginx专为性能优化而开发,性能是其最重要的考量,能经受高负载的考验, ...

  2. UVA1104 芯片难题 Chips Challenge

    题目链接 题意 网格上放点,有些强制放,有些不能放,有些可以放可以不放.要求: 第 \(i\) 行的点数 = 第 \(i\) 列的点数 每一行每一列的点数不超过总点数的 \(k\) 倍(\(k\) 已 ...

  3. 面试高频SpringMVC执行流程最优解（源码分析）

    文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star! 搜索关注微信公众号 码出Offer 领取各种学习资料! SpringMVC执行流程 SpringMVC概述 Spri ...

  4. web自动化 -- ActionChains()的鼠标操作

    webdriver模块下的ActionChains类 一.两个主要组件 1.实例化  ActionChains() 2.ActionChains(driver).perform() perform() ...

  5. 玩LOL间歇性卡顿（FPS突然降低又马上恢复）？Windows10间歇性卡顿？

    一..问题描述: LOL时:画面突然死掉,不能操作:FPS突然降低,从三位数降到两位数(150 -> 6).我最开始就是从LOL这里观测到的,因为游戏是卡顿最直观.最明显的表现.之后才发现不玩游 ...

  6. 2n皇后问题-------递归 暴力求解题与分布讨论题

    问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两个白皇后都不在同一行.同一列或同一 ...

  7. [leetcode/lintcode 题解] Amazon面试题：连接棒材的最低费用

    为了装修新房,你需要加工一些长度为正整数的棒材 sticks. 如果要将长度分别为 X 和 Y 的两根棒材连接在一起,你需要支付 X + Y 的费用. 由于施工需要,你必须将所有棒材连接成一根. 返回 ...

  8. 在同一form表单中如何提交两个不同的action

    摘自:CSDN博客 原文链接地址:http://blog.csdn.net/huazhangena/article/details/7903955 有两种办法可以实现:1.针对一个action有多个提 ...

  9. Python List index()方法

    描述 index() 函数用于从列表中找出某个值第一个匹配项的索引位置.高佣联盟 www.cgewang.com 语法 index()方法语法: list.index(x[, start[, end] ...

  10. day7.关于字符串的相关操作

    一.字符串的相关操作 """ (1)字符串的拼接 (2)字符串的重复 (3)字符串跨行拼接 (4)字符串的索引 (5)字符串的切片: 语法 => 字符串[::] 完 ...