在 cordova-plugin-camera 上使用 FILE_URI 显示照片库图像答案

【问题标题】：Display Photo library image using FILE_URI on cordova-plugin-camera在 cordova-plugin-camera 上使用 FILE_URI 显示照片库图像
【发布时间】：2016-04-08 12:31:08
【问题描述】：

我使用 cordova-plugin-camera 要求用户从 PHOTOLIBRARY 中选择图像。我正在使用 Android 测试它

我传递给相机的选项是：

options: {
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                destinationType: Camera.DestinationType.FILE_URI
            }

然后我在成功回调时得到以下 URI：

content://media/external/images/media/14555

但是当我尝试使用它在 html 上显示为：

<img src="content://media/external/images/media/14555"/>

它不起作用并显示此消息

加载资源失败：服务器响应状态为 404 （未找到）

我已经尝试了所有方法，但无法显示图像。还有一件事我不能在相机插件上使用 DATA_URL，因为我需要访问实际文件。

【问题讨论】：

标签： cordova cordova-plugins

【解决方案1】：

它响应为 404，因为在应用程序的上下文中，uri 是无关紧要的，因为 webview 无法解析 uri，你需要使用一些文件 API 插件导入文件，然后它才能工作。希望它有帮助。

【讨论】：

它有帮助。有点。我发现如果我使用 cordova-plugin-filetransfer 将照片复制到应用程序目录，那么我可以获得一个有效的 Url。但这更多的是解决方法而不是解决方案。对我来说，一个解决方案是有一种方法将 content:// URI（来自相机插件）转换为可直接在 webview 上使用的有效 URL。

【解决方案2】：

我已经使用 cordova 的 File API 插件实现了这个，

这里是链接https://github.com/wymsee/cordova-imagePicker

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
                <button style="width:30%;" onclick="pickImage()">Clean Data</button>
                <p id="lastPhoto"></p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
         <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            function pickImage(){
                var lastPhotoContainer = document.getElementById("lastPhoto");
                var doc= document.getElementBy
                window.imagePicker.getPictures(
                function(results) {
                    console.log(results);
                        for (var i = 0; i < results.length; i++) {
                        var imageUri=results[i];
                        console.log('Image URI: ' + results[i]);
                        lastPhotoContainer.innerHTML = "<img src='" + imageUri + "' style='width: 75%;' />";
                        }
                    }, function (error) {
                        console.log('Error: ' + error);
                }
            );
            }
        </script>
    </body>
</html>

【讨论】：