将 div 的内容转换为图像答案

【问题标题】：converting contents of a div into an image将 div 的内容转换为图像
【发布时间】：2012-11-06 14:10:18
【问题描述】：

我正在创建一个图像编辑器类型的 Web 应用程序。我有一个主要的div，其中将包含许多div。

当用户单击保存按钮时，我想将主要的div 保存为文件夹中的图像。我尝试使用Canvas.toDataURL() 进行操作，但后来我发现我无法在画布标签内放置一个 div（主 div）。我也尝试了php的imagegrabscreen()函数，但是它在整个页面加载之前捕获了屏幕，所以它没有用。

任何人都可以帮助我并建议一种使用 php 或 javascript 实现此功能的方法吗？

【问题讨论】：

imagegrabscreen 抓取服务器的屏幕截图，所以我猜你正在使用localhost 处理服务器本身，对吧？

标签： php javascript html

【解决方案1】：

你为什么要使用一堆divs，而你可以只使用一个canvas并使用适当的画布功能在它上面绘图？

您正在尝试执行的操作有 plenty of examples，例如 this one。

【讨论】：

我不想做油漆之类的东西。我正在使用一堆 div，其中包含多个用户可以编辑的图像和文本，然后将其保存为图像。
好吧，你可以把那些divs 画在画布上。

【解决方案2】：

use this code to save image from canvas

function save_canvas_img()
            {

                var canvas = document.getElementById("your id");
                var canvasData = canvas.toDataURL("image/png");
                var ajax = new XMLHttpRequest();
                ajax.open("POST",'save.php',false);
                ajax.setRequestHeader('Content-Type', 'application/your page name');
                ajax.send(canvasData ); 

                alert('You have successfully saved this image');

            }`enter code here`
here save.php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{

    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];


    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData=base64_decode($filteredData);
    // Need to decode before saving since the data we received is already base64 encoded

    //echo "unencodedData".$unencodedData;
    $randomName = mktime(). rand(99999,9999999). '.png';



   $fp = fopen( 'foldername/'.$randomName, 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );}`enter code here`

【讨论】：

【解决方案3】：

如果您想对主 div 进行“截图”，请查看以下链接

Using HTML5/Canvas/JavaScript to take screenshots

http://html2canvas.hertzen.com/

【讨论】：