前端文件转换

Math点PI / 2023-08-16 / 原文

file文件的拷贝和改名
// 复制文本域中的file文件并重命名
let myFile = new File([file], "新文件的名字"]);
bolb格式转base64格式
function blobToDataURL(blob, callback) {
let reader = new FileReader();
reader.onload = function () {
callback(reader.result);
}
reader.readAsDataURL(blob);
}
base64格式的文件转blob格式
//将base64转换为blob
function dataURLtoBlob(dataURL) {
let arr = dataURL.split(',');
let mime = arr[0].match(/😦.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
base64格式的文件转file格式
//将base64转换为blob
function dataURLtoFile(dataURL, filename) {
let arr = dataURL.split(',');
let mime = arr[0].match(/😦.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], ${filename}.jpg, { type: mime });
}
通过 ajax 请求图片转base64格式
let url = "当前域的xx图片地址";
let xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
let reader = new FileReader();
reader.readAsDataURL(xhr.response);
reader.onloadend = function(){
let base64data = reader.result;
}
}
}
xhr.send();

6)通过img和canva获得base64格式的图片

function getImgToBase64(url, callback){
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL('image/jpg');
callback(dataURL);
canvas = null;
};
img.src = url;
}