ios不显示拍照和相册选中的图片

ios不显示拍照和相册选中的图片

问题描述:

vue打包成5+app,ios端。安卓端是可以直接显示的,pc不支持调用5+app属性的


解决方案:

ios不显示拍照和相册选中的图片
配置:5+app中的manifest.json
permissions下面配置系统相册和摄像头
plus或者app-plus下面配置"runmode" : “liberate”,
权限配置:选中权限前面打勾即可
android.hardware.camera
android.hardware.camera.autofocus
android.permission.CAMERA
android.permission.WRITE_EXTERNAL_STORAGE
android.permission.READ_EXTERNAL_STORAGE

manifest.json:

"permissions" : {
     
    "Gallery" : {
     
        "description" : "系统相册"
    },
    "Camera" : {
     
        "description" : "摄像头"
    },
},
"plus" : {
     
   "runmode" : "liberate",
},

html:

<template>
  <div class="test">
    <div @click="imgshow = true">
      
      <img src="../../assets/x.png" v-show="imgSrc == ''"  width="100px" height="100px"/>
      
      <img :src="imgSrc" v-show="imgSrc != ''" />
    div>
    <div>
      <van-action-sheet
        v-model="imgshow"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
        title="选择"
        close-icon
      />
    div>
  div>
template>

js:

<script>
export default {
     
  data() {
     
    return {
     
      imgshow: false,
      imgSrc: "", //展示的图片路径
      actions: [{
      name: "拍照" }, {
      name: "相册" }],
    };
  },
  methods:{
     
    onSelect(item) {
     
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.imgshow = false;
      // Toast(item.name);
      if (item.name == "拍照") {
     
        console.log("拍照");
        // 调用方法
        this.captureImage();
      } else {
     
        console.log("照片");
        this.galleryImg();
      }
    },
    // 拍照方法
    captureImage() {
     
      let This = this;
      var cmr = plus.camera.getCamera(); //获取摄像头管理对象
      var res = cmr.supportedImageResolutions[0]; //字符串数组,摄像头支持的拍照分辨率
      var fmt = cmr.supportedImageFormats[0]; //字符串数组,摄像头支持的拍照文件格式
      console.log("拍照分辨率: " + res + ", 拍照文件格式: " + fmt);
      cmr.captureImage(
        function (path) {
     
          //进行拍照操作
          // 通过URL参数获取目录对象或文件对象
          plus.io.resolveLocalFileSystemURL(path, function (entry) {
     
            var tmpPath = entry.toLocalURL(); //获取目录路径转换为本地路径URL地址
            This.imgSrc = tmpPath;
            // alert("拍摄成功: " + tmpPath);
          });
        },
        function (error) {
     
          //捕获图像失败回调
          console.log("捕获图像失败: " + error.message);
        },
        {
      resolution: res, format: fmt }
      );
    },
    // 相册方法
    galleryImg() {
     
      let This = this;
      console.log("从相册中选择图片:");
      plus.gallery.pick(
        function (path) {
     
          //从相册中选择图片
          This.imgSrc = path;
          // alert(path);
        },
        function (e) {
     
          //取消选择图片
          console.log("取消选择图片");
        },
        {
      filter: "image" }
      );
    },
  },
};
</script>

原因分析:

liberate模式在第一次启动时将解压应用资源(Android平台File API才可正常访问_www目录)

ios不显示拍照和相册选中的图片_第1张图片

你可能感兴趣的:(ios,vue,vue)