html2canvas 将 HTML 页面转换为图片

2019年12月18日


# JavaScript # HTML # 截图工具

参考 http://html2canvas.hertzen.com/ https://stackoverflow.com/questions/10721884/render-html-to-an-image http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

HTML2Canvas 能够实现在用户在浏览器端直接对HTML页面局部或整体进行截屏。HTML2Canvas 脚本将当页面渲染成一个 Canvas 图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。

引入 HTML2Canvas 库

<Head></head> 标签区域内引入 HTML2Canvas 脚本类库。

<!--CDN 方式引用-->
<head>
 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>

调用 HTML2Canvas 方法转换为图片

调用 HTML2Canvas 方法,转换 HTML 页面区域或者全部为图片。下面的代码将一个 Bootstrap 模态对话框转换为图片:

<!--下面代码需要引入 bootstrap  css/js 支持-->
<div class="modal-dialog" role="document" style="width:355px;">
    <div class="modal-content" id="id_modal_content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">提示</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="id_modal_body">
            <span id="modal_tishi_message"></span>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" id="down_img" class="btn btn-primary">保存图片</button>
        </div>
    </div>
</div>

$('#down_img').on('click', function (e) {
    //var container = document.body; // full page
    var container = document.getElementById("id_modal_content"); //specific element on page
    html2canvas(container).then(function(canvas) {
        var link = document.createElement("a");
        document.body.appendChild(link);
        link.download = document.getElementById('sale_date').innerHTML; //图片文件名
        link.href = canvas.toDataURL("image/png");
        link.target = '_blank';
        link.click();
    });
})

生成图片质量设置范围(0-1),默认为 1

canvas.toDataURL("image/png", 1)

图片模糊的问题

关于生成图片模糊的问题,网上有很多解决办法,当截取的元素是动态居中的情况下,大概率存在模糊的问题,猜测应该是像素错位的问题,居中可能导致像素起始位绝对位置为奇数,使 HTML2Canvas 在渲染时像素错位导致模糊。

目前的办法是,如果生成的图片模糊,调整一下元素宽度为奇数像素,或者少一个像素,试试可能有变化:

<div class="modal-dialog" role="document" style="width:355px;">
...
</div>

效果

https://slowread.net/virmach-flash-sale/ 网页内点击表格行,弹出模态对话框截图效果如下:

2019-12-07 07_37