Ionic4 自定义相机视图答案

【问题标题】：Ionic4 custom camera viewIonic4 自定义相机视图
【发布时间】：2020-01-05 15:56:00
【问题描述】：

我正在尝试为 Ionic4 中的相机创建自定义框架，例如 snapchat 过滤器，id 喜欢在相机处于活动状态时在相机边缘添加框架。这在离子中可能吗？

我目前只是导入常用的相机功能

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

然后

 takeSnap() {
    this.camera.getPicture(this.cameraOptions).then((imageData) => {
      // this.camera.DestinationType.FILE_URI gives file URI saved in local
      // this.camera.DestinationType.DATA_URL gives base64 URI

      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.capturedSnapURL = base64Image;
    }, (err) => {

      console.log(err);
      // Handle error
    });
  }

【问题讨论】：

标签： angular cordova ionic-framework ionic4

【解决方案1】：

简单的答案是否定的。

要拥有这种级别的控制意味着您需要编写一些本机代码。

Ionic 只是使用插件来调用本机设备功能。

如果您深入研究代码，您会发现 Ionic Native 插件使用 Cordova Plugin Camera。

您需要为此项目创建自己的分支，然后用 Java 和 Objective-C 为 android 和 IOS 版本编写代码。

你可以在这里看到他们迄今为止编写的代码：

https://github.com/apache/cordova-plugin-camera/tree/master/src

您将独自完成这样的项目 - 我从未见过任何关于这些主题的教程。

你需要学习用这些语言编码，然后是如何进行图形编码来控制相机，然后是构建图像滤镜和 AR 滤镜的理论。

更聪明的选择是允许在拍摄后将帧添加到图像中。这仍然是一项研究任务，但它会减少您的大量需求，您可以在 TypeScript 中完成所有工作。

【讨论】：

感谢您的回答，但我确实看到了一个本机插件“cordova-camera-preivew”，它允许覆盖在相机上。虽然它在 ionic4 中对我不起作用，但我在 ionic3 中构建了一个新版本，但我会尝试在那里使用它。
啊，我以为相机预览只是为了在网格的开头显示“实时”缩略图时使用的。我没有意识到它有全屏选项。

【解决方案2】：

在 ionic 中你不能这样做，但是在拍摄照片后你可以添加过滤器，比如 snap-chat，你可以使用这个库来实现这一点

http://fabricjs.com/

【讨论】：