3

我希望能够通过按钮显示最近捕获的图像<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>
4

3 回答 3

0

那么你有图像的完整路径，只需创建一个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;

};
于 2013-01-08T23:54:34.043 回答
0

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

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

于 2013-01-09T10:56:05.840 回答
0

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

于 2013-04-03T23:53:48.300 回答