Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DrawingBoard: let people draw and save their images server-side https://github.com/Leimi/drawingboard.js
<?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);
?>
<!-- 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>
//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();
});
@mpparent

This comment has been minimized.

Copy link

@mpparent mpparent commented Jul 2, 2016

Hi, I can't make it works, this line give me a 403 error:
$(this).find('input[name=image]').val( imgInput );

@mpparent

This comment has been minimized.

Copy link

@mpparent mpparent commented Jul 3, 2016

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.

@mpparent

This comment has been minimized.

Copy link

@mpparent mpparent commented Jul 3, 2016

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

@Marty-f13

This comment has been minimized.

Copy link

@Marty-f13 Marty-f13 commented Jun 28, 2019

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

@siva-farshore

This comment has been minimized.

Copy link

@siva-farshore siva-farshore commented Dec 12, 2019

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

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

@ikunyemingor

This comment has been minimized.

Copy link

@ikunyemingor ikunyemingor commented May 29, 2020

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}); } });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment