<!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. WinForm中使用DDE技术(含源码)

    提起DDE技术,相信很多人不知道是啥东东,尤其是90后的程序员们.不过,有时候这个东西还是有用处的,用一句话可以总结:实现Winform程序间的通信.比如:两个Winform程序A和B需要实现通信,用 ...

  2. 使用docker搭建wordpress

    前言 去年在学习docker,在看完菜鸟教程和第一本docker书后,一直想实战用一下这个技术,多用用才能熟能生巧,真正体验它的利弊.正好傅老板用docker搭完了wordpress,我也就手痒跟着搭 ...

  3. 一种解决eclipse中安装maven出错的方法

    1.安装步骤:https://jingyan.baidu.com/article/a17d5285feb4dd8099c8f26e.html 2.安装第三步的解决办法:m2e   路径换成  http ...

  4. 通过js区分移动端浏览器（微信浏览器、QQ浏览器、QQ内置浏览器）

    由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...

  5. hiboCoder 1041 国庆出游 dfs+思维

    先抽象出一棵以1做为根结点的树.给定了访问序列a[1..m]. 考虑两种特殊情况: 1.访问了某个a[j],但是存在a[i]没有访问且i < j,出现这种情况说明a[j]一定是a[i]的祖先节点 ...

  6. uva12563

    一个简单的0-1背包,背包容量为t-1,每个物品价值为1,代价为t[i].背包容量为t-1而不是t的原因是留1s唱<劲歌金曲>. AC代码: #include<cstdio> ...

  7. UVA-673 括号匹配--栈

    如果是一个合法的序列,每对配对的括号的两个字符('(' 和 ')' 或者 '[' 和 ']')一定是相邻的,每次判断下该字符是否有配对即可. 如果配对,将左括号出栈即可.特别注意:空格也是合法的. A ...

  8. nginx笔记5-双机热备原理

    1动静分离演示: 将笔记3的Demo改造一下,如图所示: 改造完成后,其实就是在网页上显示一张图片 现在启动Tomcat运行起来,如图: 可以看到图片的请求是请求Tomcat下的图片. 现在,通过把静 ...

  9. SPI知识总结

    SPI知识总结 一.定义 SPI(Serial Peripheral Interface--串行外设接口)总线系统是一种同步串行外设接口,它可以使MCU与各种外围设备以串行方式进行通信以交换信息. 优 ...

  10. 移动端-手机端-日历选择控件（支持Zepto和JQuery）

    一. 效果图 二. 功能说明 1. 支持切换年份,月份. 2. 支持点击选中日期,也可以点击确定选择日期. 三. 使用方法 1. 添加Input 在你的页面中添加Input输入框.可以再html里,也 ...