<!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. VS2015安装时问题汇总

    安装VS2015遇到teamexplorer严重错误 在控制台管理员权限执行: fsutil behavior set SymlinkEvaluation L2L:1 L2R:1 R2L:1 R2R: ...

  2. 洛谷P3369 【模板】普通平衡树（Treap/SBT）

    洛谷P3369 [模板]普通平衡树(Treap/SBT) 平衡树,一种其妙的数据结构 题目传送门 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除 ...

  3. Java并发系列[6]----Semaphore源码分析

    Semaphore(信号量)是JUC包中比较常用到的一个类,它是AQS共享模式的一个应用,可以允许多个线程同时对共享资源进行操作,并且可以有效的控制并发数,利用它可以很好的实现流量控制.Semapho ...

  4. Activiti获取ProcessEngine的三种方法

    1.通过ProcessEngineConfiguration获取 package cn.lonecloud.mavenActivi; import org.activiti.engine.Proces ...

  5. Netbeans简要配置许可证信息

    <#if licenseFirst??>${licenseFirst}</#if>${licensePrefix}Copyright (C) <2017>  < ...

  6. aforge 学习-命名空间中文理解

    序列 名称 介绍 1 Aforge AForge   AForge名称空间的核心名称空间.微软网络框架,其中包含核心类所使用的其他框架的命名空间和类,可以独立用于各种用途. 2 AForge.Cont ...

  7. 2015四川省acm B题

    Carries frog has n integers a1,a2,-,an, and she wants to add them pairwise. Unfortunately, frog is s ...

  8. R语言-时间序列

    时间序列:可以用来预测未来的参数, 1.生成时间序列对象 sales <- c(18, 33, 41, 7, 34, 35, 24, 25, 24, 21, 25, 20, 22, 31, 40 ...

  9. 2018.3.6学习java的第一天

    学习java,那么不得不先了解一下java,java分为三部分,JAVA SE,JAVA EE和JAVA ME,其中前期我们首先要学习Java SE.java是一门语言,我们平时人与人之间对话,用中文 ...

  10. Netty（二）：Netty为啥去掉支持AIO?

    匠心零度 转载请注明原创出处,谢谢! 疑惑 我们都知道bio nio 以及nio2(也就是aio),如果不是特别熟悉可以看看我之前写的网络 I/O模型,那么netty为什么还经常看到类似下面的这段代码 ...