无法将画布内的图像保存到png文件中

Question

我需要你的帮助。

我尝试用canvas（两个图像和文本）生成这样的图像：

我想要

但是在我通过php将画布文件保存到png图像后，所有图像都消失了（文本没问题）

图片的问题在哪里？我试试这两天，但我能做到这一点。我在这里发布我的代码，也许有人找到我能做的。

INDEX index.php

<canvas id="myCanvas" width="500" height="400"></canvas>
<img id="canvasImg"/>   

<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    function loadImages(sources, callback){
        var images = {};
        var loadedImages = 0;
        var numImages = 0;

        for(var src in sources){
            numImages++;
        }

        for(var src in sources){
            images[src] = new Image();
            images[src].onload = function(){
                if(++loadedImages >= numImages){
                    callback(images);
                    }                    
                };
                images[src].src = sources[src];
        }
    }

    var sources = {
        arnold : "arnold.jpg",
        silvester : "silvester.jpg"
    };

    loadImages(sources, function(images){
    context.drawImage(images.arnold, 20, 20);
    context.drawImage(images.silvester, 280, 20);
    });

    context.font = "15pt Calibri";
    context.fillText("Arnold Schwarzenegger", 30, 300);

    context.font = "15pt Calibri";
    context.fillText("Silvester Stalonne", 310, 300);



    var dataURL = canvas.toDataURL();

    document.getElementById('canvasImg').src = dataURL;
    $.ajax({
        type: "POST",
        url: "test.php",
        data: { 
        imgBase64: dataURL
        }
    }).done(function(response) {
    console.log('saved: ' + response); 
    });

</script>

PHP test.php

define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
//send request to ocr 
print $success ? $file : 'Unable to save the file.';