本地图片转为base64数据

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

}
}