如何创建一个新的 img 标签并用 JavaScript 图片填充它？答案

【问题标题】：How can I create a new img tag and fill it with JavaScript picture?如何创建一个新的 img 标签并用 JavaScript 图片填充它？
【发布时间】：2016-07-05 19:00:18
【问题描述】：

我正在尝试开发一个应用程序（使用 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标签？

谢谢大家

【问题讨论】：

标签： javascript android html cordova

【解决方案1】：

是的！你想要document.createElement。首先，您使用pictures = document.getElementById("DynamicPictureTaken"); 抓住要添加它们的 div，然后使用以下命令附加它们：

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

我对@987654325@ 不是 100% 熟悉，但如果我理解正确，那应该可以。

【讨论】：

感谢您的回复，即使还没有工作。我正在使用 device.capture.captureImage，因为 navigator.camera.getPicture 不允许我获取多于一张图片。这里有你的建议的编辑代码：pastebin.com/KiCxEVBE我错过了什么？

【解决方案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');
}

}

【讨论】：