<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

    <script src="../script/jquery-1.9.1.min.js"></script>

    <script src="../script/html2canvas.js"></script>

    <style type="text/css">

        .divBody {

            position: absolute;

            width: 100%;

            height: 100%;

            background: url(../images/bg.jpg) no-repeat center top;

            background-size: 100% 100%;

            font-family: "黑体";

            color: #292929;

            letter-spacing: 2px;

            z-index: 1000;

        }

        .divInfo {

            width: 76%;

            margin-left: 12%;

            position: relative;

            top: 25%;

            text-align: center;

        }

        #btnDown{

            position:absolute;

            top:15px;

            right:10px;

            z-index:1000;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="divBody" class="divBody">

        <div class="divInfo" id="divInfo">

            <h1>剑来语录</h1>

            <div>

                <p>我住人间万古宅，大日高升在墙东。</p>

                <p>睁眼便觉扰清梦，敕令明月坠其中。</p>

                <p>天上仙佛三百万，遇我也须称上神。</p>

                <p>醉乘白鹿驾青虬，列仙遇我求醇酒。</p>

                <p>挂冠天宫桂枝上，手抓金乌做炭笼。</p>

                <p>悲哉仙人千秋梦，一梦见我误长生。</p>

            </div>

        </div>

    </div>

    <div id="btnDown">

        <img src="../images/share.png" style="width:2rem;height:2rem;" />

    </div>

</body>

</html>

<script type="text/javascript">

    $(function () {

        $("#btnDown").click(function () {

            downPNG("下载图片.png", "divBody");

        });

    });

    function downPNG(pngName, pngId) {

        var scaleBy = getDPR();//获取像素比

        var canvas = document.createElement('canvas');// 创建自定义 canvas 元素

        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比

        var width = document.getElementById(pngId).clientWidth;

        var height = document.getElementById(pngId).clientHeight;

        canvas.width = width * 2;

        canvas.height = height * 2;

        var context = canvas.getContext('2d');

        // 将所有绘制内容放大像素比倍

        context.scale(2, 2);

        var rect = document.getElementById(pngId).getBoundingClientRect(); //获取元素相对于视察的偏移量

        context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位

        html2canvas(document.getElementById(pngId), {

            canvas,

            dpi: 300,

            scale: 1,

            useCORS: true, //（图片跨域相关）

            allowTaint: false, //允许跨域（图片跨域相关）

            onrendered: function (imgCanvas) {

                var imgData = imgCanvas.toDataURL('image/octet-stream');

                if (imgCanvas.msToBlob) { // IE 9+浏览器

                    var blob = imgCanvas.msToBlob();

                    window.navigator.msSaveBlob(blob, pngName);

                } else {

                    saveFile(imgData, pngName);

                }

            }

        });

    }

    function saveFile(data, filename) {

        //微信浏览器不能直接下载图片,需要展示一张图片长按下载...

        if (is_weixn()) {

            //方法一

            var img = document.createElement('img');

            img.src = data;

            img.style.width = "100%";

            $("#divBody").html(img);

            //方法二

            // var html = "<img src ='" + data + "' style='width:100%;height:100%' />";

            // $("#divBody").html(html);

            $("#btnDown").hide();//隐藏分享按钮

            alert("图片生成成功,长按保存图片！");//提示用户长按下载图片

        } else {

            console.log(1);

            //直接下载图片

            var save_link = document.createElement('a');

            save_link.href = data;

            save_link.download = filename;

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

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

            save_link.dispatchEvent(event);

        }

    };

    function getDPR() {

        if (window.devicePixelRatio && window.devicePixelRatio > 1) {

            return window.devicePixelRatio;

        }

        return 2;

    }

    function is_weixn() {

        var ua = navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i) == "micromessenger") {

            return true;

        } else {

            return false;

        }

    }

</script>

　　

使用html2canvas.js将HTML生成图片的更多相关文章

  1. html2canvas.js网页截图功能

    需求:将网页生成图片,用户自行长按图片进行保存图片,再分享朋友圈.其中,都可识别图中的二维码.(二维码过小会识别不出) 首先,先来科普一下微信网页识别二维码原理:截屏识别,当客户端发现用户在网页的im ...

  2. html2canvas.js——HTML转Canvas工具

    我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属.但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而html2canvas.js就是一款优秀的插件, ...

  3. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

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

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

  5. js实现html转pdf+html2canvas.js截图不全的问题

    最近做项目中遇到要把整个页面保存为PDF文件,网上找了一下实现的方法都是 html2canvas.js+jsPdf.js 来实现.实现的过程是 先用html2canvas.js把html页面转成图片, ...

  6. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  7. html2canvas JS截图插件

    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...

  8. html2canvas.js 图片不显示

    html2canvas.js 图片不显示 在服务器端打开 就可以, 但是在本地就不显示图片. 查找百度,是因为图片不能跨域. 在给非编程人员使用的时候,建议把所有的图片,转化为base64,就可以直接 ...

  9. html2canvas.js插件截图空白问题

    发现使用 html2canvas.js插件截图保存在前端很方便.学习过程中预计问题. 截图出现空白和截图不全. 问题原因: html2canvas.js插件截图是基于body标签的,如果body存在滚 ...

随机推荐

  1. 【.NET 与树莓派】LED 数码管驱动模块——TM1638

    LED 数码管,你可以将它看做是 N 个发光二级管的组合,一个灯负责显示一个段,七个段组合一位数字,再加一个小数点,这么一来,一位数码管就有八段.一般,按照顺时针的方向给每个段编号. 上图中的 h 就 ...

  2. Excel对单元格设置上涨、下降箭头

    1.有以下学生成绩表,对期末考试设置上涨.下降箭头,体现考生成绩变动: 2.选中C2,"条件格式"-"管理规则"-"新建规则"-" ...

  3. Springboot下载Excel的3种方式

    Springboot下载Excel的3种方式 汇总一下浏览器下载和代码本地下载实现的3种方式. (其实一般都是在代码生成excel,然后上传到oss,然后传链接给前台,但是我好像没有实现过直接点击就能 ...

  4. SuperEdge 云边隧道新特性：从云端SSH运维边缘节点

    背景 在边缘集群的场景下边缘节点分布在不同的区域,且边缘节点和云端之间是单向网络,边缘节点可以访问云端节点,云端节点无法直接访问边缘节点,给边缘节点的运维带来很大不便,如果可以从云端SSH登录到边缘节 ...

  5. Jenkins CI&CD 自动化发布项目实战(下篇)

    Jenkins CI&CD 自动化发布项目实战(下篇) 作者 刘畅 时间 2020-12-04 实验环境 centos7.5 主机名 ip 服务配置 软件 gitlab 172.16.1.71 ...

  6. python之set集合，基础篇

    集合:set 特点:1>.无序 ,因为集合是无序的,所以不可用下标值查询,也不可切片2>.去重 ,一个集合内不能有两个相同的元素3>.可添加,可删除,不可修改等等4>.集合内的 ...

  7. Series 1 java秒组合数

    Series 1 举几个例子发现,  系数中间对称,很容易想到组合数 c(n,m)==c[n,n-m).此题就是高精度求组合数,java秒之. time:1825ms   ,接近时限,如果n还稍微大一 ...

  8. 【问答分享第一弹】MySQL锁总结:MySQL行锁、表锁、排他锁、共享锁的特点

    大家好,我是小于哥哈.前几天能分享了第一期面试题,MySQL 中有哪几种锁 和 这些锁各有哪些特点 ,这道面试题是经常会被问到的一个面试题,大家反馈的都挺不错的.今天特此来总结一下. 首发于公众号[终 ...

  9. Maven中dependencies和dependencyManagement的区别

    Maven项目中,为了保持引用依赖的一致性,一般会抽出一个parent层,用来管理子项目的maven依赖,对于依赖的管理有两种方式,分别是dependencies以及dependencyManagem ...

  10. Mybatis学习（7）实现mybatis分页

    上一篇文章里已经讲到了mybatis与spring MVC的集成,并且做了一个列表展示,显示出所有article 列表,但没有用到分页,在实际的项目中,分页是肯定需要的.而且是物理分页,不是内存分页. ...