Question

我希望能够通过按钮<button onclick="showImage();">Show Image</button><br>显示最近捕获的图像，但不知道如何执行此操作，我在Phonegap API中找不到任何有关它的信息。基本上它是我需要帮助创建的函数showImage();。

正在正确执行捕获图像的代码，我正在运行iOS 6.

的PhoneGap /科尔多瓦：

  <title>Capture Image</title>

        <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="json2.js"></script>
        <script type="text/javascript" charset="utf-8">

            var captureSuccess = function(mediaFiles) {
                var i, path, len;
                for (i = 0, len = mediaFiles.length; i < len; i += 1) {
                    readDataUrl = mediaFiles[i].fullPath;

                }
            };

            function captureError(error) {
                var msg = 'An error occurred during capture: ' + error.code;
                document.getElementById('errormsg').innerHTML = msg;
            }

            function captureImage(){
                document.getElementById('format-data').innerHTML = "";
                document.getElementById('capture-result').innerHTML = "";
                navigator.device.capture.captureImage(captureImageSuccess, captureError, {limit: 1});
            }

            }

            function captureImageSuccess(mediaFiles) {
                var i, len;

                var formatSuccess = function (mediaFiles) {
                    document.getElementById('format-data').innerHTML =
                    "Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
                    "Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
                };
                for (i = 0, len = mediaFiles.length; i < len; i += 1) {
                    // uploadFile(mediaFiles[i]);
                    document.getElementById('capture-result').innerHTML = "<br/><strong>" + (i+1) + " file<br/> Path: " + mediaFiles[i].fullPath + "</strong><br/>" +
                    "Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
                    "Width: <strong>" + mediaFiles[i].width + "</strong><br/>";
                    mediaFiles[i].getFormatData(formatSuccess, formatError);
                }
                console.log("captureImageSuccess");
            }


            </script>

    </head>

HTML：

<body>
        <button onclick="captureImage();">Capture Image</button> <br>
        <button onclick="showImage();">Show Image</button><br>
        <div class="result-block">
            Capture Result: <span id="capture-result"></span><br/>
            <span id="errormsg"></span>
        </div>


    </body>
</html>

Answer 1

你有图像的完整路径，只需创建一个img元素：

<img id="picResult" />

并在您的javascript中设置它的url，只要您收到回复：

var formatSuccess = function (mediaFiles) {
    document.getElementById('format-data').innerHTML =
    "Height: <strong>" + mediaFiles[i].height + "</strong><br/>" +
    "Width: <strong>" + mediaFiles[i].width + "</strong><br/>";

    //HERE:
    document.getElementById('picResult').src = mediaFiles[i].fullPath;

};

Answer 2

我发布了与您类似的问题的答案。该帖子向您展示了如何在缩略图上显示捕获的图片。

了解如何解决问题：https://stackoverflow.com/a/14043467/1853864

Answer 3

HTML

<img id="picResult" width="100px" border="1" />

JS

// capture callback
function captureSuccess(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
    path = mediaFiles[i].fullPath;
    // do something interesting with the file
$('#picResult').attr('src',path);
   }
};

请务必查看这些在线文档右上角的PhoneGap版本号，以确保您做得正确。

查看此处如何 PhoneGap - Media Docs

使用Phonegap显示最近捕获的图像

3 个答案: