<!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. Virtualbox以及VWare在Win10下的不兼容

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html Hyper原因导致的,关闭即可 禁用 hyper-vbcdedit /set h ...

  2. for 循环中的 i 变量问题

    1:如何点击每一个 li 的时候 alert 输出其index? <ul id="test"> <li>111</li> <li>2 ...

  3. mysql1 - 环境与体验

    一.准备工作 1.mac 软件包管理工具:homebrew 2.brew 如何使用?命令行 输入: brew 3.mac 下如何查看 mysql 目录? find /usr/local/ -iname ...

  4. Yii2中把路由地址中的%2F改为/

    第一步:找到/vendor/yiisoft/yii2/web/UrlManager.php 第二步:搜索$url = "$baseUrl?{$this->routeParam}=&qu ...

  5. Fantasia （Tarjan+树形DP）

    Time Limit: 1000 ms   Memory Limit: 256 MB Description 给定一张N个点.M条边的无向图 $G$ .每个点有个权值Wi. 我们定义 $G_i$ 为图 ...

  6. web前端研发工程师编程能力成长之路

    [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  7. linux pxe网络装机无人值守

    项目分析远程装机的实现:配置DHCP+HTTP+TFTP提供通过vesamenu.c32模块实现图形PXE菜单为不同系统分别提供ks应答文件将第三方rpm包以yum源的方式提供:集中提供ntfs-3g ...

  8. nimi SearchEngin 项目思路及算法

    最近做一个轻量文本搜索项目,在项目实行过程中,如果使用余弦求网页相似度,不能适应海量网页查重.看了那本<这就是搜索引擎  核心技术详解>后,对simhash算法有一定的理解,并且喜欢上了这 ...

  9. ap module omap4460

    http://gitorious.org/ap-module-omap4460 Dashboard Register Login Activities Projects Teams ap module ...

  10. php学习笔记之一维数组

    数组是指可以存放多个数据的数据类型. PHP中数组是一组关键字(key)和值(values)的集合,值可以是任何一种数据类型, 一维数组的创建方式: $arr=array(2,5,6); $arr=a ...