Javascript 无法使用裁剪器js裁剪PNG图像

我正在使用裁剪图像并上传它们。我目前可以裁剪JPEG图像，但不能裁剪PNG图像。对于JPEG和PNG图像，img标记在裁剪后在控制台中显示base64字符串

对于剪切并将鼠标悬停在图像上后的JPEG图像，我可以看到图像

但是，当我将鼠标悬停在PNG裁剪图像的base64字符串上时，没有显示任何图像。我看到的是：

这是我裁剪图像的方式：

 var image = document.getElementById('blah');
    var cropper = new Cropper(image, {
        aspectRatio : 1 / 1,
        crop : function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
    }
});

var imgurl = cropper.getCroppedCanvas().toDataURL('image/png');
var img = document.createElement("img");
img.src = imgurl;
img.setAttribute("id", "blah");

我试过了

var imgurl = cropper.getCroppedCanvas().toDataURL('image/jpeg');

var imgurl = cropper.getCroppedCanvas().toDataURL('image/png');

及

也是。 我的输入类型是：

<input type="file" name="image" accept="image/*"/>

及

也是。

---

请帮助或建议我，我已搜索了许多链接以寻求帮助，并尝试了几种方法来解决此问题。

您使用的是什么版本的cropper？请使用

getCroppedCanvas（）。toBlob

@无尽的getCroppedCanvas（）。toBlob是从画布获取blob，以便将blob上载到服务器。现在我只想在转换成blob和上传到服务器之前向用户显示裁剪过的PNG图像。好的，要向用户显示blob，只需使用

URL.createObjectURL（blob）

这比Base64更好。您使用的裁剪器是什么版本？请使用

getCroppedCanvas（）.toBlob

@getCroppedCanvas（）.toBlob是从画布获取blob，以便将blob上载到服务器。现在我只想在转换成blob和上传到服务器之前向用户显示裁剪后的PNG图像。好的，要向用户显示blob，只需使用

URL.createObjectURL（blob）

这比base64更好

var imgurl = cropper.getCroppedCanvas().toDataURL('image/png');

var imgurl = cropper.getCroppedCanvas().toDataURL();