移动端H5页面通过手机本地的图片地址信息，转为Base64方法，和中间遇到的Android、IOS、PC的兼容性问题

• 通过手机本地图片地址，获取获取blob对象
• 在转换过程中发现部分应用内嵌的H5页面再转换的时候，转成file对象失败
• 在IOS上转化base64，会出现换行符，需要再处理一下。

//获取本地地址
let key = result.key;
//获取请求到的图片
const blobEvent = await onBlobLoad(key);
//获取Blob
let blob = blobEvent.target.response
//获取base64 
base64 = await blobToBase64(blob)

// 通过图片地址，获取图片
const onBlobLoad = (imgUrl) => new Promise(resolve => {
  var xhr = new XMLHttpRequest();
  xhr.open("get", imgUrl, true);
  xhr.responseType = "blob";
  xhr.onload = resolve;
  xhr.send();
})

//将网络图片转为Base64方式
console.log(imgUrl)
var Img = new Image(),
dataBase64 = '';
Img.src = imgUrl;
Img.setAttribute("crossOrigin", 'Anonymous') 
Img.onload = async function () { 
  var canvas = document.createElement("canvas"), 
  width = Img.width, 
  height = Img.height;
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(Img, 0, 0, width, height); 
  dataBase64 = canvas.toDataURL('image/jpeg'); 
  console.log("dataBase64---------qian"+dataBase64)
  let basearr = dataBase64.split(',');
  dataBase64 = basearr[1];
  console.log("dataBase64---------hou"+dataBase64)
};

// 将Blob对象，转为Base64
const blobToBase64 = (blob) => new Promise((resolve, reject) => {
  const fileReader = new FileReader();
  fileReader.onload = (e) => {
    resolve(e.target.result);
  };
  // readAsDataURL
  fileReader.readAsDataURL(blob);
  fileReader.onerror = () => {
    reject(new Error('blobToBase64 error'));
  };
});

*转载请注明出处