html2canvas支持

Firefox 3.5+

Google Chrome

Opera 12+

IE9+

Safari 6+

html2canvas是将dom转化为图片，所以先准备一个dom

<div id="admin">写点文字</div>

<style>

#admin {

            width: 400PX;

            height: 400px;

            background: yellow;

            margin-bottom: 20px;

        }

    </style>

下面是js

var admin = document.getElementById("admin")

html2canvas(admin, {

        onrendered:

            function

                (canvas) {

                document.body.appendChild(canvas){

                    document.body.appendChild(canvas);

            }

    });

运行出来

image

然后使用canvas的方法将它图片化，得到的是bese64的url地址

var beseUrl = canvas.toDataURL('image/png', 1.0);

最后发现生成出来的图片有些模糊，下面是解决方法，
所对应的参数名称和作用已经标明

html2canvas(admin, {

        dpi: 300,  //解决生产图片模糊

        width: 490, //canvas宽度

        height: 240,//canvas高度

        x: 0, //x坐标

        y: 0, //y坐标

        foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染

        useCORS: true,  //是否尝试使用CORS从服务器加载图像

        async: false, //是否异步解析和呈现元素

        onrendered:

            function

                (canvas) {

                document.body.appendChild(canvas);

                var pageData = canvas.toDataURL('image/png', 1.0);

                console.log(pageData)

            }

    });

作者在html2canvas的源码中添加了两个参数，分别为scale和dpi，scale是比例，辣么dpi是个什么玩意儿，以下是百度百科对dpi的定义：

DPI是指每英寸的像素，也就是扫描精度。DPI越低，扫描的清晰度越低，由于受网络传输速度的影响，web上使用的图片都是72dpi，但是冲洗照片不能使用这个参数，必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片，扫描精度必须是300dpi，那么文件尺寸应该是(4300)(6300)=1200像素*1800像素。

只要增大dpi或者scale肯定能使同样宽高的图像变得清晰，那么模糊的问题也就不存在了。
如果发现添加了dpi之后还是没有作用的话，是说明你的html2canvas的版本的问题，dpi解决图片模糊有些版本是不支持的，
如果找不到的话可以去 https://github.com/Cchensir/html2canvas下载html2canvas.js