1.使用FileReader字符流读取本地图片,该对象自带一个方法readAsDataURL(args)
2.因为该方法需要一个参数,这个参数就input标签(type=file)选取图片后的该对象,用getElementById获取这个input标签即可,参数为:ElementId.files[0];这个就是文件对象,将这个对象放入字符流中返回一个reader对象。
3.通过这个对象,可以将读取的base64返回,主要方法是reader.οnlοad=function(e){
alert(this.result);//这个result就是返回的base64数据
}
4.主要代码:
let upload=document.getElementById("upload");//input标签type=file var reader = new FileReader();//创建一个字符流对象 reader.readAsDataURL(upload.files[0]);//读取本地图片 reader.onload = function(e) { alert(this.result);//返回数据 };
5.接着说一点,在混合开发中,如es,ionic+cordova这种,肯定是不允许直接点出files的,一般都是在标签上设置点击事件,在事件内传递$event,通过event.target.files[0]这样就能获取到files对象了,
6.然后还有就是这样获取到的base64数据太过于大,一般拍张照片都会有4,5M大,这肯定是不允许的,那么上面这种获取的base64就不行了,就需要我们对数据进行压缩,压缩后的数据还是base64,我这里使用的是第二种,canvas压缩数据,js和ts混合开发都可以通用,主要压缩代码如下:
/* * @param m_this当前对象 js直接传入id对象,ts传入event.target就行了,
在方法中已经files[0]了,也可以拿出来 * @param wid压缩后宽度 一般手机差不多400 * @param quality压缩质量 0 * */ cutImageBase64(m_this,wid,quality) { var file = m_this.files[0]; var URL = window.URL || window.webkitURL; var blob = URL.createObjectURL(file); var base64; var img = new Image(); img.src = blob; img.onload = function() { var that = this; //生成比例 var w = that.width, h = that.height, scale = w / h; w = wid || w; h = w / scale; //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); $(canvas).attr({ width: w, height: h }); ctx.drawImage(that, 0, 0, w, h); // 生成base64 base64 = canvas.toDataURL('image/jpeg', quality || 0.8); //这里可以直接将base64放在img的src上,直接就能显示图片了,这里压缩后,
图片的大小大概是5M压缩到了几十KB } }