base64 - Cropper.js 导致图像损坏或不完整

Question

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

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

出于某种原因，当我将通过我的代码生成的 base64 数据 url 放入解码器或图像标签时，我得到一个损坏的图像或一小块图像。以下是我的代码的相关部分：

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 看起来很不稳定吗？