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

Question

我已经尝试在 stackoverflow 和整个互联网上找出大量编码 div 到图像的方法。这些代码对我不起作用，因为没有一种方法正是我需要的，而且我通过修改来满足我的需要，从而搞砸了代码。

无论如何，几分钟前我发现有人正在将代码应用到像我一样设置的 div。请看看他/她的工具(这是我正在做的，只是多了几张图片):

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

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

查看源代码:http://kpomservices.com/html5canvas/indexsucc.html

这是我做的:

1. 我从源文件中复制了脚本(在 </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>

2. 我将它粘贴到 </head> 上方的头文件中。

3. 我用完整的 url 替换了所有 src=""(它们还没有托管在我的服务器上，因为我正在测试这是否对我有用)。

4. 我从 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();
                   }
               }
   

5. 我按原样粘贴在头文件中的 <script></script> 标记之间。

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

7. 我从源文件中复制并粘贴了显示框样式，并将其粘贴到头文件中的 </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 post 发布到 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)
                }
            })
        }
    })
}