Php SVG和Div文本合并到一个画布中

我正在做一个项目，我有一个用户填写的表格。表单具有各种选项，可以改变图像的视觉外观。我有一个单独的div，它包含来自用户输入的文本，我想将这些文本放在动态svg的页面上，输出为png，并将其嵌入到电子邮件中

以下是“我的提交”按钮的代码：

$('#form_check_out').submit(function() {        
$('#hidden-response').text('');

if ($(this).valid()) {

    $('#hidden-response').text('Congratulations! Your form has been submitted!');
    $('#hidden-response').fadeIn('slow');   
            //CREATE XML FROM THE SVG OBJECT

        var canvasTemp = document.getElementById("canvas-svg2");
        var oSerializer = new XMLSerializer();
        var sXML = oSerializer.serializeToString(document.getElementById("SVG_scene"));

        //DRAW XML ONTO THE CANVAS ELEMENT
        canvg(canvasTemp, sXML,{ ignoreMouse: true, ignoreAnimation: true })

        rasterizeHTML.drawHTML(document.getElementById("text-top-bottom").innerHTML, canvasTemp);
        //dataURL represents to encoded PNG data 
        var dataURL = document.getElementById("canvas-svg2").toDataURL("image/png");
        document.getElementById("svg-text").value = dataURL;

        var w=window.open('about:blank','image from canvas');
        w.document.write("<img src='"+dataURL+"' alt='from canvas'/>");
        console.log(dataURL);

        post_data = {
            'c_name'        : $('input[name=name]').val(),
            'c_address'     : $('input[name=address]').val(),
            'c_suburb'      : $('input[name=suburb]').val(),
            'c_postcode'    : $('input[name=postcode]').val(),
            'c_state'       : $('input[name=state]').val(),
            'c_phone'       : $('input[name=phone]').val(),
            'c_fax'         : $('input[name=fax]').val(),
            'c_email'       : $('input[name=email]').val(),
            'c_dataURL'     : $('input[name=notes]').val()
        };



        //Ajax post data to server
       $.post('http://localhost:8080/web/secure_email_code.php', post_data, function(response){
            $("#form_check_out").hide().html(output).slideDown();
        }, 'json');

    return false;
}else{
    alert("This form has problems, lets start validating!");
    $('#form_check_out').validate();
    $('#hidden-response').text('Please input all required fields to continue.');
    $('#hidden-response').fadeIn('slow');
    return false;           
}   

---

如果有人能发现我迄今为止所做的错误，我将不胜感激。。。我只想将svg和div添加到画布，然后将画布添加到png，然后将png嵌入到电子邮件中。我知道我很接近。。。谢谢。

我已经能够使用canvg.js将svg和div html2canvas显示到一个画布中，使用以下代码

$("#SaveIt").click(function () {
var canvasTemp = document.getElementById("canvas-svg2");
var oSerializer = new XMLSerializer();
svg = document.getElementById("SVG_scene"); 
var sXML = oSerializer.serializeToString(svg);
canvg(canvasTemp, sXML,{ ignoreMouse: true, ignoreAnimation: true })


html2canvas($("#text-top-bottom"), {
    onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");



            var ctx = canvasTemp.getContext('2d');
            var img = new Image;
                img.onload = function(){
                    ctx.drawImage(img,0,0); // Or at whatever offset you like
                };
            img.src = myImage;
    }
});

})

当我右键单击画布并查看图像时，我会看到一个表示完整图像数据URL的长字符串，但是，当我将myImage的值输出到代码中未显示的textarea时，该字符串不完整，仅显示发送到画布的带有html2canvas的div。如果在画布中同时显示SVG和div信息，为什么我不能提取整个画布的整个dataURL并将其显示到textarea中

$("#SaveIt").click(function () {
var canvasTemp = document.getElementById("canvas-svg2");
var oSerializer = new XMLSerializer();
svg = document.getElementById("SVG_scene"); 
var sXML = oSerializer.serializeToString(svg);
canvg(canvasTemp, sXML,{ ignoreMouse: true, ignoreAnimation: true })


html2canvas($("#text-top-bottom"), {
    onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");



            var ctx = canvasTemp.getContext('2d');
            var img = new Image;
                img.onload = function(){
                    ctx.drawImage(img,0,0); // Or at whatever offset you like
                };
            img.src = myImage;
    }
});