鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

鸿蒙手机cordova-plugin-camera不能拍照和图片不显示问题

一、运行环境

1、硬件

手机型号:NOVA 7

系统:HarmonyOS版本 4.0.0

2、软件

android SDK platforms:14.0(API Level 34)、13.0(API Level 33)

SDK Build-Tools: 33.0.3

JDK 17

Cordova-android-version:12.0.1

cordova-plugin-camera:7.0.0

二、运行拍照功能错误并且图片仅显示为图标

在基于cordova平台采用cemara最新版本插件开发拍照功能时,出现以下错误:

用推荐的FILE_URI模式,显示图库图片时,只显示为一个图标,不能正确显示图片;

并且运行"拍照"功能,会出现错误:

三、问题解决

对于FILE_URI只显示图标,可能原因为Android11后限制了目录访问权限?(有待研究)

解决方法:

1、拍照和显示图库都选为DATA_URL方式

2、拍照出错,根据harmonyOS和android的对应版本关系,harmonyOS对应android12(API Level31)

因此,在sdk manager中选择安装了SDK Platform:android12(API Level31)

然后重新新建工程、新增platform和插件,拷入源码运行,拍照功能正常!

目前系统运行环境为:

程序index.js的关键部分源码如下:

cpp 复制代码
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
    // Cordova is now initialized. Have fun!
 document.getElementById("takePicture").addEventListener("touchend", function() {
        navigator.camera.getPicture(onSuccess, onFail, { 
            quality: 50,
            // destinationType: Camera.DestinationType.FILE_URI,
             destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            correctOrientation: true
        });
    });
    //Use from Library
    document.querySelector("#usePicture").addEventListener("touchend", function() {
        navigator.camera.getPicture(onSuccess, onFail, { 
            quality: 50,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: Camera.DestinationType.DATA_URL//FILE_URI会显示为图标
        });
    });
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;//DATA_URL模式
        // image.src = imageData;//FILE_URI模式
    }

    function onFail(message) {
        alert('错误:'+message);
     }   
}
相关推荐
大雷神31 分钟前
HarmonyOS智慧农业管理应用开发教程--高高种地--第20篇:天气服务与气象数据
harmonyos
爱吃大芒果31 分钟前
Flutter for OpenHarmony 适配:mango_shop 页面布局的鸿蒙多设备屏幕适配方案
flutter·华为·harmonyos
前端不太难32 分钟前
没有文档模型,HarmonyOS PC 应用会发生什么?
华为·状态模式·harmonyos
2601_9495936537 分钟前
高级进阶 React Native 鸿蒙跨平台开发:LinearGradient 玻璃拟态卡片
react native·react.js·harmonyos
摘星编程1 小时前
在OpenHarmony上用React Native:TopTab顶部标签页
react native·react.js·harmonyos
大雷神1 小时前
HarmonyOS智慧农业管理应用开发教程--高高种地--第25篇:学习中心 - 课程详情与学习
学习·华为·harmonyos
一起养小猫2 小时前
Flutter for OpenHarmony 实战:从零开发一款五子棋游戏
android·前端·javascript·flutter·游戏·harmonyos
BlackWolfSky2 小时前
鸿蒙中级课程笔记8—Native适配开发
笔记·华为·harmonyos
一起养小猫2 小时前
Flutter for OpenHarmony 实战:天气预报应用UI设计与主题切换
jvm·数据库·spring·flutter·ui·harmonyos
BlackWolfSky2 小时前
鸿蒙中级课程笔记7—给应用添加通知
笔记·华为·harmonyos