最近做的项目使用的是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);
});
给一个延时加载,及时更新变量内数据就解决了;