canvas save in WP post WordPress

Mohamed Ahmed answers:

Hello,

If you want to convert canvas to image URL and save it to WordPress post, You can depend on this codes

jQuery
<script>
jQuery(document).ready(function($) {
/* Variables */
var canvas = $('#canvas')[0],
ctx = canvas.getContext('2d'),
photo_frame = $('.photo_frames_loading');

/* Convert canvas data to image url */
var dataURL = canvas.toDataURL('image/png');
/* Add canvas image url to photo frame div in data-url tag */
photo_frame.attr('data-url',dataURL);


/* Use Ajax to pass canvas image url to PHP function */
var imageURL = photo_frame.attr('data-url');

// This does the ajax request
$.ajax({
url: ajaxurl,
data: {
'action':'save_canvas_in_wp_post',
'imageURL' : imageURL
},
success:function(data) {
// This outputs the result of the ajax request
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});

});
</script>

#PHP to functions.php file
function save_canvas_in_wp_post() {
global $post;
if ( isset($_REQUEST) ) {

$imageURL = $_REQUEST['imageURL'];

// Save image URL to post meta field
add_post_meta( $post->ID, 'user_photo_frame', $imageURL );

}
die();
}

add_action( 'wp_ajax_save_canvas_in_wp_post', 'save_canvas_in_wp_post' );

// If you want to also use the function for non-logged in users remove slashes from next line
// add_action( 'wp_ajax_nopriv_save_canvas_in_wp_post', 'save_canvas_in_wp_post' );

/* Localize ajax script */
function enqueue_ajax_script() {
wp_register_script('ajax-script', esc_url(get_template_directory_uri()));
wp_enqueue_script('ajax-script');
wp_localize_script( 'ajax-script', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
}

add_action('wp_enqueue_scripts', 'enqueue_ajax_script');

If you need anything else please tell us