Ionic 3调用相机报错：Unable to get property 'DestinationType' of undefined or null reference

嗨，我来帮你排查这个问题～

你遇到的Unable to get property 'DestinationType' of undefined or null reference错误，核心原因是插件和代码不匹配，具体问题和解决方案如下：

问题分析 #

1. 插件混淆：你安装的是cordova-plugin-camera-preview（相机预览插件），但代码里调用的是原生Camera插件（@ionic-native/camera）的API，这两个是完全独立的插件，API不通用，所以找不到DestinationType属性。
2. 依赖注入错误：你的app.module.ts里注册的是CameraPreview服务，但代码里注入的是Camera，而且数组语法还写错了（少了逗号）。

解决方案（分两种场景） #

场景1：你只是想实现普通拍照功能（不需要实时预览）

这种情况下，你需要替换成正确的Camera插件：

1. 先卸载错误的插件：

   ionic cordova plugin remove cordova-plugin-camera-preview
   npm uninstall @ionic-native/camera-preview
   

2. 安装官方Camera插件：

   ionic cordova plugin add cordova-plugin-camera
   npm install @ionic-native/camera
   

3. 修正app.module.ts的providers数组（注册正确的服务，修复语法错误）：

   import { Camera } from '@ionic-native/camera/ngx';
   
   @NgModule({
     // ...其他配置
     providers: [
       StatusBar,
       SplashScreen,
       Camera, // 替换成Camera
       {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]
   })
   export class AppModule {}
   

4. 确保home.ts顶部的导入正确：

   import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
   

   你的takePhoto()方法逻辑是对的，不需要修改，只要在真机/模拟器上运行即可（浏览器不支持原生相机API）。

场景2：你确实需要相机实时预览功能

如果要使用CameraPreview插件，需要改用它的专属API：

1. 修正app.module.ts的导入和注册：

   import { CameraPreview } from '@ionic-native/camera-preview/ngx';
   
   @NgModule({
     // ...其他配置
     providers: [
       StatusBar,
       SplashScreen,
       CameraPreview,
       {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]
   })
   export class AppModule {}
   

2. 修改home.ts的代码适配预览插件：

   import { CameraPreview, CameraPreviewOptions } from '@ionic-native/camera-preview/ngx';
   
   export class HomePage {
     public base64Image: string;
   
     constructor(private cameraPreview: CameraPreview) { }
   
     startCameraPreview() {
       // 配置预览参数
       const previewOpts: CameraPreviewOptions = {
         x: 0,
         y: 0,
         width: window.screen.width,
         height: window.screen.height,
         camera: 'back',
         tapPhoto: true, // 点击预览区域拍照
         toBack: true // 让预览画面在页面内容下方
       };
   
       // 启动相机预览
       this.cameraPreview.startCamera(previewOpts).catch(err => console.error(err));
   
       // 监听拍照事件
       this.cameraPreview.setOnPictureTakenHandler().subscribe(result => {
         this.base64Image = `data:image/jpeg;base64,${result[0]}`;
         // 拍完照停止预览
         this.cameraPreview.stopCamera();
       });
     }
   }
   

3. 调整home.html的按钮事件：

   <button (click)="startCameraPreview()">Start Camera Preview</button>
   <img [src]="base64Image" *ngIf="base64Image" />
   

注意事项 #

Ionic Native的相机类插件必须在真机或模拟器上运行，浏览器环境无法调用原生相机API，会出现类似的未定义错误。

内容的提问来源于stack exchange，提问作者AbhiRam