Question

我目前有一个脚本，可以通过使用html2canvas成功地从画布创建一个包含Div背景图像的图像。我还有一个脚本，可以使用canvas2image插件将画布作为图像保存到服务器，但背景不会显示。

我遇到的问题是，当我尝试将两者结合起来以便将Div bg和canvas作为图像保存到服务器时，没有任何事情发生，我认为是由于canvas2image插件没有触发。

这两个插件组合的代码就在这里。

function exportAndSaveCanvas()  {

html2canvas($("#containingDiv"), { 
        background:'#fff',
        onrendered: function(canvas) { 

       // var imgData = canvas.toDataURL('image/jpeg'); <--This would create the image needed 
    //but I replaced with the line below to tie in the two plugins

        var screenshot = Canvas2Image.saveAsPNG(canvas, true);      

        canvas.parentNode.appendChild(screenshot);
        screenshot.id = "canvasimage";      
        data = $('#canvasimage').attr('src');
        canvas.parentNode.removeChild(screenshot);

        // Send the screenshot to PHP to save it on the server
        var url = 'upload/export.php';
        $.ajax({ 
            type: "POST", 
            url: url,
            dataType: 'text',
            data: {
                base64data : data
            }
        });

      }
   });

 }

将图像上传到服务器的export.php代码在这里

<?php


    $data = $_REQUEST['base64data']; 
    //echo $data;

    $image = explode('base64,',$data); 


    file_put_contents('../uploadimg/myImage.jpg', base64_decode($image[1]));

?>

我希望能够将两个插件组合在一起并将我的画布与Div背景保存到服务器，但看起来像canvas2image插件并不会触发。

谢谢！

Answer 1

在写入其他图像之前将背景图像写入画布。关于将图像写入画布的MDN页面应该包括：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

顺便说一句，我不确定您为什么要使用插件来执行使用本机canvas API免费获得的任何内容。

Answer 2

dtanders 说：“另外，我不确定你为什么要使用插件来做任何你使用原生画布API免费获得的东西。”

这让我觉得我让它变得比它需要的更困难所以我剥掉了一些代码。下面的脚本正是我需要的。

function exportAndSaveCanvas()  {

        html2canvas($("#containingDiv"), { 
        background:'#fff',
        onrendered: function(canvas) {         
           var imgData = canvas.toDataURL('image/jpeg');   


    var url = 'upload/export.php';
        $.ajax({ 
            type: "POST", 
            url: url,
            dataType: 'text',
            data: {
                base64data : imgData
            }
        });     
        }

    }); //End html2canvas
    } // End exportAndSaveCanvas()

使用html2canvas将带有背景图像的画布保存到服务器

2 个答案: