如何創建新的img標籤並用JavaScript圖片填充它？

我試圖開發一個應用程序（使用科爾多瓦），我需要獲得靈活的圖片數量並將它們添加到div標籤。如何創建新的img標籤並用JavaScript圖片填充它？

比方說，這是我在HTML，我調用JavaScript函數，並在那裏我想有通過該按鈕拍攝的所有圖片：

<div id="DynamicGallery"> 
      <button id= "DynamicPicture" onclick="openCamera();">Take Picture Dynamically</button> 
      <div id="DynamicPictureTaken"> 

      </div> 
     </div>

這是我的JavaScript這將照片：

function openCamera(selection) { 

// start image capture 
navigator.device.capture.captureImage(captureSuccess, captureError, {limit:10}); 

// capture callback 
var captureSuccess = function(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 
    } 
}; 

// capture error callback 
var captureError = function(error) { 
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); 
};

}

我怎樣才能在div標籤中顯示的X照片？是否有可能創建與圖片裏面的img標籤dinamically？

謝謝大家

來源

2016-07-05 Mattia G

是的！你想要document.createElement。首先，你鉤住你想將它們添加到使用pictures = document.getElementById("DynamicPictureTaken");股利，然後使用它們附加：

var img = document.createElement("img") 
img.setAttribute("src", path); 
pictures.appendChild(img);

我不是100％熟悉的device.capture.captureImage但是如果我理解正確的話，那應該做的工作。

來源

2016-07-05 19:14:21

謝謝您的回覆，即使它不工作，但。我正在使用device.capture.captureImage，因爲navigator.camera.getPicture不允許我獲取多個圖片。這裏有編輯代碼與您的建議：http://pastebin.com/KiCxEVBE 我錯過了什麼？ –

我把它用下面的代碼工作的一些修改後：

function openCamera() { 

var options = { 
    //limit: 2 
    quality: 50, 
    saveToPhotoAlbum: true 
}; 

navigator.device.capture.captureImage(onSuccess, onError, options); 
pictures = document.getElementById("DynamicPictureTaken"); 

function onSuccess(mediaFiles) { 
    var i, path, len; 

    for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
     path = mediaFiles[i].fullPath; 
     //console.log(mediaFiles); 
     //console.log(JSON.stringify(mediaFiles)); 

     var img = document.createElement("img"); //$('<img id="dynamic">'); 
     img.setAttribute("src", path); 
     img.setAttribute('width', '20%'); 
     img.setAttribute('height', '20%'); 
     img.setAttribute('id', 'DeficiencyDynamicImage'); 
     pictures.appendChild(img); 
    } 
} 

function onError(error) { 
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error'); 
}

}

來源

2016-07-07 16:50:04

如何創建新的img標籤並用JavaScript圖片填充它？

回答

相關問題