cordova调用相机并预览照片

矫情吗；* 2022-05-14 05:39 538阅读 0赞

首先要有平台环境，我这里用的是安卓的环境，安装相机插件，在控制台运行

  1. cordova plugin add cordova-plugin-camera

安装完成之后，在index.html插入如下代码：

  1. <button id="imageCapture" style="width:200px;height:40px;background: orange;">take photo</button>
  2.  <img src="" alt="" id="myImage" style="width:200px;height:200px;"/>

在js文件下的index.js里处理调用相机事件：

onDeviceReady函数里加入这个： 

  1. document.getElementById('imageCapture').addEventListener("click", imageCapture);

在js文件的最后写这个函数：

  1. //捕捉图片
  2. function imageCapture() {
  3.     navigator.camera.getPicture(onSuccess, onFail, {
  4.         quality: 50,
  5.         destinationType: Camera.DestinationType.DATA_URL
  6.     });
  8.     function onSuccess(imageData) {
  9.         var image = document.getElementById('myImage');
  10.         image.src = "data:image/jpeg;base64," + imageData;
  11.     }
  13.     function onFail(message) {
  14.         alert('Failed because: ' + message);
  15.     }
  16. };

完成之后，在控制台执行 cordova build android —release

找到打包好的apk，发送到手机，手机上的运行效果如图：

7070 1

如此就可以调用原生的相机了。

发表评论

表情：
评论列表 （有 0 条评论，538人围观）

还没有评论，来说两句吧...

相关阅读