Question

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

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

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

和他/她的蓝图（源文件）：

视图源：http://kpomservices.com/html5canvas/indexsucc.html

这就是我所做的：

我从源文件中复制了脚本（在</body>标记之后找到）：

<script src="js/html2canvas.js"></script> <script src="js/base64.js"></script> <script src="js/canvas2image.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
我将其粘贴到</head>上方的标题文件中。
我用完整的网址替换了所有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();
                }
            }

我按原样粘贴在头文件中的<script></script>标记之间。
我用我的div id名称替换了（2）个实例document.getElementById('watch')： document.getElementById('captme')。

我从源文件中复制并粘贴了显示框样式，然后将其粘贴到头文件中的</head>之前（我也尝试将其添加到css文件中，但这不起作用，要么）：

<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5;   /*older Safari*/
opacity: 0.5;   /*supported by current Mozivalidate-textlla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>

8）我在<?php get_header(); ?>之后将源文件中的这两行（我不需要其他两个按钮）复制并粘贴到索引文件中：

<div id="displaybox" style="display: none;"></div>
<input type="button" value="View As Image" onClick="javascript:return convert();">

9）我在<div id="captme">之后将此行从源文件复制并粘贴到索引文件中：

<canvas id="localcanvas" style="display:none" width=500 height=500></canvas>

10）所有这一切都没有效果。我可以点击按钮，但它什么都不呈现。

出了什么问题？感谢您分享的任何指导！

Answer 1

这对我有用。它从div solnePuzzle呈现图片并通过ajax帖子发布到PHP脚本。在PHP脚本save.php中，我base_64解码并通过file_put_content将内容保存到img。

html2canvas js

function capture() {
    $("#solnePuzzle").html2canvas({
        onrendered: function (e) {
            $("#img_val").val(e.toDataURL("image/png"));
            var t = $("#myForm").serializeArray();
            $.ajax({
                url: "save.php",
                type: "POST",
                dataType: "json",
                data: {
                    box: box,
                    form: t
                },
                success: function (e) {
                    alert(e.text)
                }
            })
        }
    })
}

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

1 个答案: