图片及其他类型文件转base64

图片及其他类型文件转base64

1、图片转base64

fileReader对象也有类似的方法，比如.readAsDataURL() ，然而它只接受file或blob类型，而这两种类型一般只能通过<input[type=file]>元素的files属性获取。尴尬的是我们当前只有图片路径，如果想用fileReader必须还要想办法把图片路径转为file或blob类型，比较麻烦。因此可以使用的toDataURL()方法

canvas.toDataURL([type, encoderOptions]);

如果指定的类型不被支持则以默认值image/png替代；encoderOptions可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代

function getBase64(url){
 // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
 var Img = new Image(), dataURL='';
 Img.src=url;
 Img.onload=function(){
  var canvas = document.createElement("canvas"), 
  width=Img.width, height=Img.height; // 确保canvas的尺寸和图片一样
  canvas.width=width;
  canvas.height=height;
  canvas.getContext("2d").drawImage(Img, 0, 0, width, height); // 将图片绘制到canvas中
  dataURL=canvas.toDataURL('image/jpeg'); // 转换图片为dataURL
 };
}

2、其他类型文件转base64

先文件路径转成file或blob类型，然后通过fileReader的readAsDataURL()方法转成base64