<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>html2canvas_download</title>

        <style>

            a {

                cursor: pointer;

                color: rgb(85, 26, 139);

                text-decoration: underline;

            }

        </style>

    </head>

    <body>

        <div id="oDiv" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;">

            <h1>hello world!</h1>

        </div>

        <!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> -->

        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

        <script type="text/javascript">

            var oDiv = document.getElementById('oDiv');

            // body截图

            // html2canvas(document.body).then(function(canvas) {

            //     document.body.appendChild(canvas);

            // });

            html2canvas(oDiv).then(function(canvas) {

                document.body.appendChild(canvas);

                var oCavans = document.getElementsByTagName('canvas')[0];

                var strDataURI = oCavans.toDataURL();

                downLoadFn(strDataURI);

            });

            //判断浏览器类型

            function myBrowser() {

                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

                var isOpera = userAgent.indexOf("Opera") > -1;

                if(isOpera) {

                    return "Opera"

                }; //判断是否Opera浏览器

                if(userAgent.indexOf("Firefox") > -1) {

                    return "FF";

                } //判断是否Firefox浏览器

                if(userAgent.indexOf("Chrome") > -1) {

                    return "Chrome";

                }

                if(userAgent.indexOf("Safari") > -1) {

                    return "Safari";

                } //判断是否Safari浏览器

                if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

                    return "IE";

                }; //判断是否IE浏览器

                if(userAgent.indexOf("Trident") > -1) {

                    return "Edge";

                } //判断是否Edge浏览器

            }

            //IE浏览器图片保存本地

            function SaveAs5(imgURL) {

                var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");

                for(; oPop.document.readyState != "complete";) {

                    if(oPop.document.readyState == "complete") break;

                }

                oPop.document.execCommand("SaveAs");

                oPop.close();

            }

            // chrome14+,firefox20+,pera15+,Edge 13+,Safari未实现

            function download(strDataURI) {

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

                link.innerHTML = 'download_canvas_image';

                link.download = 'mypainting.png';

                link.addEventListener('click', function(ev) {

                    link.href = strDataURI;

                }, false);

                document.body.appendChild(link);

            };

            function downLoadFn(url) {

                if(myBrowser() === "IE" || myBrowser() === "Edge") {

                    SaveAs5(url);

                } else {

                    download(url);

                }

            }

        </script>

    </body>

</html>

参考：http://blog.csdn.net/luckyJieXu/article/details/72137147，https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL，

对html进行截图并保存为本地图片的更多相关文章

  1. 利用HTML5的Video进行视频截图并保存到本地

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 【转载】用原生JS和html5进行视频截图并保存到本地

    支持并尊重原创!原文地址:http://www.cnblogs.com/xieshuxin/p/6731637.html <!doctype html> <html> < ...

  3. 用原生JS和html5进行视频截图并保存到本地

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. laravel7文件上传至七牛云并保存在本地图片

    HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...

  5. 有道云笔记Markdown上传本地图片的方法

    有道云笔记截图&保存   方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 ![图片名称](图片链接 ...

  6. js截图及绕过服务器图片保存至本地（html2canvas）

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  7. JS截取页面，并保存到本地

    想截取浏览器上内容,并做成图片保存到本地. 可以使用html2canvas.js进行操作. <!DOCTYPE html> <html lang="en"> ...

  8. 一文搞定scrapy爬取众多知名技术博客文章保存到本地数据库，包含：cnblog、csdn、51cto、itpub、jobbole、oschina等

    本文旨在通过爬取一系列博客网站技术文章的实践,介绍一下scrapy这个python语言中强大的整站爬虫框架的使用.各位童鞋可不要用来干坏事哦,这些技术博客平台也是为了让我们大家更方便的交流.学习.提高 ...

  9. 【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子

    涉及好多个问题 比如保存到本地有黑色背景 怎么用把文字和图 画到画布上 腾讯的东西就是坑多了 直接上代码吧 啥也不说额 pic.wxml <view class='container'> ...

随机推荐

  1. MySQL select语句直接导出数据

    select * into outfile '文件存放路径' from 表名; (先记下来,还未测试)

  2. iOS 利用异常 NSException 调试代码

    可以用在代码的调试上: -(instancetype)init{ @throw [NSException exceptionWithName:@"Singleton" reason ...

  3. 通过修改注册表设置windows环境变量

    开发环境搭建每次都要设置很多环境变量, 一般是通过  [菜单]->[计算机]->[属性]->[高级设置]->[环境变量]进行设置,重装系统后,每次都要设置很多环境变量,很麻烦. ...

  4. ubuntu16.04～qt 5.8无法输入中文

    编译fcitx-qt需要cmake,安装cmake命令,如果已经安装,请略过. sudo apt-get install cmake 安装 fcitx-libs-dev sudo apt-get in ...

  5. makefile讲解

    仅供自己学习使用 一.Makefile介绍 Makefile 或 makefile: 告诉make维护一个大型程序, 该做什么.Makefile说明了组成程序的各模块间的相互 关系及更新模块时必须进行 ...

  6. Python常用数据结构之heapq模块

    Python数据结构常用模块:collections.heapq.operator.itertools heapq 堆是一种特殊的树形结构,通常我们所说的堆的数据结构指的是完全二叉树,并且根节点的值小 ...

  7. SpringBoot简单连接数据库以及查询数据

    实现大概思路:配置数据库环境-->实体类-->新建**Repostory接口并且继承JpaRepository-->配置URL映射以及请求方式- 首先,在数据库中新建名称为dbgir ...

  8. Flask從入門到入土(三)——Web表單

    Flask-WTF擴展可以把處理Web表單的過程變成一種愉悅的體驗.這個擴展對獨立的WTForms包進行了包裝,方便集成到Flask程序中. Flask-WTF及其依賴可使用pip安裝: pip in ...

  9. 计蒜客 取数游戏 博弈+dp

    题目链接 取数游戏 思路:dp(x, y)表示先手在区间[x, y]能取得的最大分数.当先手取完,就轮到后手去,后手一定会选择当前能令他得到最大分数的策略,其实当先手在[x, y]区间两端取走一个数, ...

  10. openresty+lua劫持请求，有点意思

    0x01 起因 几天前学弟给我介绍他用nginx搭建的反代,代理了谷歌和维基百科. 由此我想到了一些邪恶的东西:反代既然是所有流量走我的服务器,那我是不是能够在中途做些手脚,达到一些有趣的目的. op ...