Question

我正在尝试使用phonegap（cordova）功能在一个非常简单的应用程序中显示来自用户相册的照片。

到目前为止，它的工作方式是用户可以从相册中选择一张照片，然后显示该照片。

我想要实现的是拥有另一个按钮，以便用户可以在第一个按钮下添加另一个图像（而不是替换第一个）。有没有办法做到这一点？ [在

任何帮助将不胜感激：）

这是没有任何设计等的代码。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
 var pictureSource; // picture source
 var destinationType; // sets the format of returned value 

 // Wait for Cordova to connect with the device
 document.addEventListener("deviceready",onDeviceReady,false);

 // Cordova is ready to be used!
 function onDeviceReady() {
   pictureSource=navigator.camera.PictureSourceType;
   destinationType=navigator.camera.DestinationType;
 }

 // Take picture using device camera and retrieve image as base64-encoded string
 function capturePhoto() {
   navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
   destinationType: destinationType.DATA_URL });
 }

 // Called if something bad happens. 
 function onFail(message) {
   alert('Failed because: ' + message);
 }

 function onPhotoDataSuccess(imageData) {
   // Uncomment to view the base64 encoded image data
   // console.log(imageData);

   // Get image handle
   var largeImage = document.getElementById('largeImage');

   // Unhide image elements
   largeImage.style.display = 'block';

   // Show the captured photo
   // The inline CSS rules are used to resize the image
   largeImage.src = "data:image/jpeg;base64," + imageData;
 }

 // Called when a photo is successfully retrieved
 function onPhotoURISuccess(imageURI) {
   // Uncomment to view the image file URI 
   // console.log(imageURI);

   // Get image handle
   var largeImage = document.getElementById('largeImage');

   // Unhide image elements
   largeImage.style.display = 'block';

   // Show the captured photo
   // The inline CSS rules are used to resize the image
   largeImage.src = imageURI;
 }
 // A button will call this function to retrieve photos from the album
 function getPhoto(source) {

   // Retrieve image file location from specified source
   navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
     destinationType: destinationType.FILE_URI,
     sourceType: source });
 }
</script>


<link href="css/jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div data-role="content"> 
  <button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Browse     Photos</button> 
  <img style="display:none;width:100%;" id="largeImage" src="" /> <br>
</div>

</body>

Answer 1

您似乎只包含了JQuery Mobile CSS，因此您需要包含JQuery和JQuery Mobile JS文件。

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

那么我要做的是更改onPhotoURISuccess（imageURI）功能。您可以在每次检索新图像时将其动态创建并将其添加到新div中，而不是更改已存在的img元素的src。

首先，我们将您的html更改为。

<div data-role="content"> 
<button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Browse          Photos</button> 
<div id="photos"></div>
</div>

然后我们可以按照以下方式更改您的功能。

function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI 
// console.log(imageURI);

// Create new Image element
var img = $('<img />');
img.attr('src', imageURI);

// Append new img to our photos div
img.appendTo('#photos');

}

Phonegap：显示电话相册中的多个图像

1 个答案: