参考：https://blog.csdn.net/huwei2003/article/details/79761580

今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。　　

只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
            html2canvas(document.querySelector('div')).then(function(canvas) {
                    document.body.appendChild(canvas);
             })
　　
   常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。

还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。

以下是简单的demo, html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>htmltopic</title>

    <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="js/html2canvas.min.js"></script>

    <style>

        * {

            margin: 0;

        }

        .test {

            width: 100px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            background-color: #87CEEB;

            display: inline-block;

            vertical-align: top;

        }

        canvas {

            margin-right: 5px;

        }

        .down {

            float: left;

            margin: 40px 10px;

        }

        .down2 {

            float: left;

            margin: 40px 30px;

        }

    </style>

</head>

<body>

    <div class="test">测试</div>

<div><a class="down" href="" download="downImg">下载</a>

</div>

    <div><a class="down2" href="" download="downImg">下载2</a></div>

<script>

    //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

    //html2canvas(document.querySelector('div')).then(function(canvas) {

    //    document.body.appendChild(canvas);

    //});

    //创建一个新的canvas

    var canvas2 = document.createElement("canvas");

    let

    _canvas = document.querySelector('div');

    var w = parseInt(window.getComputedStyle(_canvas).width);

    var h = parseInt(window.getComputedStyle(_canvas).height);

    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

    canvas2.width = w * 2;

    canvas2.height = h * 2;

    canvas2.style.width = w + "px";

    canvas2.style.height = h + "px";

    //可以按照自己的需求，对context的参数修改,translate指的是偏移量

    //  var context = canvas.getContext("2d");

    //  context.translate(0,0);

    var context = canvas2.getContext("2d");

    context.scale(2, 2);

    html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {

        //document.body.appendChild(canvas);

        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

        document.querySelector(".down").setAttribute('href', canvas.toDataURL());

    });

</script>

<script language="javascript">

    //这是另一种写法

    $(function () {

        $(".down2").click(function () {

            html2canvas($(".test")).then(function (canvas) {

                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url

                window.location.href = imgUri; // 下载图片

            });

            //html2canvas($('.tongxingzheng_bg'), {

            //    onrendered: function (canvas) {

            //        var data = canvas.toDataURL("image/png");//生成的格式

            //        //data就是生成的base64码啦

            //        alert(data);

            //    }

            //});

        });

    });

</script>

</body>

</html>

Js实现将html页面或div生成图片的更多相关文章

  1. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  2. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  3. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  4. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  5. <span> <div> 局部 keydown ，keyup事件。页面部分div $(document) 无效，可能焦点，添加焦点。

    前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效.右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on(&q ...

  6. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  7. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  8. Js获取iframe子页面全局变量

    项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...

  9. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

随机推荐

  1. Python——五分钟理解函数式编程与闭包

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第9篇文章,我们来聊聊Python的函数式编程与闭包. 函数式编程 函数式编程这个概念我们可能或多或少都听说过,刚听 ...

  2. 四、【Docker笔记】Docker容器

    容器是Docker的另一个核心概念,容器就是镜像的一个运行实例,只是它具有一个可写的文件层,而镜像是一个只读的文件. 一.创建容器 1.新建容器 我们可以使用 docker create 命令来创建一 ...

  3. C 苟富贵

    时间限制 : 15000 MS   空间限制 : 524288 KB 问题描述 你最近买六合彩赚了很多钱,导致一个银行账户存不下了,于是你开设了 N 个账户,第 i 个账户里存有 Ai 元. 你的好友 ...

  4. 实际开发中 dao、entity的代码怎样自动生成？一款工具送给你

    01 关注"一猿小讲"朋友,都知道以往的文章一直倡导拒绝 CRUD,那到底什么是 CRUD?今天咱们就聊聊 Java 妹子小猿与数据库老头交互的事儿. 产品小汪铿锵有力的说:小猿同 ...

  5. sql.Rows 转换为 []map[string]interface{} 类型

    // *sql.Rows 转换为 []map[string]interface{}类型 func rows2maps(rows *sql.Rows) (res []map[string]interfa ...

  6. 艾编程coding老师课堂笔记：java设计模式与并发编程笔记

    设计模式概念 1.1 什么是设计模式 设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路.它不是语法规定,而是一套用来提高代码可复用性.可维护性.可读性. ...

  7. vagrant 入门案例 - 快速创建 Centos7

    中文文档:http://tangbaoping.github.io/vagrant_doc_zh/v2/ 参考: https://blog.csdn.net/yjk13703623757/articl ...

  8. wireshark一开，无线网络就断开

    最近在研究wireshark 笔记本连着wifi,开始抓包后,无线网就断了 查了半天,需要把捕获-->选项里的监控模式去掉就行了

  9. 【高并发】你知道吗？大家都在使用Redisson实现分布式锁了！！

    写在前面 忘记之前在哪个群里有朋友在问:有出分布式锁的文章吗-@冰河?我的回答是:这周会有,也是[高并发]专题的.想了想,还是先发一个如何使用Redisson实现分布式锁的文章吧?为啥?因为使用Red ...

  10. C# 基础知识系列- 9 字符串的更多用法（一）

    0. 前言 在前面的文章里简单介绍了一下字符串的相关内容,并没有涉及到更多的相关内容,这一篇将尝试讲解一下在实际开发工作中会遇到的字符串的很多操作. 1. 创建一个字符串 这部分介绍一下如何创建一个字 ...