你如何将html div转换为图像,然后另存为gif或png？

我已经尝试在stackoverflow和互联网上找出大量编码div到图像方法.这些代码对我来说不起作用,因为没有一种方法正是我所需要的,而且我正在修改代码以适应我的需要.

无论如何,几分钟前我发现有人实际上将代码应用于像我一样设置的div.请看看他/她的工具(这是我正在做的更多图片):

http://kpomservices.com/html5canvas/indexsucc.html

和他/她的蓝图(源文件):

view-source:http://kpomservices.com/html5canvas/indexsucc.html

这就是我做的:

我从源文件中复制了脚本(在标记之后找到):

我将它粘贴到上面的头文件中.

我src=""用完整的网址替换了所有网址(它们还没有托管在我的服务器上,因为我正在测试这是否会首先对我有用).

我从http://kpomservices.com/HTML_to_Canvas.php复制了函数脚本:

function convert() {
                dom = document.getElementById('watch');

                // execute the html2canvas script
                var script,
                $this = this,
                options = this.options,
                runH2c = function(){
                    try {
                        var canvas =     window.html2canvas([ document.getElementById('watch') ], {
                            onrendered: function( canvas ) {

                            /*
                            canvas is the actual canvas element,
                            to append it to the page call for example
                            */
                            window.open(canvas.toDataURL());
                            //document.body.appendChild( canvas );
                            }
                        });
                    } catch( e ) {
                        $this.h2cDone = true;
                        log("Error in html2canvas: " + e.message);
                    }
                };

                if ( window.html2canvas === undefined && script === undefined ) {
                } else {.
                    // html2canvas already loaded, just run it then
                    runH2c();
                }
            }

我按原样粘贴在头文件中的标签之间.

我document.getElementById('watch')用我的div id名称替换了两个(2)实例: document.getElementById('captme').

我从源文件中复制并粘贴了显示框样式并将其粘贴到头文件中(我也尝试将其添加到css文件中,但这也不起作用):

8)我将源文件中的这两行(我不需要其他两个按钮)复制并粘贴到索引文件中:

9)我将以下行复制并粘贴到源文件中的索引文件中