Обрезать загруженное изображение, чем выполнить событие Tesseract - в JQuery / Java

Question

Я использую этот скрипт для выполнения сканирования OCR Tesseract из загрузки изображения (ввод файла):

$("#form").on("submit", e => {
  e.preventDefault();
  const file_list = $("#file").prop("files");
  if (_.isEmpty(file_list)) {
    alert("No file submitted");
    return;
  }
  const file = file_list[0];
  if (file.type.indexOf("image") === -1) {
    alert("Please input image type file");
    return;
  }

  let status = {};
  Tesseract.recognize(file, {
    lang: $("#lang").val(),
    tessedit_ocr_engine_mode: 'OEM_TESSERACT_LSTM_COMBINED',
    tessedit_pageseg_mode: 'PSM_AUTO_OSD' }).

  progress(result => {
    let p = result.progress * 100;
    if (!status[result.status]) {
      status[result.status] = true;
      $("#progress").append(`
          <p>${result.status}</p>
          <div class="progress">
            <div class="progress-bar progress-bar${_.size(status)}"></div>
          <div>
        `);
    }
    if (_.isNaN(p)) {
      p = 100;
    }
    $(`.progress-bar${_.size(status)}`).
    css({ width: `${p}%` }).
    text(parseFloat(p).toFixed(2));
  }).
  catch(error => {
    $(".progress-bar").addClass("progress-bar-error");
    alert("Error progressing: " + error.toString());
  }).
  then(result => {
    console.log(result);
    $(".progress-bar").addClass("progress-bar-success");
    $("#result").text(result.text);
    console.dir(result);
    Tesseract.terminate();
  });
});

Результат довольно плохой, поэтому я хотел бы сначала обрезать изображение и удалить background и THAN выполняют сканирование Tesseract с помощью этой функции:

/*
    Source: http://jsfiddle.net/ruisoftware/ddZfV/7/
    Updated by: Mohammad M. AlBanna
    Website: MBanna.info 
    Facebook: FB.com/MBanna.info
*/

var myImage = new Image();
myImage.crossOrigin = "Anonymous";
myImage.onload = function(){
    var imageData = removeImageBlanks(myImage); //Will return cropped image data
}
myImage.src = "IMAGE SOURCE";



//-----------------------------------------//
function removeImageBlanks(imageObject) {
    imgWidth = imageObject.width;
    imgHeight = imageObject.height;
    var canvas = document.createElement('canvas');
    canvas.setAttribute("width", imgWidth);
    canvas.setAttribute("height", imgHeight);
    var context = canvas.getContext('2d');
    context.drawImage(imageObject, 0, 0);

    var imageData = context.getImageData(0, 0, imgWidth, imgHeight),
        data = imageData.data,
        getRBG = function(x, y) {
            var offset = imgWidth * y + x;
            return {
                red:     data[offset * 4],
                green:   data[offset * 4 + 1],
                blue:    data[offset * 4 + 2],
                opacity: data[offset * 4 + 3]
            };
        },
        isWhite = function (rgb) {
            // many images contain noise, as the white is not a pure #fff white
            return rgb.red > 30 && rgb.green > 30 && rgb.blue > 30;
        },
                scanY = function (fromTop) {
        var offset = fromTop ? 1 : -1;

        // loop through each row
        for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

            // loop through each column
            for(var x = 0; x < imgWidth; x++) {
                var rgb = getRBG(x, y);
                if (!isWhite(rgb)) {
                    if (fromTop) {
                        return y;
                    } else {
                        return Math.min(y + 1, imgHeight);
                    }
                }
            }
        }
        return null; // all image is white
    },
    scanX = function (fromLeft) {
        var offset = fromLeft? 1 : -1;

        // loop through each column
        for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

            // loop through each row
            for(var y = 0; y < imgHeight; y++) {
                var rgb = getRBG(x, y);
                if (!isWhite(rgb)) {
                    if (fromLeft) {
                        return x;
                    } else {
                        return Math.min(x + 1, imgWidth);
                    }
                }      
            }
        }
        return null; // all image is white
    };

    var cropTop = scanY(true),
        cropBottom = scanY(false),
        cropLeft = scanX(true),
        cropRight = scanX(false),
        cropWidth = cropRight - cropLeft,
        cropHeight = cropBottom - cropTop;

    canvas.setAttribute("width", cropWidth);
    canvas.setAttribute("height", cropHeight);
    // finally crop the guy
    canvas.getContext("2d").drawImage(imageObject,
        cropLeft, cropTop, cropWidth, cropHeight,
        0, 0, cropWidth, cropHeight);

    return canvas.toDataURL();
}

В настоящее время я изо всех сил пытаюсь объединить эти два метода / функции в отношении порядка (1. обрезка, 2. сканирование через Tesseract) и два разных файл типов объектов <-> image.

Я попытался использовать:

var reader = new FileReader();
var url = reader.readAsDataURL(file);

, чтобы получить URL-адрес изображения и передать его функции обрезки фона, но безуспешно. Заранее благодарим вас за любую помощь в объединении этих двух функций в правильном порядке.

С наилучшими пожеланиями