这是我的 HTML 代码。 <canvas id='sig-canvas' width='' height='100%'></canvas>

这是我的ajax调用。

function signature(todo) {
  var canvas = document.getElementById("sig-canvas");
  var pngUrl = canvas.toDataURL("image/png");       
  var sign = { img: pngUrl };
  
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  })
  $.ajax({
    type: "POST",url: '/addSignature',data: sign,// serializes the form's elements.
    success: function (data) {          
      $("#msg").delay(0).fadeIn(300);
    },error: function (data) {
       $("#msg").delay(5200).fadeOut(300);
    }
  });

这是我的控制器代码。

public function addSignature(Request $request){
   if(isset($_POST['img'])){
        $new_name = time().'.'.'txt';
        $base64 = $_POST['img'];
        $data = explode(',',$base64);
        $file = base64_decode($data[1]);
        $output_file = public_path().'/sign/'.$new_name;
        $file->move($output_file,$new_name);
        $file = fopen($output_file,"wb");
        fwrite($file,$base64);
        fclose($file);
        $st_id = Auth::user()->id;
        $keys = array('sign');
        $values = array($new_name);
        $data = array_combine($keys,$values);

        DB::table("students")->where('st_id',$st_id)->update($data);

    }

我想在画布上获得签名，并希望将该签名转换为图像并将该画布图像上传到我的公共目录，以便我可以在仪表板上显示。