Drawing Uploaded Image(with Ajax) to Canvas

Question

I am using jQuery AJAX Form plugin to upload images without refreshing the page. It is ok if I show the uploaded image within an image tag( setting src to uploaded image path.) However, I cannot draw that uploaded image on a canvas element. I actually do not know what the problem is.

if (isset($_FILES["image"]["name"]) && !empty($_FILES["image"]["name"])) {
  $filename = $_FILES["image"]["name"];
  $tmpname = $_FILES["image"]["tmp_name"];

  $location = "uploads/";
  move_uploaded_file($tmpname, $location.$filename);
  echo $location.$filename;
} else {}

var canvas = document.getElementById("canv");
var contex = canvas.getContext("2d");           
var img = new Image();
img.src = responseText;
img.onload = function(){ contex.putImageData(img, 0, 0); }

Above is my callback function(inside) when I call when the Ajax process is done. Thanks for any helpful answer.

UPDATE: FULL CODE

<html>
<head>
<script src="jq171.js"></script>  <!--jQuery-->
<script src="jqform.js"></script> <!--jQuery ajax Form plugin-->

<script>
    $(document).ready(function(){
        $("#myform").ajaxForm(function({success: updateSrc}){
        });
    });

    function updateSrc(responseText){
        var canvas = document.getElementById("canv");
        var contex = canvas.getContext("2d");

        var img = new Image();
        img.src = responseText;
        img.onload = function(){ contex.drawImage(img, 0, 0); }

    }
</script>
</head>
<body>
<form id="myform" action="this.php" method="post" enctype="multipart/form-data" >
<canvas id="canv" width="400px" height="400px"></canvas>
<input type="file" name="image"/>
<input type="submit"/>
</form>
</body>
</html>

It should contain response from the server, in short the uploaded file path. http://www.malsup.com/jquery/form/#ajaxForm — msharpp, Jun 01 '12 at 14:26
I know what it should contain but I'm asking you to print what it actually contains ;-) in your javascript callback function add : alert(responseText); Then check that the path is ok. (if its relative path then it might be wrong if your php and JS file are not at the same location — jazzytomato, Jun 01 '12 at 14:30
it seems that updateSrc() function does not even work. I do not get alert. — msharpp, Jun 01 '12 at 14:40

score 1 · Answer 1 · answered Aug 04 '13 at 07:42

Is there a reason why you don't just do an automatic request for the image?

As in leave the updateSrc as

function updateSrc(imagePath){
        var canvas = document.getElementById("canv");
        var contex = canvas.getContext("2d");

        var img = new Image();
        img.src = imagePath;
        img.onload = function(){ contex.drawImage(img, 0, 0); }

    }

Where the imagePath is the path to the image file. for example:

updateSrc("images/example_image.jpg");

So jquery ajax request doesn't even need to be written.

score 0 · Answer 2 · answered Jun 01 '12 at 14:09

0

You are using wrong function.

context.putImageData(imgData,x,y);

it takes image data, which is not an image object but raw pixel data. Instead, you want to use :

context.drawImage(img,0,0);

It should solve your problem

answered Jun 01 '12 at 14:09

jazzytomato

6,994
2
31
44

Does not matter, I tried it before. It does not work. Here is the full code: – msharpp Jun 01 '12 at 14:15

Drawing Uploaded Image(with Ajax) to Canvas

2 Answers2

Linked