0

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!

1

Since the file you send is base64 encoded, you will need to decode and save the result into a file at a temp directory. From there it is just a normal server side wordpress image manipulation and insertion of the relevant info into the DB, something that there are many examples for on this site.

You should probably return the URL of the generated image in the AJAX response, but that depends on what results you need to show

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.