基于angular6，使用第三方js调用手机相机、相册应用遇到的坑

最近做的项目使用的是angular6开发的，做的是前后端分离的，本来自己是做后端的，却被拉来搞前端了，并且之前也没用过angular，可想在开发过程中肯定会遇到一个又一个的坑，没办法，遇到一个解决一个。

其中调用手机相册和相机就是其中一个了，并且用的还是第三方合作单位的js，废话不多说，直接讲解遇到的问题；

一，首先就是angular工程如何引入外部JS文件

这个问题其实网上有一大堆的解决方法，主要就是把文件放在assert目录下，angular.json中增加配置，这里就不详细说了；

二，调用外部js提供的方法，回调函数内无法获取到该类中的变量

在选择好照片或者拍完照片后，回调函数内会返回picture对象，里面有一个值是base64编码的pic属性和文件名fileName属性，所以我需要在回调中将base64编码传给img标签，然而在传递的过程我发现，img绑定的值一直都是空，检查了几次base64值也传给ts中的变量了，然而打印出来的话，这个值就是空，咨询了别人之后，才知道是回调方法的原因，回调方法内的this.变量可能不是ts中的，方法会认为是回调中的变量，所以最后在方法体的后边增加了bind方法，来获取类中的变量，代码如下：

iPortal.getCamera().takePicture(function (picture) {
        // 调用拍照功能       
          this.pictures.push(picture.pic);
        // 将图片对象放入另一个数组  上传图片使用
        this.pictBase64.push(picture);
        // 及时更新图片数组，选择后显示在页面
        this.zone.run(() => {
          setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
          // setTimeout(() => this.pictBase64 = this.pictBase64, 10);
        });
      }.bind(this),
        function (err) {
          this.toastTip(err);
        }.bind(this),
        1);

三、ios可以显示base64编码图片，安卓却无法显示

回调中可以给绑定变量赋值后，却发现苹果手机能显示图拍，但是安卓却没法显示，研究了很久，依然没发现问题所在，最后只能打印一下两种手机的显示的base64编码，看看有什么区别，果然，苹果手机显示的编码是很紧凑的，没有空格，然而安卓的呢：

有换行或者是空格，所以只能把编码内的这些给搞掉了，并且还得区分一下当前设备的类型，是苹果？还是安卓

iPortal.getCamera().takePicture(function (picture) {
        // 调用拍照功能
        let u = navigator.userAgent;
        // 当前设备信息
        let device = '';
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
          // 安卓手机
          device = 'Android';
          let codeArr = picture.pic;
          // 图片不超过9张的情况下放入数组
          this.pictures.push(codeArr.replace(/\s*/g, ''));

        } else if (u.indexOf('iPhone') > -1) {
          // 苹果手机
          device = 'iPhone';
          // 图片不超过9张的情况下放入数组
          this.pictures.push(picture.pic);
        }
        // 将图片对象放入另一个数组  上传图片使用
        this.pictBase64.push(picture);
        // 及时更新图片数组，选择后显示在页面
        this.zone.run(() => {
          setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
          // setTimeout(() => this.pictBase64 = this.pictBase64, 10);
        });
      }.bind(this),
        function (err) {
          this.toastTip(err);
        }.bind(this),
        1);

codeArr.replace(/\s*/g, '')就是要删除编码中的空格和换行；

四，数据更新强加载

照片选择后，img标签没法立即显示图片，需要点击一下其他空白地方，图片才出来，代码中的这一段，就是解决这个问题的：

this.zone.run(() => {
          setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
          // setTimeout(() => this.pictBase64 = this.pictBase64, 10);
        });

给一个延时加载，及时更新变量内数据就解决了；