3

最近キャプチャした画像をボタンで表示できるようにしたいのですが<button onclick="showImage();">Show Image</button><br>、その方法がわからず、PhonegapAPIでそれに関する適切な情報を見つけることができません。基本的に、それはshowImage();私が作成するのに助けが必要な関数です。

画像をキャプチャするためのコードは正しく実行されており、iOS6を実行しています。

Phonegap / Cordova：

  <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 を参照してください-メディアドキュメント

于 2013-04-03T23:53:48.300 に答える