We have a page inside our Drupal site that contains two canvases (one webGL). When the user presses the save button, we create a dataURL (about 300kb) and would like to send this png to drupal (from Javascript) to create a Drupal node. What would be the best way to accomplish this?

2 Answers 2


Here's a few things you can try. Your scenario may require customizations or other workarounds.

First, make a content type with an image field.
Second, in hook_menu, register a path and callback and post the image with ajax. You will have to post your image data on this url.

function MODULE_menu(){
   $item['path/to/post/node/data'] = array(
       'page callback' => 'your_callback',
       'access arguments' => array('create <type> content'),

Then, setup you callback as

function your_callback(){
    // Storing image data to file
    $success = file_put_contents($file_path,  base64_decode($_POST['image_data']));
    // Creating node
      $node = new stdClass();
      $node->type = '<type>';
      $node->title    = 'Node Created Programmatically on ' . date('c');
      $node->language = LANGUAGE_NONE;

      $file_realpath = drupal_realpath($file_path);
      $file = (object) array(
        'uid' => 1,
        'uri' => $file_realpath,
        'filemime' => file_get_mimetype($file_realpath),
        'status' => 1,
      $file = file_copy($file, 'public://');
      // field_image is assumed as the machinename of your image field.
      $node->field_image[$node->language][0] = (array)$file;


      drupal_json_output(array('status' => 'OK', 'message' => 'New image node content is created'));
      drupal_json_output(array('status' => 'FAILURE', 'message' => 'There is some issue in order to create new image node.'));


Instead of snippets, use a more complete Drupal javascript framework such as


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.