有一个神奇的库：html2canvas。

这个库简洁优美，使用方便。

下面先看一个小demo，它需要用到一张图片：haha.jpg。

<html>

<head>

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

</head>

<body>

<div id="mydiv">

    <h1>天下大势,为我所控</h1>

    <img src="haha.jpg">

</div>

</body>

<script>

    html2canvas(document.querySelector("#mydiv"), {

        onrendered: function (canvas) {

            document.body.appendChild(canvas)

        }

    })

</script>

</html>

html转成图片这个功能并不是一种规范，那么html2canvas这个库是如何做到“截图”的呢？

实际上，html2canvas并没有截图，它是通过DOM读取元素的属性、样式等所有信息，以此为基础自己画出来的。

明白了原理，也就很容易想到html2canvas无法截图视频，也无法截图SWF等内容。JS所能获取的全部信息就是html2canvas所能获取到的全部信息。

html2canvas并非能获取任意元素的截图，它具有以下局限：

  • 不支持iframe
  • 不支持跨域图片
  • 不能在浏览器插件中使用
  • 部分浏览器上不支持SVG图片
  • 不支持Flash
  • 不支持古代浏览器和IE

如果想把canvas导出为图片，可以使用另外一个库：canvas2image

更多信息，参考官方文档：html2canvas

还有另外一种将HTML页面内容导出为图片的方式，这种方式利用了img元素的src属性，src属性可以是base64编码的字符串，也可以是SVG格式的字符串。

<!DOCTYPE html>

<html>

<body><h2>Input Div:</h2>

<div id="div">

    <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>

        TRY</span></p>

    <p><b>By Dion</b></p>

</div>

<h2>Output Image:</h2>

<script>

    var divContent = document.getElementById("div").innerHTML;

    var data = "data:image/svg+xml," +

        "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>"

        + "<foreignObject width='100%' height='100%'>" +

        "<div xmlns='http://www.w3.org/1999/xhtml' " +

        "style='font-size:16px;font-family:Helvetica'>"

        + divContent +

        "</div>" +

        "</foreignObject>" +

        "</svg>";

    var img = new Image();

    img.src = data;

    document.getElementsByTagName('body')[0].appendChild(img);</script>

</body>

</html>

html导出图片的更多相关文章

  1. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  2. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

  3. Asp.net通过模板(.dot/Html)导出Word，同时导出图片

    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...

  4. FusionCharts V3图表导出图片和PDF属性说明（转）

    百闻不如一见,狠狠点击,快快下载:(演示文档有错误,不提供下载了.待新的演示文档出来.) 许多朋友说上面的DEMO用不了.fusioncharts官方的演示非常不错,就是来不及整理,各位大侠们可以研究 ...

  5. FusionChart 导出图片 功能实现（转载）

    FusionChart 导出图片 功能实现(转载) http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html 题目:精美Fusi ...

  6. Highcharts 本地导出图片和PDF asp.net mvc版

    啰嗦: 现在大家利用Highcharts开发时,有时候会遇到导出的功能问题,但是highcharts默认是链接自己的服务器上进行处理,但是有时候我们会连不上他的服务器,所以我们要让他在我们的服务器上进 ...

  7. hightchart导出图片

    通常在使用highchart导出图片pdf等文件时,我们一般直接引入exporting.js即可 执行导出操作则会直接请求highchart服务器,执行生成图片等操作,然后下载到客户端: 但这一切的操 ...

  8. JXLS 2.4.0系列教程（六）番外篇——导出图片（完结）

    突然想起来有同学说过能不能导出图片,本来我是想说不懂的,后来我上官网查了查,还挺容易.我就简短的写一写怎么导出图片. 官方提供了导出图片标签: jx:image(lastCell="D10& ...

  9. 微信小程序 canvas导出图片模糊

    //保存到手机相册save:function () { wx.canvasToTempFilePath({ x: , y: , width: , //导出图片的宽 height: , //导出图片的高 ...

  10. Activiti开发案例之activiti-app工作流导出图片

    前言 自从 Activiti 和 JBPM4 分家以后,Activiti 目前已经发展到了版本7,本着稳定性原则我们最终选择了6,之前还有一个版本5. 问题 在开发使用的过程中发现 Activiti ...

随机推荐

  1. Android只播放gif动画

    使用easygifanimator软件把gif动画打散为图片. 第一步:先上图片素材,以下素材放到res/drawable目录下: 转:http://blog.csdn.net/aminfo/arti ...

  2. Cocos2dx 3.0 过渡篇（二十七）C++11多线程std::thread的简单使用(下)

    本篇接上篇继续讲:上篇传送门:http://blog.csdn.net/star530/article/details/24186783 简单的东西我都说的几乎相同了,想挖点深的差点把自己给填进去. ...

  3. JavaBean的应用

    1. 获取JavaBean属性信息 例1.1 在JSP页面中显示JavaBean属性信息. (1)创建名称为Produce的类,该类是封装商品对象的JavaBean,在Produce类中创建商品属性, ...

  4. OpenCV学习(24) 直方图(1)

    直方图是对数据的统计,并将统计结果分布于一系列预定义的槽中.这里的数据不仅仅指的是灰度值,它可以是任何能有效描述图像特征的数据,比如图像梯度等等. 假设有一个矩阵包含一张图像的信息 (灰度值 0-25 ...

  5. 伪元素 :Before 和 :After的学习

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

  6. C# 实现的异步 Socket 服务器

    介绍 我最近需要为一个.net项目准备一个内部线程通信机制. 项目有多个使用ASP.NET,Windows 表单和控制台应用程序的服务器和客户端构成. 考虑到实现的可能性,我下定决心要使用原生的soc ...

  7. MySQL 动态sql语句运行 用时间做表名

    1. 描写叙述 在使用数据的时候,我时候我们须要非常多数据库,并且想用时间来做表名以区分.可是MySQL在存储过程中不支持使用变量名来做表名或者列名. 比方,有一个表我们想以"2015-07 ...

  8. 为什么好多人说win8不好用？

    2012年8月就開始接触win8了,那时win8已经出来半年了:自从用了win8之后就感觉他比xp.win7桌面更绚丽.我就喜欢绚丽的桌面.至今使用win8已经两年了,可发现身边好多人都说win8不好 ...

  9. Http具体解释

    一.Http是位于网络层的超文本传输协议. 我们用浏览器浏览网页就是用的http协议实现的. 二.Http请求详细分析 我们能够用httpwatch工具对http进行抓包分析 下面就是请求www.si ...

  10. linux time 命令详解

    用途说明time命令常用于测量一个命令的运行时间,注意不是用来显示和修改系统时间的(这是date命令干的事情).但是今天我通过查看time命令的手册页,发现它能做的不仅仅是测量运行时间,还可以测量内存 ...