ajax没有显示画布

Question

I am trying to make a preview of a name tag before the user purchases it... and I want it to update as they type... but i've ran into a problem. The name tag shows up fine when I POST to in from a html form.... but when I use the index.php ajax, it shows up blank.

index.php

<script>
$(document).ready(function(e){
    $('#nametag').bind('change keyup input', function(ev) {
        ajax_post();
    });
});

function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "nametag.php";
    var line1 = document.getElementById("line11").value;
    var line2 = document.getElementById("line21").value;
    var line3 = document.getElementById("line31").value;
    var line4 = document.getElementById("line41").value;
    var vars = "line1="+line1+"&line2="+line2+"&line3="+line3+"&line4="+line4;
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = '<img src="images/nametag.png"/>';
}
</script>

<span id="status"></span>

nametag.php

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function(){
    context.drawImage(imageObj, 0, 0);
    context.textAlign = "center";

    context.font = "bold 18pt Arial";
    context.fillText("<?=$_POST['line1']?>", canvas.width * 0.5, 70);

    context.font = "12pt Arial";
    context.fillText("<?=$_POST['line2']?>", canvas.width * 0.5, 90);

    context.font = "12pt Arial";
    context.fillText("<?=$_POST['line3']?>", canvas.width * 0.5, 120);

    context.font = "12pt Arial";
    context.fillText("<?=$_POST['line4']?>", canvas.width * 0.5, 140);
    };
    imageObj.src = "images/nametag.png"; 
   };
</script>


<canvas width="282px" height="177px" id="myCanvas"></canvas>

Answer 1

You should be able to do this without ajax, since there's nothing for the server to do. Here's an example fiddle. I don't have the image, but it should work to just uncomment those lines.

http://jsfiddle.net/WMNS3/

$(document).ready(function () {
    var canvas = $('#myCanvas')[0];
    var context = canvas.getContext('2d');

    //var imageObj = new Image();
    //imageObj.src = "images/nametag.png"; 

    $('#nametag').bind('change keyup input', updateCanvas);

    function updateCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        //context.drawImage(imageObj, 0, 0);
        context.textAlign = "center";

        context.font = "bold 18pt Arial";
        context.fillText($('#line11').val(), canvas.width * 0.5, 70);

        context.font = "12pt Arial";
        context.fillText($('#line21').val(), canvas.width * 0.5, 90);

        context.font = "12pt Arial";
        context.fillText($('#line31').val(), canvas.width * 0.5, 120);

        context.font = "12pt Arial";
        context.fillText($('#line41').val(), canvas.width * 0.5, 140);
    }

});