Base64,Blob,File格式图片文件格式转换

基于JavaScript的图片文件格式转换示例,它可以将Base64编码的图像转换为Blob对象,然后将Blob对象转换为File对象,以便可以将其上传到服务器。

// 将base64编码的图片转换为Blob对象
function base64ToBlob(base64Data, contentType) {
    contentType = contentType || '';
    const sliceSize = 1024;
    const byteCharacters = atob(base64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

// 将Blob对象转换为File对象
function blobToFile(blob, fileName) {
    const file = new File([blob], fileName, {type: blob.type});
    return file;
}

// 将Base64编码的图片转换为File对象
function base64ToFile(base64Data, fileName, contentType) {
    const blob = base64ToBlob(base64Data, contentType);
    const file = blobToFile(blob, fileName);
    return file;
}

// 使用示例
const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AUNEBgSNhViHQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAADaSURBVHjapFJZDcJAEIYvz7/A4CUKhYDDJ8D3wM5Q5SRTdWEJnUlXBhXBGQRgQKjWEYsY+LsPZT6TlK6BfU6Bn+z6+Kfvv1zvmJWYy+LzayRCCiqQCakKUCoEwqCqAKqQqQCqAKAKqQqQC0mxiug5J5G5g4Z4mzwqlWlKp0noVldR9Xp9Cg+L1exf1KLOtnFlAAAAAElFTkSuQmCC';
const fileName = 'image.png';
const file = base64ToFile(base64Data, fileName, 'image/png');
console.log(file);

示例中的 base64ToBlob() 函数将Base64编码的数据转换为Blob对象。它使用 atob() 函数解码Base64数据,然后将字节转换为数组,最后创建一个Blob对象。 blobToFile() 函数将Blob对象转换为File对象,需要传递一个文件名和文件类型。最后,base64ToFile() 函数将使用这两个函数将Base64编码的图像转换为File对象。

示例中只转换了PNG格式的图像文件,但是可以根据需要修改代码以支持其他类型

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值