SVG 和 Div 文本到一个画布中

Question

我正在做一个项目，我有一个用户填写的表单。该表单有多种选项可以改变图像的视觉外观。我有一个单独的 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;           
}   

});

使用 canvg 插件将 svg 添加到 canvas-svg，并使用 rasterHTML 将 div 文本添加到 canvas-svg。我想将画布 png 嵌入到电子邮件中。我的 php 代码如下，但由于某些奇怪的原因，c_DataURL 没有在我的电子邮件文本中返回值

//Sanitize input data using PHP filter_var().
$c_name             = filter_var($_POST["c_name"], FILTER_SANITIZE_STRING);
$c_address          = filter_var($_POST["c_address"], FILTER_SANITIZE_STRING);
$c_suburb           = filter_var($_POST["c_suburb"], FILTER_SANITIZE_STRING);
$c_postcode         = filter_var($_POST["c_postcode"], FILTER_SANITIZE_STRING);
$c_state            = filter_var($_POST["c_state"], FILTER_SANITIZE_STRING);
$c_phone            = filter_var($_POST["c_phone"], FILTER_SANITIZE_STRING);
$c_fax              = filter_var($_POST["c_fax"], FILTER_SANITIZE_STRING);
$c_email            = filter_var($_POST["c_email"], FILTER_SANITIZE_EMAIL);
$c_svg_text = $_POST['c_dataURL'];

define('UPLOAD_DIR', 'http://localhost:8080/web/images/');

$c_svg_text = str_replace('data:image/png;base64,', '', $c_svg_text);
$c_svg_text = str_replace(' ', '+', $c_svg_text);
$c_svg_text = base64_decode($c_svg_text);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';//email body
$subject = "test";
$message_body = "Enquiry complete" . "\r\n" .
                "Name: ".$c_name."\r\n".
                "Address: ".$c_address."\r\n".
                "Suburb: ".$c_suburb."\r\n".
                "Postcode: ".$c_postcode."\r\n".
                "State: ".$c_state."\r\n".
                "Phone: ".$c_phone."\r\n".
                "Fax: ".$c_fax."\r\n".
                "Email: ".$c_email."\r\n".
                "Image: ".$c_svg_text."\r\n";

//proceed with PHP email.
$headers  = 'MIME-Version: 1.0'."\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$headers .= 'From: xxx@xxx.com.au'."\r\n";

'Reply-To: '.$user_email.''."\r\n".
'X-Mailer: PHP/' . phpversion();

$send_mail = mail($to_email, $subject, $message_body, $headers);

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

Answer 1

我已经能够使用以下代码将 svg（使用 canvg.js）和 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;
    }
});

});

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