如何使用 Cordova 从 URI 加载 Android 上的图像答案

【问题标题】：How to load Image on Android from URI using Cordova如何使用 Cordova 从 URI 加载 Android 上的图像
【发布时间】：2015-09-16 02:14:34
【问题描述】：

我正在尝试从 Cordova 项目的 URI 加载图像。

以下代码在 Windows Phone 上运行良好，但在 Android 上我无法加载图像。

$(document).ready(function(){
    $("#btnTest").on("click", loadImage);
    $("#btnTestUsingDataUrl").on("click", loadImageFromDataURL);
});

function loadImage(){
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: 0 });
}

function loadImageFromDataURL() {
    navigator.camera.getPicture(onPhotoDataSuccessUsingDataURL, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: 0 });
}

function onPhotoDataSuccess(imageURI) { 
    var imgProfile = document.getElementById('imgTest');
    imgProfile.src = imageURI;
    alert(imageURI);
}

function onPhotoDataSuccessUsingDataURL(imageURI) { 
    var imgProfile = document.getElementById('imgTest');
    imgProfile.src = "data:image/jpeg;base64," + imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Android 上返回的 URI 是 "content://com.android.providers.media.documents/document/image%3A3449";

安卓版本：5.0.2。

Cordova 版本：5.1.1。

相机插件：org.apache.cordova.camera.

使用 DataUrl 的示例在 Android 和 Windows Phone 上都可以正常工作。

有人可以帮我吗？

【问题讨论】：

移除摄像头插件并使用cordova插件从npm安装最新的插件添加cordova-plugin-camera
@jcesarmobile 我创建了一个新项目并添加了新版本的插件。
问题依然存在？
我已经更改了我的代码并且工作了。我得到一个 URI，然后将文件加载到 base64 并更新了我的图像。我会在晚上发布代码。谢谢=)

标签： javascript android cordova

【解决方案1】：

我找到了答案。我正在使用 Camera.DestinationType.FILE_URI 来获取图像的路径并存储它以便以后获取图像。

之后，我使用 FileReader 获取 Base64 格式的图像，然后附加到 img 标记。

$(document).ready(function () {
    $("#btnTest").on("click", loadImage);
});

function loadImage() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: 0 });
}

function onPhotoDataSuccess(imageURI) {
    window.resolveLocalFileSystemURL(imageURI, resolveOnSuccess, resOnError);
}

function onFail(message) {
    alert('Failed because: ' + message);
}

function resOnError(error) {
    alert("resOnError - " + error.code);
}

function resolveOnSuccess(entry) {
    entry.file(function (fileInput) {
        var reader = new FileReader();
        reader.onloadend = function (evt) {
            var base64 = evt.target.result;
            var imgBase64 = $('#imgTest');
            imgBase64.attr('src', base64);
        };
        reader.readAsDataURL(fileInput);
    }, function () { alert('fail on trying to read the file.') });
}

我希望它对某人有所帮助。 =)

【讨论】：