如何将画布编辑的图像数据获取到 HTML 输入字段？

Question

<canvas id="c" name="c"></canvas>
<input style="display:none;" type="file" name="nextImage" id="nextImage"/>

Above code is canvas where edited image is placed, below is input field where i want the canvas image value.

jQuery('document').ready(function(){

  jQuery('#svconvac').click(function(e){
      e.preventDefault();
      console.log("Click");
      var canvas = document.getElementById('c');
      var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    //jQuery("#nextImage").val(dataURL);

    console.log(dataURL);
    //return false;
    jQuery.ajax({
      type: "POST",
      url: "editMap.php",
      data: { 
        imgBase64: dataURL
      },
      success: function(data) {
        data['dataURL'] = document.getElementById("nextImage").value;
        console.log('saved'); 
      } 
    });


  });

});

So far what i tried using this ajax function but no chances to be successful, am i calling wrong data in ajax? where it says:

editedMap = $data['dataURL']; 

My Function for saving to database Please also look at this:

public function mapUpdate($data, $file, $id)
        {
            $floor_name =$this->fm->validation($data['floor_name']);

            $floor_name =mysqli_real_escape_string($this->db->link, $data['floor_name']);

            $permited  = array('jpg', 'jpeg', 'png', 'gif');
            $file_name = $file['nextImage']['name'];
            $file_size = $file['nextImage']['size'];
            $file_temp = $file['nextImage']['tmp_name'];

            $div = explode('.', $file_name);
            $file_ext = strtolower(end($div));
            $unique_image = substr(md5(time()), 0, 10).'.'.$file_ext;
            $uploaded_image = "uploads/maps/".$unique_image;

            if($floor_name == '')
            {
                $msg = "<span class='error'> Fields must not be empty !! </span>";
                return $msg;
            }
            else{
                if (!empty($file_name)) 
                {

                    if ($file_size >1048567) 
                    {
                        echo "<span class='error'>Image Size should be less then 1MB! </span>";
                    } 

                    elseif (in_array($file_ext, $permited) === false) 
                    {
                        echo "<span class='error'>You can upload only:-".implode(', ', $permited)."</span>";
                    }


                    else
                    {
                        $delImageQuery = "SELECT * FROM tbl_map WHERE mapId='$id'";
                        $getData = $this->db->select($delImageQuery);

                        if ($getData) 
                        {
                            while ($delImg =$getData->fetch_assoc()) 
                            {
                                $delLink =  $delImg['mapImg'];
                                unlink($delLink);
                            }
                        }


                        move_uploaded_file($file_temp, $uploaded_image);

                        $query= "UPDATE tbl_map SET floorName = '$floor_name', mapImg = '$uploaded_image' WHERE mapId ='$id' ";

                        $update_row =$this->db->update($query);
                        if($update_row)
                        {
                            $msg ="<span class='success'> Map Update successfully. </span>";
                            return $msg;
                        }

                        else 
                        {
                            echo "<span class='error'>Map Not Update !</span>";
                        }
                    }

                } 

                else
                {                               
                    $query= "UPDATE tbl_map SET floorName = '$floor_name' WHERE mapId ='$id' ";

                    $update_row =$this->db->update($query);

                    if($update_row)
                    {
                        $msg ="<span class='success'> Map Update successfully. </span>";
                        return $msg;
                    }

                    else 
                    {
                        echo "<span class='error'>Map Not Update !</span>";
                    }
                }
            }
   }// Update function ends here

Hoping for some help.

Answer 1

Input type file does not accept base64 data as value, you can use input type hidden like below.

HTML

<canvas id="c" name="c"></canvas>
<input type="hidden" name="nextImage" id="nextImage"> 

JS

jQuery('document').ready(function(){

  jQuery('#svconvac').click(function(e){
      e.preventDefault();
      console.log("Click");
      var canvas = document.getElementById('c');
      var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    //jQuery("#nextImage").val(dataURL);

    console.log(dataURL);
    //return false;
    jQuery.ajax({
      type: "POST",
      url: "editMap.php",
      data: { // [1]
        imgBase64: dataURL
      },
      success: function(data) { // [2]
        // data at [1] and [2] are not same, data [2] is variable that hold values of response from "editMap.php" API, you may also change this name to any name like response.
        data['dataURL'] = document.getElementById("nextImage").value;
        console.log('saved'); 
      } 
    });


  });

});