在另一个图像上添加图像作为按钮答案

【问题标题】：Adding an image on another image as a button在另一个图像上添加图像作为按钮
【发布时间】：2019-06-17 21:12:43
【问题描述】：

我创建了一个画廊。

画廊被分成 4 个网格。您可以选择图像并使用 Javascript 将图像放置在网格中。

这是我的代码：

let column1 = document.getElementsByClassName('column1')[0];
let column2 = document.getElementsByClassName('column2')[0];
let column3 = document.getElementsByClassName('column3')[0];
let column4 = document.getElementsByClassName('column4')[0];



let column = 1;

document.getElementById('picField').onchange = function (evt) {
    let tgt = evt.target || window.event.srcElement,
        files = tgt.files;
    for (let x = 0; x < files.length; x++) {
        // FileReader support
        if (FileReader && files && files.length) {
            let fr = new FileReader();
            fr.readAsDataURL(files[x]);
            fr.onload = function () {

                let img = document.createElement("img");
                img.src = fr.result;

                let removeButton = document.createElement("img");
                removeButton.src = "remove.png";

                if (column == 1) {
                    column1.appendChild(img);
                    column++;
                } else if (column == 2) {
                    column2.appendChild(img);
                    column++;
                } else if (column == 3) {
                    column3.appendChild(img);
                    column++;
                } else if (column == 4) {
                    column4.appendChild(img);
                    column = 1;
                }
            }

        }

        // Not supported
        else {
            // fallback -- perhaps submit the input to an iframe and temporarily store
            // them on the server until the user's session ends.
        }
    }


}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 30px 60px;
    background-color: lightgray;
    border-style: ridge;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    width: 100%;
    z-index: 1;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        max-width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="load">
        <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
            multiple />
    </div>
    <div class="row">
        <div class="column column1">
        </div>
        <div class="column column2">
        </div>
        <div class="column column3">
        </div>
        <div class="column column4">
        </div>
    </div>
</body>
<script src="/app.js"></script>

</html>

现在我添加了一个额外的图像：

let removeButton = document.createElement("img");
                removeButton.src = "remove.png";

This removeButton is just a simple 24px red cross。我想将此 removeButton 添加到每个图像的右上角。当用户单击 removeButton 时，图像必须从图库中删除。

我认为 Javascript 的实现并不难。当图像和 removeButton 共享同一个父级时。我可以选择父级并将其删除。

但我未能正确布局。我试图使图像相对而 removeButton 绝对。但随后 removeButton 绝对显示为正文，而不是图像。

首先，我将 removeButton 添加为图像的子项。然后我将元素包装在一个 div 中，但注意到有效。 This is what i have in mind.

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript html css

【解决方案1】：

您应该改用<button>，您可以为它分配一个图像并相应地设置它的样式。两者都是图像不是一个好主意，而且一般来说，拥有一个明显是 <button> 的东西是 <img> 的可访问性也不是一个好主意。我认为走这条路你可能会得到它的工作。如果您不了解这个想法，我可以根据您的代码想到一个示例。

编辑了我的想法的一个小例子

let removeButton = document.createElement("button");
removeButton.classList.add("button-delete");
removeButton.innerHTML = "X";

if (column == 1) {
    column1.appendChild(img);
    // You will have to append this button to each column manually to each column number
    column1.appendChild(removeButton);
    column++;

此外，您必须将 click 函数添加到按钮，在您的情况下，必须删除 img 元素和按钮本身...但请记住...您的方式这样做有点硬编码，事情，当你删除一张图片时，你也应该说，好吧，列数应该减少，但如果你已经在这个画廊中有一张图片，并删除那个在中间，这看起来不太好。

这里已经是另一个问题了，但我建议你不要那么强迫，比如尽量不要使用很多ifs，如果可以的话，首先尝试将图像自动换行，我首先想到的是使用flex 将它们包装成适合画廊 div，这样你应该只删除图像，包装将自行修复，你不必保留列数之类的东西。

对不起，如果我不够清楚:)

【讨论】：

【解决方案2】：

I found this topic. 我试图在一个单独的文件中创建一个带有叠加层的 img 并且它有效。

我在我的项目中实现了这个，现在它工作正常：

let column1 = document.getElementsByClassName('column1')[0];
let column2 = document.getElementsByClassName('column2')[0];
let column3 = document.getElementsByClassName('column3')[0];
let column4 = document.getElementsByClassName('column4')[0];



let column = 1;

document.getElementById('picField').onchange = function (evt) {
    let tgt = evt.target || window.event.srcElement,
        files = tgt.files;
    for (let x = 0; x < files.length; x++) {
        // FileReader support
        if (FileReader && files && files.length) {
            let fr = new FileReader();
            fr.readAsDataURL(files[x]);
            fr.onload = function () {

                let containerDiv = document.createElement("div");
                containerDiv.setAttribute("class", "img-overlay");

                let img = document.createElement("img");
                img.src = fr.result;

                let removeButton = document.createElement("button");
                removeButton.setAttribute("class", "overlay");

                let removeImage = document.createElement("img");
                removeImage.src = "https://image.flaticon.com/icons/svg/579/579006.svg";

                removeButton.appendChild(removeImage);

                containerDiv.appendChild(img);
                containerDiv.appendChild(removeButton);

                if (column == 1) {
                    column1.appendChild(containerDiv);
                    column++;
                } else if (column == 2) {
                    column2.appendChild(containerDiv);
                    column++;
                } else if (column == 3) {
                    column3.appendChild(containerDiv);
                    column++;
                } else if (column == 4) {
                    column4.appendChild(containerDiv);
                    column = 1;
                }
            }

        }

        // Not supported
        else {
            // fallback -- perhaps submit the input to an iframe and temporarily store
            // them on the server until the user's session ends.
        }
    }


}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    margin: 30px 60px;
    background-color: lightgray;
    border-style: ridge;
}

/* Create four equal columns that sits next to each other */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.img-overlay {
    position: relative;
    width: 100%;

}

.overlay {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 6px;
    right: 3px;
}


.column img {
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    width: 100%;
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        min-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        min-width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="load">
        <input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
            multiple />
    </div>
    <div class="row">
        <div class="column column1">
        </div>
        <div class="column column2">
        </div>
        <div class="column column3">
        </div>
        <div class="column column4">
        </div>
    </div>
</body>
<script src="/app.js"></script>

</html>

我在 img 中添加了一个位置，但这是错误的。现在它工作正常，我可以开始实现删除功能。

【讨论】：