Js将html页面或div生成png图片 原创

Js将html页面或div生成png图片

需要的插件
<script src="/plugins/canvas2/html2canvas.js"></script>
<script src="/plugins/canvas2/canvas2image.js"></script>
<script src="/plugins/canvas2/base64.js"></script>

复制HTML<div id="content_box">
    <h2>Js将html页面或div生成png图片<button id="download">下载图片</button></h2>
    <div id="images"></div>
</div>
1
2
3
4

复制JavaScript/*
     * 说明：不支持跨域图片
     * 不能在浏览器插件中使用
     * 部分浏览器上不支持SVG图片
     * 不支持Flash
     */
    var download = document.getElementById("download");
    // 获取内容id
    var content = document.getElementById("content_box");
    download.onclick = function(){
        /*隐藏按钮*/
        $("#download").css("cssText", "display:none;");
        /*生成canvas图形*/
        html2canvas(content, {
            onrendered: function(canvas) {
                //添加属性
                canvas.setAttribute('id','thecanvas');
                //读取属性值
                // var value= canvas.getAttribute('id');
                document.getElementById('images').innerHTML = '';
                document.getElementById('images').appendChild(canvas);
            }
        });

        /*显示按钮*/
        $("#download").css("cssText", "display:black;");

        var oCanvas = document.getElementById("thecanvas");
        /*自动保存为png*/
        // 获取图片资源
        var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
        saveFile(img_data1, 'leixing.png');

        /*下面的为原生的保存，不带格式名*/
        // 这将会提示用户保存PNG图片
        // Canvas2Image.saveAsPNG(oCanvas);

    }
    // 保存文件函数
    var saveFile = function(data, filename){
        /*createElementNS 使用 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS*/
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

参考：https://www.sucaihuo.com/js/1946.html

demo

https://demo.demohuo.top/jquery/19/1946/demo/