Vue项目使用Cordova实现调取原生摄像头并实现裁剪功能

最新推荐文章于 2023-03-21 23:30:09 发布

前端复制粘贴工程师

最新推荐文章于 2023-03-21 23:30:09 发布

阅读量6.1k

点赞数 1

分类专栏： vue Android

本文链接：https://blog.csdn.net/bing103425/article/details/81381041

版权

本文介绍了如何在Vue项目中使用Cordova来调用原生摄像头功能，并详细讲解了如何配置及实现照片的裁剪。步骤包括新建Cordova项目、在Vue中引入Cordova.js、添加设备监听函数，以及详细说明了调用摄像头和裁剪图片的代码实现。同时，文中提醒在开发时需要注意PC和移动端的不同处理方式。

摘要由CSDN通过智能技术生成

1.新建Cordova项目，在项目目录里添加插件

cordova plugin add cordova-plugin-camera 

cordova plugin add --save cordova-plugin-crop

2. 在Vue项目的index.html中引入Cordova.js并添加设备监听函数

  <body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script> 
    <script>
      document.addEventListener('deviceready', function() {

      }, false);
    </script>
  </body>

注：npm run dev的时候要把引入和监听函数注释掉，因为这样在PC端跑不起来，在手机里才可以。

3.在需要调取摄像头的地方加入代码

比如我在一个“打开相机”的按钮上点击事件绑定了一个函数，叫getCamera，代码如下

    getCamera: function(){
        //打开照相机
        navigator.camera.getPicture(function(imageURI){
                    //打开摄像头成功的回调
                  plugins.crop(function su

最低0.47元/天解锁文章

前端复制粘贴工程师

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
Vue项目使用Cordova实现调取原生摄像头并实现裁剪功能

1.新建Cordova项目，在项目目录里添加插件cordova plugin add cordova-plugin-camera cordova plugin add --save cordova-plugin-crop 2. 在Vue项目的index.html中引入Cordova.js并添加设备监听函数 &lt;body&gt; &lt;div id="app"...
复制链接

扫一扫