html导出图片

有一个神奇的库：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>