图片及其他类型文件转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