WordPress front-end image upload. Implement canvas resizing WordPress
- SOLVED
I´m working on a WordPress site that have front end image uploading in place based on this article. http://madebyraygun.com/blog/2012/upload-and-attach-multiple-images-from-the-wordpress-front-end/
In most cases the photos is taken with a mobile device like iPad/iPhone and the upload time is quite long on a 3G connection.
The goal is to implement canvasResize in this WordPress project but i have a hard time figuring it out.
WordPress demo site is here:
http://demo.twoway.se/wp-canvas-resize-tw/front-end-upload-of-images/
canvasResize demo site is here (my own version)
http://demo.twoway.se/canvas-resize-tw/
I have identified the main problem (i think).
How can i pass the canvas image array to my existing WordPress function?
Is the canvas image array in the right format?
In http://demo.twoway.se/canvas-resize-tw/ the image array is passed to the file uploads.php that saves the image to the server.
https://github.com/gokercebeci/canvasResize/blob/master/index.html#L143
My custom processing in uploads.php looks like this
//Set folder and filname
$filename2 = 'uploads-canvas/' .'canvas-resized-'. uniqid() . '.jpg';
//Get image from "url"
$image_from_canvas = file_get_contents($_FILES["photo"]["tmp_name"]);
//Save the image to folder
file_put_contents($filename2, $image_from_canvas);
In WP install http://demo.twoway.se/wp-canvas-resize-tw/front-end-upload-of-images/ the existing upload file processing is handled in functions.php
The theme is a modified Twentyeleven theme (Only single.php and functions.php)
Theme files is here:
https://www.dropbox.com/sh/4ac5dxtxgm16ect/TyYjVftJbG
canvasResize site files is here:
https://www.dropbox.com/sh/41rv9sqvyohoiq0/p9QH0A3GqX
Using the native WordPress app is not an option. The resizing have to take place in the browser.
There have to be a fallback to existing code when the browser is not supporting canvas.
If needed i can provide file access to demo installs above and a "lab" WP install.
Working demo install gets accepted answer.
Answers (1)
John Cotton answers:
Hi TwoWay
I don't have time today to write the actual code, but if I understand your question, here's what you need to do.
Canvas is giving you a base64 string for the image (look at the image src). It's the string (together with any other meta details) that you need to pass back to the server. You could ajax to do that or a normal form post.
Once there, you can convert that string to an image with PHP like this:
$base64_string = $_POST['image_src']; // will be in the format 'data:image/jpeg;base64,/9HvTM470buTUsexKD0o3c4NRFjRu...etc
$base64_string = preg_replace( '/data:image\/.*;base64,/', '', $base64_string ); // The header needs stripping
$output_file = 'myfile.jpg' // Clearly you'd need to adjust that based on the file type sent, eg gif, png
$image = fopen( $output_file, 'wb' );
fwrite( $image, base64_decode( $base64_string) );
fclose( $image );
// process the saved file as normal
Hope that helps.
John Cotton comments:
PS Looking at your code, you really should try and do it with jQuery and WP ajax.
So your image uploading should be more like this:
// IMAGE UPLOADING
// =================================================
// your code up to here....
var ajax_data = canvasResize('dataURLtoBlob', data);
ajax_data.image_src = data;
ajax_data.action = 'upload_canvas_image';
jQuery.ajax({
type : 'POST',
url : '/wp-admin/admin-ajax.php', // This really be from the php admin_url('admin-ajax.php')
data : ajax_data,
success : function( r ) {
// whatever you want to do client side once the upload has happened.
}
});
And in theme functions.php:
function upload_canvas_image() {
// Image processing code from previous answer and whatever else you want to do
}
add_action('wp_ajax_upload_canvas_image', 'upload_canvas_image');
add_action('wp_ajax_nopriv_upload_canvas_image', 'upload_canvas_image');
twoway comments:
John, second answer looks promising. I would really like to see this implemented in a working demo install or full code for single.php and functions.php The .js files have to be enqueued and so on. I can provide an cloned lab-install for you (ftp+wp credentials) if you like.
If you send me a mail ture [at] twoway.se i can fix this.
twoway comments:
John, just to be crystal clear.
This is not a WP install:
canvasResize demo site is here (my own version)
http://demo.twoway.se/canvas-resize-tw/
But this is:
http://demo.twoway.se/wp-canvas-resize-tw/front-end-upload-of-images/
But of course you see this...
John Cotton comments:
Have sent you an email...
twoway comments:
Hi John
Thanks for the excellent solution.
Done!
twoway comments:
Hi again John.
My first time here so i think i missed to vote up. How do i fix this so you get payed?