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

Question

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

我遇到的问题是，当我尝试将两者结合起来以便可以将 Div bg 和画布作为图像保存到服务器时，没有任何反应，我认为这是由于 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

顺便说一句，我不知道你为什么要使用插件来做任何你通过本机画布 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()