I'm working on a wordpress site about blackout poetry for a university project, where the user can blacken parts of a text to create a poem.

After the user has created his poem, we need to give him the possibility to upload the user-generated content to our server, so that we - after having checked and approved the content - can post it on the main "wall" of the website.

This being my first web development project, I've read a ton of related tutorials (literally, every single one of them....), and while my html/javascript/jQuery skills are improving, PHP and ajax calls (that seem to be necessary for this kind of job) are still way out of my league, and I don't have the time to learn them properly, 'cause the deadline is in two weeks.

Tutorials and answers like this and this suggest to use html2canvas first (which I succesfully did) to get the modified content of the paragraph and then to either use a form or an AJAX call to a PHP function to upload the base64 encoded PNG to the server, where it is decoded and saved to /wp-content/uploads. Unfortunately, they don't talk about how to handle things in wordpress, and I'm probably missing something very obvious.

I tried copying the HTML and PHP from this article to see if it worked in my wordpress site (so that I could adapt it): I put the PHP function inside the folder of the theme I'm using, but nothing happens even if a message of successful upload pops up when I press the upload button. Should I add something inside functions.php as well?

This is my code at the moment:

HTML

<div id="target"> // the text that the user interacts with
<p>Lorem ipsum......</p> 
</div>
<br/>
<h3>Preview:</h3>
<div id="previewImage"> // where the preview of the image is displayed
</div>

<input id="Preview-Image" type="button" value="Preview"/>
<a id="download-btn" href="#">
Download
</a>

Scripts:

<script>
$(document).ready(function(){





var element = $("#target");
var getCanvas;

$("#Preview-Image").on('click', function () {
     html2canvas(element, {
     onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
         }
     });
});

$("#download-btn").on('click', function () {
var imgData = getCanvas.toDataURL("image/png");

// this bit lets the user download the PNG file

var newData = imgData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.jpg").attr("href", newData);
});

});

At this point, based on what I've read, I should include an AJAX call like this:

$.ajax({
url: '/wp-admin/admin-ajax.php',
dataType: 'json',
method: 'post',
data: {action:'save_poem',img:'your-image-data-etc'},
success: function(response){ //server success response },
error: function(err){ //server error response }
})

...and include save_poem inside the theme's functions.php:

function save_poem_image(){
//code to process and save image
}
add_action("wp_ajax_save_poem", "save_poem_image");
add_action("wp_ajax_nopriv_save_poem", "save_poem_image");

Now, my question is: are the steps above correct? What should I put inside save_poem instead of "//code to process and save image"? Should it be the PHP code to decode and save the image? Otherwise, is there a simpler way to achieve what I have in mind?

Thanks in advance!