当前位置:主页 > 查看内容

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

发布时间:2021-07-19 00:00| 位朋友查看

简介:ios不显示拍照和相册选中的图片 问题描述 vue打包成5appios端。安卓端是可以直接显示的pc不支持调用5app属性的 解决方案 ios不显示拍照和相册选中的图片 配置5app中的manifest.json permissions下面配置系统相册和摄像头 plus或者app-plus下面配置runmode :……

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目录)

在这里插入图片描述

;原文链接:https://blog.csdn.net/weixin_44479957/article/details/115757089
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!

推荐图文


随机推荐