使用 php 和 jquery (ajax) 保存 jsignature

Question

I'm trying to save jsignature using jquery(ajax) to database. When I console the contain in the browser it shows me this error:

Uncaught RangeError:

Array(2)

0: "image/png;base64"

1: "iVBORw0KGgoAAAANSUh........"

length: 2

Maximum call stack size exceeded

at Fb (jquery-2.2.0.min.js:4)
at Fb (jquery-2.2.0.min.js:4)
at Fb (jquery-2.2.0.min.js:4)

My codes:

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js" integrity="sha512-lZ7GJNAmaXw7L4bCR5ZgLFu12zSkuxHZGPJdIoAqP6lG+4eoSvwbmKvkyfauz8QyyzHGUGVHyoq/W+3gFHCLjA==" crossorigin="anonymous"></script>


    <div id="signature" style="width:500;height:400;border:1px solid black">
    </div>

    <button type='button' id='save'>Save signature</button>
    <input id='diagrama_venosa' type='hidden' >

var $sigdiv = $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent',
    'color':pen,
    'width': 500,
    'height': 400
    });

    $('#save').on('click', function(event) {
    event.preventDefault();
    var signimage = $sigdiv.jSignature('getData', 'image');
    console.log(signimage);
    var diagrama_venosa=$('#diagrama_venosa').val(signimage[1]);
    $.ajax({
    type: "POST",
    url: "<?=base_url('saveController/saveSignature')?>",
    data: {diagrama_venosa:diagrama_venosa},
    success:function(data){

    },

    });

    });

It seems that the contain is too large, how can I solve this?

Answer 1

$('#save').on('click', function(event) {
event.preventDefault();
 $('#diagrama_venosa').val(signimage[1]);
  //just add this
var diagrama_venosa =$("#diagrama_venosa").val();
$.ajax({
type: "POST",
url: "<?=base_url('saveController/saveSignature')?>",
data: {diagrama_venosa:diagrama_venosa},
success:function(data){

},

});

});