Cropper.js приводит к повреждению или частичным изображениям

Question

Я пытаюсь использовать cropper.js для следующего сценария:

1. Пользователь загружает изображение через форму ввода
2. Пользователь обрезает изображение вниз, в результате чего
3. Обрезка а отображается как новое изображение
4. Пользователь обрезает изображение, в результате чего обрезка b
5. Оба обрезанных изображения отправляются на сервер

По какой-то причине, когда я помещаю URL-адреса base64, сгенерированные с помощью моего кода, в декодер или тег изображения, я получаю либо поврежденное изображение, либо крошечный кусочек изображения. Вот соответствующие части моего кода:

1. HTML существует на странице, включая тег изображения: с id=originalImg

   cropper = $('#originalImg');
   cropper.cropper({
       dragMode: 'crop',
       checkCrossOrigin: true,
       guides: false
   });
   

2. Пользователь использует интерфейс cropper.js, чтобы выбрать обрезку, затем нажимает кнопку, которая получает обрезанный раздел с:

   cropper.cropper('getCroppedCanvas').toDataURL('image/jpeg');
   

3. Затем я заменяю тег originalImg новым тегом image на источник из второго шага, а затем снова выполняю шаги 1 и 2 выше.

Есть идеи, почему получившийся base64 кажется шатким?