Sending a canvas.toDataUrl() to php via AJAX

Question

I am trying to send a canvas.toDataUrl() to a php page via AJAX.

Here's is my try:

JavaScript code:

function showUser() {
str = "url="+canvas.toDataUrl();

     if (window.XMLHttpRequest) {
             // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
     } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
   }
    xmlhttp.open("GET","file.php?"+str,true);
    xmlhttp.send();
}

php:

<?php
   $url = $_GET['url'];
   echo "$url";
?>

The code above doesn't seem to be working, although I did the exact same thing but with a String value instead, like the following:

    function showUser() {
str = "url=12345";

     if (window.XMLHttpRequest) {
             // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
     } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
   }
    xmlhttp.open("GET","file.php?"+str,true);
    xmlhttp.send();
}

This one works fine, but when I use canvas.toDataUrl() it doesn't work !? why?

Is there another way to send canvas.toDataUrl() to php?

Thanks

in an html file in the same folder (I'm not sure I understood the question) Thanks — Mjeed, May 10 '14 at 11:46

score 1 · Answer 1 · answered May 10 '14 at 21:17

SOLVED

The problem was that I was trying to send Large data through GET, I solved it by sending the same (large) data through POST POST is a little more complex than GET though

Here's how to send data via AJAX using POST:

http://www.javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml

I used the code in the link and it works fine with me anyone having the same problem please refer the link above and use POST instead of GET

Thanks everybody

score 0 · Answer 2 · answered May 10 '14 at 11:11

0

I reccommend trying the javascript encodeURIComponent() function like this:

str = "url="+encodeURIComponent(canvas.toDataUrl());

The thing is, that dataurl contains symbols like "/" so it might get falsely interpreted. Let me know if that works.

answered May 10 '14 at 11:11

ReGdYN

536
2
7

`/` won't be falsely interpreted after a `?` because you're now in the _search_ – Paul S. May 10 '14 at 11:27
Could you try `console.log(canvas.toDataUrl());` just to check whether anything is coming from there at all. If not, there is probably something wrong with your variable canvas, which is out of scope for this function. – ReGdYN May 10 '14 at 11:51
I just tried it, but i'm not sure what it does. `alert(canvas.toDataUrl())` works fine and outputs an alert box with the url but it is not sent to the php file ! thanks – Mjeed May 10 '14 at 12:27
I just tried choosing another canvas (i.e. drawing another image in the canvas) and it worked fine ! The problem is that it does not want with a certain image. why!? really strange – Mjeed May 10 '14 at 12:49
That is indeed very strange. I can't think of any possible reasoning for this from the top of my head. Glad you got it working for at least some image. – ReGdYN May 10 '14 at 12:54
I just realised something. You could check for this: http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception . If the drawing is not based on the same domain, this could raise an error. Seems unlikely though. – ReGdYN May 10 '14 at 12:57
@ReGdYN, actually a CORS security violation **is likely** since the method succeeds on one image and fails on another. – markE May 10 '14 at 15:41

Sending a canvas.toDataUrl() to php via AJAX

2 Answers2

Linked