js根据图片绝对路径转base64和转blob数据

有些时候需要将已知路径的图片转换成base64数据或者blob二进制数据流形式。

思路：根据已知的路径获得图片，然后通过canvas画图的方式可以将图片转换成base64数据，通过获得的base64数据可以转换成blob二进制数据流。

js代码：

/**
 * 图片路径获得base64数据方法
 */
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}

/**
 * 根据base64数据转成blob数据方法
 */
function dataURLtoBlob(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 });
}

/**
 * 应用方法-获得图片base64数据和blob数据
 */
var fileUrl = 'd1.jpg'; // 图片路径
var image = new Image();
  image.crossOrigin = '';
  image.src = fileUrl;
  image.onload = function(){ // 图片载入后
    var base64 = getBase64Image(image);
    console.log('获得base64数据');console.log(base64);
    blob = dataURLtoBlob(base64);
    console.log('获得blob数据');console.log(blob);
  }