Cropper.js resulting in broken or partial images

Question

I'm trying to use cropper.js for the following scenario:

1. User uploads image via form input
2. User crops the image down resulting in crop a
3. Crop a is shown as a new image
4. User crops the image further resulting in crop b
5. Both cropped images are sent to the server

For some reason when I put the base64 data urls generated via my code into a decoder or image tag I get either a broken image or a tiny sliver of the image. Here are the relevant parts of my code:

1. Html exists on the page including an image tag: with id=originalImg

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

2. User uses the cropper.js interface to select a crop, then clicks a button which gets the cropped section with:

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

3. I then replace the originalImg tag with a new image tag with the source from step two, and then do step 1 and 2 above again.

Any idea why the resulting base64 seems wonky?