首页 > 其他分享 >file的各种转换

file的各种转换

时间:2023-02-20 14:13:53浏览次数:35  
标签:各种 转换 image params blob file new let

1.将bloburl转换为file格式

复制代码
let data = {
  name: "新年致辞.png",
  status: "success",
  uid: 1664334311149,
  url: "blob:http://localhost:9528/d66ad67a-eef7-4b47-ae8b-5c35edcf2135"
};
function async getblobFile (data) {
  let file = {};const config = { responseType: 'blob' };
  const response = await axios.get(data.url, config);
  file = new window.File([response.data], data.name, { type:'image/png' });
  return file
};
const res = getblobFile(data);
复制代码

 2.将跨域图片地址转化为base64格式

复制代码
let params = {
  name: "新年致辞",
  status: "success",
  uid: 1664335051168,
  url: "https://test.aliyun.live.replay.sgcctop.com/images/20220923/1663926296844014067.jpg", //跨域图片地址
}
const res = await getBase64Img (paramas)
function getBase64Img (params) {
    return new Promise(function (resolve, reject) {         if (params && params.url) {             var image = new Image();             let dataURL = '';             image.src = params.url + "?" + Math.random();             image.crossOrigin = 'anonymous';             image.onload = function () {                 var canvas = document.createElement("canvas");                 canvas.width = image.width;                 canvas.height = image.height;                 var ctx = canvas.getContext("2d");                 ctx.drawImage(image, 0, 0, image.width, image.height);                 var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();                 dataURL = canvas.toDataURL("image/" + ext);                 if (params.callback) {                     if (params.data) {                         [params.callback](dataURL, params.data);                     } else {                         [params.callback](dataURL);                     }                 };                 resolve(dataURL);             }         }     });
 
复制代码

 3.file转base64

复制代码
function fileToBase64 (file, callback) {
  const fileReader = new FileReader()
  fileReader.readAsDataURL(file)
  fileReader.onload = function () {
    callback(this.result)
  }
}
//调用
fileToBase64(file.raw, (res) => {
    console.log(res) //res为base64
})
复制代码

4.blob转blobUrl

let imgUrl = window.URL.createObjectURL(blob);
console.log(imgUrl)   //imgUrl为blobUrl

5.base64转file

复制代码
function base64ToFile(dataurl, filename) { //将base64转换为文件
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type: mime});
}

base64ToFile(base64,filename) //分别为base64字符串、文件名
复制代码

6.base64转blob

复制代码
export function base64ToBlob (dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

let imgBlob = base64ToBlob(blob) // imgBlob为blob格式
复制代码

 7.file转blob

复制代码
let file = document.querySelector('#file');
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
    let blob = new Blob([reader.result], {type: 'image/png'});
};
复制代码

标签:各种,转换,image,params,blob,file,new,let
From: https://www.cnblogs.com/yadi001/p/17137153.html

相关文章