Question

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

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

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

Answer 1

当你只使用一个div并使用适当的画布函数绘制它时，为什么要使用一堆canvas？

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

Answer 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`

Answer 3

如果您想拍摄主要div的“屏幕截图”，请查看以下链接

Using HTML5/Canvas/JavaScript to take screenshots

http://html2canvas.hertzen.com/

将div的内容转换为图像

3 个答案: