ionic 调用硬件设备

Ionic 调用硬件的能力。
   Ionic 调用原生 api 的能力是基于 cordova 的 ,cordova 是 Adobe 公司的一个开源的框架, 诞生于2008年,
   可以让我们用javascript调用手机原生的几乎所有的api,比如:摄像头、 麦克风等、重力感应、加速器、声音、震动、
   网络、视频、音频、地理定位等,原生能实现 的所有功能。


Ionic 调用 Device 设备 Api 获取手机的设备信息。
  https://wenku.baidu.com/view/91a10d55ba68a98271fe910ef12d2af90242a8ec
  1. 找到对应的Api: https://ionicframework.com/docs/native/device/
  2. 安装相关的设备插件
     ionic cordova plugin add cordova-plugin-device
     npm install --save @ionic-native/device
  3. 在app.module.ts中引入注册相应模块
     import { Device } from '@ionic-native/device';
     providers: [
         StatusBar,
         SplashScreen,
         Device,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]

  4,在用到的页面引入看文档使用
    ionic cordova plugin add cordova-plugin-device
    npm install --save @ionic-native/device


    import { Device } from '@ionic-native/device';
    constructor(private device: Device) { }
    ...
    console.log('Device UUID is: ' + this.device.uuid);


 Ionic 调用照相机拍照功能
   1、找到对应的 Api: https://ionicframework.com/docs/native/camera/
   2、安装相关的插件
      ionic cordova plugin add cordova-plugin-camera
      npm install --save @ionic-native/camera
   3、在 app.module.ts 中引入注册相应模块
      import { Camera } from '@ionic-native/camera';
      ...
      @NgModule({ ...
        providers: [ ...
         Camera
        ... ]
        ...
       })
      export class AppModule { }
   4、在用到的页面引入看文档使用
     import { Camera, CameraOptions } from '@ionic-native/camera';

     constructor(private camera: Camera) { }
       ...
      const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
       }

      this.camera.getPicture(options).then((imageData) => {
       // imageData is either a base64 encoded string or a file URI // If it's base64:
       let base64Image = 'data:image/jpeg;base64,' + imageData;
       }, (err) => {
      });



Ionic ZBar 扫描二维码 条形码插件的使用
   https://wenku.baidu.com/view/872cd948876fb84ae45c3b3567ec102de2bddfe8
   1. 下载安装插件
       ionic cordova plugin add cordova-plugin-cszbar
       npm install --save @ionic-native/zbar
   2. app.module.ts 引入依赖注入
       import { ZBar } from '@ionic-native/zbar';
       providers: [
           Camera,
           StatusBar,
           SplashScreen,
           ZBar,
          {provide: ErrorHandler, useClass: IonicErrorHandler}
       ]
   3. 用到的地方引入,注入使用,注意:如果返回的是对象,用JSON.stringify转换后打印
      import { ZBar, ZBarOptions } from '@ionic-native/zbar';
      doScanner(){
        let options: ZBarOptions = {
        text_title: "扫码", // Android only
        text_instructions: "请把相机对准二维码", // Android only camera: "back", // defaults to "back"
         flash: "auto", // defaults to "auto". See Quirks drawSight: true
       };
       this.zbar.scan(options)
        .then(result => {
            alert(JSON.stringify(result)); // Scanned code
        })
        .catch(error => {
           console.log(error); // Error message
        });
      }



Ionic图片上传(使用cordova-plugin-file-transfer 实现 图片上传)
   1. 下载安装插件
     ionic cordova plugin add cordova-plugin-file
     npm install --save @ionic-native/file
     ionic cordova plugin add cordova-plugin-file-transfer
     npm install --save @ionic-native/file-transfer
     或者通过直接安装
      ionic cordova plugin add cordova-plugin-file-transfer
      npm install --save @ionic-native/file-transfer
   2. app.module.ts 引入依赖注入
      import { File } from '@ionic-native/file';
      import { FileTransfer} from '@ionic-native/file-transfer';

      providers: [
         StatusBar,
         SplashScreen,
         File,
         FileTransfer,
         Device,
         Camera,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
   3. 用到的地方引入 实例化
      import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
      import { File } from '@ionic-native/file';

      constructor(public navCtrl: NavController,private device: Device, private camera: Camera,private transfer: FileTransfer, private file: File)
      {

      }
   4,拍照上传图片功能
      doCameraUpload(){
        const options: CameraOptions = {
          quality: 100, //图片质量
          destinationType: this.camera.DestinationType.FILE_URI, /*返回的类型*/
          encodingType: this.camera.EncodingType.JPEG, sourceType:this.camera.PictureSourceType.CAMERA, // mediaType: this.camera.MediaType.PICTURE, allowEdit:true,
          targetWidth:300, /*宽度高度要设置*/
          targetHeight:300
        }
        this.camera.getPicture(options).then((imageData) => { // 返回拍照的地址
          this.doUpload(imageData); }, (err) => {
          // Handle error
        });
      }
      doUpload(src){
        const fileTransfer: FileTransferObject = this.transfer.create();
        let options: FileUploadOptions = { fileKey: 'file',
          fileName: 'name.jpg', mimeType:'image/jpeg', httpMethod:"POST",
          params:{
            username : "张三", age : "20", height : "190"
          } /*附带的一些信息*/
          // headers: {}
        }
        // error
        alert('err');
        alert(JSON.stringify(err)); })
      }

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值