How can I create a new img tag and fill it with JavaScript picture?

Question

I'm trying to develop an app (using Cordova) where I need to get an flexible number of pictures and add them in a div tag.

Let's say this is my in HTML where I call the JavaScript function and where I want to have all the pictures taken by that button:

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

            </div>
        </div>

And this is my JavaScript which get the pictures:

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

}

How can I get the X pictures displayed in div tag? Is it possible to create dinamically the img tag with the picture inside?

Thank you all guys

Answer 1

Yes! You want document.createElement . first, you snag the div you want to add them to using pictures = document.getElementById("DynamicPictureTaken"); , then append them using:

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

I'm not 100% familiar with device.capture.captureImage but if i'm understanding correctly, that should do the job.

Answer 2

I got it working with the following code after some edits:

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

}