Vue基于Cordova调用相机

最新推荐文章于 2025-02-27 00:30:00 发布

啟华

最新推荐文章于 2025-02-27 00:30:00 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue cordova 文章标签： vue cordova

本文链接：https://blog.youkuaiyun.com/weixin_43098481/article/details/83180991

cordova 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Cordova插件，实现调用相机和从相册选取图片的功能，并展示了具体的代码实现与步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue基于Cordova调用相机

记录：Vue如何基于Cordova打包的apk调用相机
感谢优快云作者：michael_ouyang提供【cordova camera插件——摄像头插件的使用及上传图片】的思路
原文：https://blog.youkuaiyun.com/michael_ouyang/article/details/75085648

Vue层面代码

在某个.vue文件添加下面代码：

<template>
  <div id="app">
    <p>测试Vue调用相机功能</p>
    <!-- 使用相机功能按钮 -->
    <button @click="useCameraPlugin('SAVEDPHOTOALBUM')">从文件夹获取</button>
    <button @click="useCameraPlugin('Camera')">使用相机</button>
    <!-- 获取图片的展示 区域 -->
    <img id="myImage" src="{{imgData}}" style="height: 200px;">
  </div>
</template>


<script>
export default {
  name: 'App',
  el: '#app',
  data(){
    return{
      imgData:"http://pic1.cxtuku.com/00/00/24/b916ebb736a7.jpg", //默认图片
      //根据传值选择不一样的图片获取方式
      sourceType:{ "SAVEDPHOTOALBUM":Camera.PictureSourceType.SAVEDPHOTOALBUM, "Camera" :Camera.PictureSourceType.Camera}
    }
  },
  methods: {
    // type：SAVEDPHOTOALBUM/Camera 分别是调用图库文件和调用相机
    useCameraPlugin: function (type) {
      navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        sourceType: this.sourceType[type], // 设置从图片库获取
        destinationType: Camera.DestinationType.DATA_URL
      })
      function onSuccess(imageData) {
        document.getElementById('myImage').src = "data:image/jpeg;base64," + imageData;
      }
      function onFail(message) {
        alert('Failed because: ' + message);
      }
    },
  watch:{
    onSuccess: function  (imageData) {
   		this.imgData = "data:image/jpeg;base64," + imageData
	},
  onFail:function  (message) {
  		alert('Failed because: ' + message)
	}
  }
}
</script>