0

I am working on a custom t-shirt designer, within a Wordpress website. I'm using a Fabric.js (HTML canvas) to create the designs, and I've added WooCommerce to handle the checkout experience.

My problem is that I now need to somehow store the design as an image and tie it to the logged in user, so I can email it to the admin when the customer has checked out.

After some searching, I'm converting the canvas to dataURL in my javascript:

    dataURL = canvas.toDataURL("image/png");
    dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    $.post("image_save.php?data="+dataURL);

Then in my working dir (wp-content/themes/startit-child), I've created image_save.php to save the data to the user_meta, with the following code:

<?php
  global $current_user;
  $imageData = $_POST['data'];
  $imageData = base64_decode($imageData);
  update_user_meta( $current_user->ID, 'user_design', $_POST['$imageData']);  
?>

My POST request is failing, and receiving an net::ERR_CONNECTION_CLOSED error instead. (I suspect that I'm not pointing to my image_save.php correctly. The full error looks like (shortened obviously); https://mywebsite.com/design-page/image_save.php?data=iVBORw0KGScxzxZXC...= net::ERR_CONNECTION_CLOSED

I've wasted a lot of time trying to make this work. By this point, I'm open to any other potential solution, if any.

Priest
  • 242
  • 4
  • 11
  • 1
    You're using $.post but putting the data on the query string. You'd be better to post the data in a json object. – Lee Taylor Sep 16 '19 at 00:51
  • As Lee Taylor stated, possible you're passing a huge query string to your backend which is exceeding what it can handle. Either way if it is a POST you shouldn't use query params. See: https://stackoverflow.com/a/812962/3080207 But perhaps provide a bit more information, it's a bit difficult to know from the information provided. – mikey Sep 16 '19 at 00:57
  • Also, in my experience using fabricjs, images are stored as blobs with blob urls, you have to send those along (I think, from memory). But this all depends on whether you're letting your users save works in progress. Drop me a line if you like as I have an in the field solution using fabricjs. – Lee Taylor Sep 16 '19 at 00:59
  • 1
    I've edited my question with extra context. I think that I might be pointing to the wrong directory all together... Not sure how to properly point to my php file tho – Priest Sep 16 '19 at 01:31
  • @Priest You can be sure of the path by using an absolute path e.g. `/my/path/thing.php' (at least to test your theory) – Lee Taylor Sep 16 '19 at 14:47
  • Still not working @LeeTaylor. I get the same error, and the path looks like `https://mywebsite.com/design-page/my/path/thing.php` now ... – Priest Sep 17 '19 at 07:56
  • Assuming that your post request is landing to the correct page, please try changing your post call to using JSON. i.e.` $.post( "image_save.php", { data: dataURL } );` You will need to handle the JSON in your PHP file. At the very least please confirm that you are receiving JSON in your PHP file and that it looks correct. – Lee Taylor Sep 17 '19 at 15:37

0 Answers0