custom field - Saving canvas generated image when saving post causes 404 error

admin管理员组

文章数量:1386672

I have added custom functionality to the wordpress post form where a canvas image is generated, passed to an input and then I am trying to save it. But when I click the "Update" button I am shown the 404 error page.

In functions.php of my theme I have:

add_action( 'edit_form_advanced', 'addHtmlToForm' );

function addHTMLToForm(){

?>
<input type="hidden" name="myimage" id="myImage" value="" />
<canvas width="700" height="700" id="mainImage"></canvas>
<script>
var img = new Image;
var mainCanvas = document.getElementById('mainImage');

img.crossOrigin = "anonymous";

img.onload = function(){

    ctx.drawImage(img,0,0); 
    jQuery('#yImage').val(mainCanvas.toDataURL('image/png'));
};

img.src = '';
</script>
<?php
}

Then I save the data through the function

add_action( 'save_post', 'saveExtraFields', 10, 3);

function saveExtraFields($ID){
    global $post, $wpdb;

    $mapFileName = false;

    if(isset($_POST['myimage']) && $_POST['myimage'] != ''){
        $uploadDir = $_SERVER['DOCUMENT_ROOT'].'/uploads/products/';

        $mapFileName = "{$ID}.png";

        $img = $_POST['myimage'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $file = $uploadDir.$mapFileName;
        file_put_contents($file, $data);
    }

}

I have added custom functionality to the wordpress post form where a canvas image is generated, passed to an input and then I am trying to save it. But when I click the "Update" button I am shown the 404 error page.

In functions.php of my theme I have:

add_action( 'edit_form_advanced', 'addHtmlToForm' );

function addHTMLToForm(){

?>
<input type="hidden" name="myimage" id="myImage" value="" />
<canvas width="700" height="700" id="mainImage"></canvas>
<script>
var img = new Image;
var mainCanvas = document.getElementById('mainImage');

img.crossOrigin = "anonymous";

img.onload = function(){

    ctx.drawImage(img,0,0); 
    jQuery('#yImage').val(mainCanvas.toDataURL('image/png'));
};

img.src = 'https://source.to.my.image.png';
</script>
<?php
}

Then I save the data through the function

add_action( 'save_post', 'saveExtraFields', 10, 3);

function saveExtraFields($ID){
    global $post, $wpdb;

    $mapFileName = false;

    if(isset($_POST['myimage']) && $_POST['myimage'] != ''){
        $uploadDir = $_SERVER['DOCUMENT_ROOT'].'/uploads/products/';

        $mapFileName = "{$ID}.png";

        $img = $_POST['myimage'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $file = $uploadDir.$mapFileName;
        file_put_contents($file, $data);
    }

}

• posts
• custom-field

Share Improve this question asked Apr 22, 2020 at 9:39 Timur GafforovTimur Gafforov 11144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As it happens it's a Firefox issue - both classic Firefox and Firefox developer edition. Other browsers work fine. Why it threw me to 404 page of the web-site remains a mystery to me.

本文标签： custom fieldSaving canvas generated image when saving post causes 404 error