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

Question

我正在嘗試開發一個應用程序（使用Cordova），在這里我需要獲取靈活的圖片並將它們添加到div標簽中。

假設這是我在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標簽？

謝謝大家

Answer 1

是! 您需要document.createElement 。 首先，使用pictures = document.getElementById("DynamicPictureTaken");來確定要添加的div pictures = document.getElementById("DynamicPictureTaken"); ，然后使用：

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

我不是100％熟悉device.capture.captureImage但如果我正確理解，那應該可以完成工作。

Answer 2

經過一些編輯后，我使用了以下代碼：

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');
}

}