Обрезка. js как определить значения области просмотра: ширина / высота на основе входного текста (пользовательские определения)

Question

Я использую обрезку. js, и я хотел бы знать, если кто-то определил переменные области просмотра, такие как: ширина и высота на основе входного текста (пользовательские определения)

Это мой код:

<script>

$(document).ready(function(){

    $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width: Document.getElementById("weidth").value,  // <-- here i want to receive input text value
      height: Document.getElementById("heght").value,  // <-- here i want to receive input text value
      type:'square'
    },
    boundary:{
      width:1348,
      height:760
    }, //circle
    showZoomer: false,
    enableResize: true,
    enableOrientation: true,
    mouseWheelZoom: 'ctrl'
  });
  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

});  
</script>

заранее спасибо, я пробовал разные способы, но пока не работает