在 Typescript/angular 中将 base64 转换为功能 JPEG答案

【问题标题】：Converting base64 into a functional JPEG in Typescript/angular在 Typescript/angular 中将 base64 转换为功能 JPEG
【发布时间】：2022-06-11 05:56:59
【问题描述】：

我在浏览器中的静态图像上运行cropperjs（从 jpeg 格式的 nodejs 服务器检索），它返回 base64 中不同图像的预览。我试图获取该数据并将修改后的图像以原始 jpeg 格式保存回服务器。我尝试了一些不同的方法，但这是最新的：

saveCroppedImage(){  

     var split = this.imageDestination.split(','); // parsing out data:image/png;base64,
     var croppedImage = split[1];                  // assigning the base64 to a variable
     var blob = new Blob([croppedImage],{type: 'image/jpeg'}); //changing the base64->Blob
     var file = new File([blob],'cropped.jpeg');  //theoretically changing the blob->jpeg
     this.newCroppedImage = file;
}

然后我将文件上传到服务器，但它已损坏。

【问题讨论】：

真的是 jpeg 还是 png？在代码的第一条评论中，您提到了 data:image/png.
这是一个 png，对不起，我尝试在尝试调试问题时将 if 转换为两者，这种代码和平是 jpeg 尝试。

标签： javascript typescript image base64

【解决方案1】：

好的，所以我在互联网的帮助下想通了：

这是我在创建文件时必须包含的信息，它必须保持为 png 才能工作。

public file = (theBlob: Blob): File =>
    {return new File([theBlob],'croppedImage.png',{lastModified:new 
    Date().getTime(), type:'image/png'}) 
 }

saveCroppedImage() {

    var split = this.imageDestination.split(',');
    console.log(this.imageDestination)
    var croppedImage = split[1]
    this.blob = blobUtil.base64StringToBlob(croppedImage);
    this.newCroppedImage =this.file(this.blob);
    this.onFileChange();

}

【讨论】：