Есть ли способ чтения содержимого HTML-холста в виде двоичных данных?

На данный момент у меня есть следующий HTML-код для отображения входного файла и холста под ним:

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

Затем я настроил свой входной файл, чтобы правильно настроить холст, который работает нормально:

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

Теперь мне нужно получить двоичные данные (в кодировке Base64) из Canvas, когда кнопка нажата, чтобы она передавала данные на сервер ...

В результате я должен предоставить пользователю возможность выбрать файл, обрезать / изменить его размер и затем нажать кнопку, после чего отредактированное изображение будет загружено на сервер (я не могу выполнить на стороне сервера). обрезка / изменение размера из-за ограничений на стороне сервера ...)

Любая помощь будет отличной! ура