Cropper.js导致图像损坏或部分

Question

我正在尝试将cropper.js用于以下场景：

1. 用户通过表单输入上传图片
2. 用户裁剪图像，导致裁剪
3. 裁剪a显示为新图像
4. 用户进一步裁剪图像，导致裁剪b
5. 两个裁剪的图像都会发送到服务器

出于某种原因，当我将通过我的代码生成的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标签，然后再次执行上面的步骤1和2.

知道为什么生成的base64看起来很难？