Image for base 64 in javascript is not working

I need to convert an image to base 64 to send to the database, I believe the characters are not fit in my variable?

My form:

   <form method="post" enctype="multipart/form-data">
     <label id="labelfile" class="btn btn-primary waves-effect" for="file"><i class="fa fa-search mr-3"></i>Procurar uma foto</label>
     <input (change)="handleCropSelect()" type="file" name="file" id="file" />
   </form>

My functions responsible for transforming the image into data64:

  getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 200;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 10, 10, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");
    console.log(dataURL);
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

  handleCropSelect(){
      var base64 = ''
      base64 = this.getBase64Image(document.getElementById("previewteste"));
      this.base64textString = '';
      this.base64textString = base64;
  }

This is a preview of the image after it is loaded:

<img id="previewteste" class="cropped rounded-circle align-center animated fadeIn" width="220px" height="220px">

I put the variable base64textString to appear in my template:

{{base64textString}}

As soon as I upload, my variable is populated with the conversion characters, but I believe they are not populating everything I should, because if I decode this code, my image does not appear, if I make a button to call the handleCropSelect () {} function fills the string again, but this time with all characters, and when I decode, my image is shown.

How can I get around this?

I have tried to make a for to execute the function several times to see if the variable is filled without having to click on the button that executes the handleCropSelect () function but it did not work.

This is my function that uploads the files and cuts the image:

$(document).click(function (e) {

    if (document.querySelector('#file')){

        $('#msgtamanho').addClass('hide');

        function readImage() {
            if (document.querySelector('#file')){
                if (this.files && this.files[0]) {
                    file = new FileReader();
                    file.onload = function(e) {
                        document.getElementById("previewteste").src = e.target.result;
                    };
                    file.readAsDataURL(this.files[0]);
                }
            }
        }

        document.getElementById("file").addEventListener("change", readImage, false);

        $("[type=file]").on("change", function() {
            var file = this.files[0];
            var formdata = new FormData();
            formdata.append("file", file);
            if (file.size >= 204800) {
                $('#preview').hide();
                $('#previewteste').hide();
                $('#imgpadrao').show();
            } else {
                $('#imgpadrao').hide();
                $('#preview').show();
                $('#previewteste').show();
                $('.img-result').removeClass('hide');
            }
            ext = $('#file').val().split('.').pop().toLowerCase();
            if ($.inArray(ext, ['png', 'jpg', 'gif', 'bmp']) == -1) {
                $('#info').hide();
                $('#size').hide();
                $('#file').val('');
                $('#imgpadrao').show();
                $('#preview').hide();
                $('#previewteste').hide();
                $('.result').hide();
                $('#botaocortar').hide();
                alert('Essa extensão de foto não é permitida!');
            }
        });

        $("#file").change(function(e) {
            if (e.target.files.length) {
                var file = '';
                file = this.files[0];
                if (file.size >= 204800) {
                    $('.result').hide();
                    $('#botaocortar').hide();
                    $('#msgtamanho').removeClass('hide');
                } else {
                    var reader = '';
                    reader = new FileReader();
                    reader.onload = function(e) {
                        var img = '';
                        img = document.createElement("img");
                        img.id = 'image';
                        img.width = '100%';
                        img.height = '300';
                        img.src = e.target.result;
                        $('.result').html('');
                        $('.result').show();
                        $('.result').append(img);
                        $('#botaocortar').show();
                        $('.options').show();
                        cropper = new Cropper(img);
                    };
                    reader.readAsDataURL(e.target.files[0]);
                }
            }
        })

        $('#botaocortar').click(function(event) {
            event.preventDefault();
            var imgSrc = '';
            imgSrc = cropper.getCroppedCanvas({
            width: 300 
            }).toDataURL();
            $('.cropped').removeClass('hide');
            $('.img-result').removeClass('hide');
            $('.cropped').attr('src', imgSrc);
        })
    }
});