Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Upload HTML5 Canvas to Wordpress using ajax WordPress


I have a canvas on a front end of a WordPress site just a regular canvas tag nothing special and I'm trying to take the output and upload to WordPress eg:

canvas = document.getElementById("doc"),
data = canvas.toDataURL();

I would like to be able to upload this to the media library the issue is the size of the image is a bit large. 1-2mb so it always fails when uploading. I have tried a few methods online and have not been able to get them working. This could be jquery or just javascript. Then if I need to handle the file s $_FILES or another method.

Answers (4)


John Cotton answers:

type: "POST",
url: ****admin-ajax-url*****,
data: {
action: 'canvasUpload'
uploadImage: dataURL
}).done(function(o) {

****admin-ajax-url***** needs replacing with a var that points to the correct url.

That should get it on the server.


@ini_set( 'upload_max_size' , '64M' );

in functions.php if you file size limit is too low.

Then something like this in to handle the file:

add_action('wp_ajax_nopriv_canvasUpload', 'canvasUpload');
add_action('wp_ajax_canvasUpload', 'canvasUpload');

function canvasUpload(){
$uploads = wp_upload_dir();
$img = $_POST['uploadImage'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $uploads['path'].'/'. uniqid() . '.png';
$r = file_put_contents($file, $data);
echo $r ? $file : 'Error saving file';

User179751 comments:

thanks worked perfectly. will have to review my code to see what I had done but thank you.


Arnav Joy answers:

Can you please show me url of the site ?


Hugo Gonçalves answers:


Have you tried changing the upload size limit?

Both in the server settings and WP itself, to handle larger files.
There are multiple ways to get about this.

1- Server file size limit:
Have no idea what your server setup is, but in broader terms you can:
A: change it under CPanel, in the PHP current version page


B: or you can drop a php.ini file with the following:
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300


C: You can also add to the htaccess file:
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

2- Wordpress file size limit:
In the wp-config.php file add the following:
define('WP_MEMORY_LIMIT', '64M');

Let me know of any doubts or if it worked.

Thank You
Hugo Gonçalves


Bob answers:

As other Masters suggested have you tried increasing upload file size limits?
is image in png format? Creating it in jpeg will reduce the size I think.

Have you tried with lower quality jpeg images first?
canvas.toDataURL('image/jpeg', 0.5);