DrawingBoard: let people draw and save their images server-side https://github.com/Leimi/drawingboard.js

create-drawing.php

<?php
//server-side code where we save the given drawing in a PNG file

$img = filter_input(INPUT_POST, 'image', FILTER_SANITIZE_URL);
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);

//see http://j-query.blogspot.fr/2011/02/save-base64-encoded-canvas-image-to-png.html
$img = str_replace(' ', '+', str_replace('data:image/png;base64,', '', $img));
$data = base64_decode($img);

//create the image png file with the given name
file_put_contents(__DIR__.'/path/to/images/folder/'. str_replace(' ', '_', $name) .'.png', $data);
?>

form.html

<!-- html page where you can draw, name and submit your creations -->

<form class="drawing-form" action="create-drawing.php" method="post">

  <!-- this will be the drawingboard container -->
  <div id="board">

  </div>

  <!-- this will be the input used to pass the drawingboard content to the server -->
  <input type="hidden" name="image" value="">

  <label>Name <input type="text" name="name" /></label>

  <button>Submit</button>

</form>

script.js

//javascript code that intercepts form submission to add drawingboard content to the form data sent to the server

var myBoard = new DrawingBoard.Board('board');

$('.drawing-form').on('submit', function(e) {
   //get drawingboard content
  var img = myBoard.getImg();
  
  //we keep drawingboard content only if it's not the 'blank canvas'
  var imgInput = (myBoard.blankCanvas == img) ? '' : img;
  
  //put the drawingboard content in the form field to send it to the server
  $(this).find('input[name=image]').val( imgInput );

  //we can also assume that everything goes well server-side
  //and directly clear webstorage here so that the drawing isn't shown again after form submission
  //but the best would be to do when the server answers that everything went well
  myBoard.clearWebStorage();
});

It finally worked. I was a mod_security issue. Don't know yet wich one. But if they give me the information I will put it here.

It was a rule to prevent a XSS attack that prevented $(this).find('input[name=image]').val( imgInput ); to works and give a 403 error

What do you call to reset the board (set it back to a fresh canvas after saving)

What do you call to reset the board (set it back to a fresh canvas after saving)

Try this,
myBoard.reset({ background: true });`

What do you call to reset the board (set it back to a fresh canvas after saving)

Try this,
myBoard.reset({ background: true });`

Worked!!!
$('#clear').on({ click: function () { imageBoard.reset({background: true}); } });