Results 1 to 4 of 4

Thread: Canvas Image

  1. #1
    Join Date
    Jul 2012

    Exclamation Canvas Image

    I'm having problem in saving the canvas image data with the specific title in hte input text. It saved in the server but you need to rename ("name.png") it in the php file.

    HTML Code:
    <input type="text" id="titlecanvas" name="title" size="30" />
    <input type="button" id = "RoSave" value="Save my drawing!" onclick="RoSave(this.frm);">
    and my javascript is this:

    function RoSave(frm)
    var data = document.getElementById("RoCanvas").toDataURL('image/png');
    var ajax = new XMLHttpRequest();
    ajax.setRequestHeader('Content-Type', 'application/upload');
    and the php file is:

    PHP Code:
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))


    $fp fopen('name.png''wb' );
    fclose$fp );

    I need to get the input name so that it will be the name of the Image that will be saved to the server.

    Please Help!

  2. #2
    Join Date
    Feb 2003
    Michigan, USA
    Pass the file name from the text field as a query string parameter:

    ajax.open("POST",'file_path/canvass.php?filename=' + escape(valueOfTextField),false);
    Then you should be able to access it via $_GET['filename'] in PHP. Be sure to properly sanitize the file name so users cannot save data on your server outside of the directory where you want things saved. You also might want to check content-type request header in PHP to make sure users can't upload an executable file. Just because JavaScript is limiting the upload to an image doesn't mean somebody can't create a PHP, Ruby or Perl script that POSTs a virus to your server.

  3. #3
    Join Date
    Jul 2012
    Thank you toicontien!, It works! thank you for the information you gave me.

  4. #4
    Join Date
    Jul 2012
    Dear toicontien:

    Could you please explain "escape(valueOfTextField)" more detailed?Thanks~

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles