📌  相关文章
📜  PhoneGap从相机拍照(1)

📅  最后修改于: 2023-12-03 15:33:27.578000             🧑  作者: Mango

PhoneGap从相机拍照

简介

PhoneGap是一款允许使用Web技术开发移动应用程序的开源框架，通过将JavaScript、HTML和CSS等Web技术转换为可执行的原生代码，使得开发者可以使用熟悉的Web技术开发跨平台的移动应用程序。本文将介绍如何在PhoneGap中通过调用相机来拍照。

准备工作

在开始之前，我们需要确保已经安装了以下软件：

  • Node.js：用于安装PhoneGap和其插件；
  • PhoneGap：主要用于创建和构建项目、管理插件等；
  • Cordova Camera插件：提供了调用相机的API接口。
创建项目

我们可以使用PhoneGap CLI来创建PhoneGap项目。如果您还没有安装PhoneGap CLI，请在终端中执行以下命令进行安装：

npm install -g phonegap

创建项目的命令如下：

phonegap create my-app

其中，my-app是项目名称，可以根据需求自行修改。

创建成功后，我们需要进入项目的根目录，并使用以下命令添加Cordova Camera插件：

cd my-app
phonegap plugin add cordova-plugin-camera

如果一切顺利，我们的项目已经准备就绪，可以开始编写代码了。

编写代码

我们需要在www目录下的index.html文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Camera Demo</title>
  </head>
  <body>
    <h1>PhoneGap Camera Demo</h1>
    <button onclick="takePicture()">Take Picture</button>
    <br><br>
    <img id="myImage">
    
    <script>
      // 拍照
      function takePicture() {
        navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
          destinationType: Camera.DestinationType.DATA_URL });
      }

      // 拍照成功回调函数
      function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
      }

      // 拍照失败回调函数
      function onFail(message) {
        alert('Failed because: ' + message);
      }
    </script>
    
    <script src="phonegap.js"></script>
  </body>
</html>

其中，button标签用于触发拍照功能，img标签用于显示拍照后的图片。在script标签中，我们定义了三个函数：

  • takePicture()用于调用相机拍照；
  • onSuccess()和onFail()分别用于处理拍照成功和失败的情况。
运行项目

我们需要在终端中进入项目根目录，并使用以下命令来运行项目：

phonegap run ios

其中，ios可以根据需求自行修改，比如android或browser等。

如果一切顺利，我们已经可以在手机或模拟器上看到一个名为PhoneGap Camera Demo的应用程序，点击Take Picture按钮即可调用相机进行拍照。

参考链接