php - 将 div 的内容转换为图像

Question

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

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

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

Answer 1

当您可以只使用一个并使用适当的画布功能在其上绘制时，为什么还要使用一堆divs ？canvas

有很多你正在尝试做的事情的例子，比如这个。

Answer 2

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

使用 HTML5/Canvas/JavaScript 截取屏幕截图

http://html2canvas.hertzen.com/

Answer 3

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`