基于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格式的图像文件,但是可以根据需要修改代码以支持其他类型