时间戳

首页 > 解决方案 > 使用 Javascript 在同一网页（大图像下方）上动态创建生成图像的缩略图

javascript - 使用 Javascript 在同一网页（大图像下方）上动态创建生成图像的缩略图

问题描述

我已经看到了类似的问题并浏览了 2 天，但还没有找到适合我要求的解决方案。在我的前端 Web 应用程序中，用户将生成全尺寸图像。然后，如果他们希望保留图像，则单击“候选名单”，并且图像必须以缩略图的形式下降到底部。

然后用户生成另一个图像。并将其作为第二个缩略图再次发送。在排序结束时，用户还必须具有删除一个或多个缩略图的选项。

我设法以一种非常粗略的方式将图像作为缩略图发送（通过创建 4 个具有 id 的 thumbnail1 - 4 的 div）。但是在删除缩略图后（如果用户改变主意），我无法自动化该过程并说明继续。

我找到了我喜欢的这个 jquery 实现，但也许我没有正确安装/导入依赖项，所以它不起作用。

有人能指点我这样一个系统的实现吗？我在下面粘贴了一个简化的 HTML 和 JS 代码，为了便于理解，对大图像生成内容进行了编辑。“绘制”按钮生成图像。并且“候选名单”按钮必须将其作为缩略图发送到大图像下方的一行。

HTML 代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>


<div class="container-fluid">

    <div class="row justify-content-md-center">
  
            <div class="col-md-auto">
                <div class="mt-3">
                <button type="button" id="updateBtn" class="btn btn-outline-light">Draw</button>
                </div>
            </div>
            <div class="col-md-auto">
                <div class="mt-3">
                <button type="button" id="shortlistBtn" onclick="shortlist()" class="btn btn-outline-light">Shortlist</button>
                </div>
            </div>

    </div>
    <!-- The expanding image container -->
<div class="p-4">
<div class="container">
  <!-- Close the image -->
  <div class="row">
    <div class="column">

      <img src="images\Image1.png" class="rounded mx-auto d-block" id = "expandedImg" alt="Large Image";>
    </div>
  </div>
</div>
</div>


<div class="container">
  <div class="row">
    <div class="col">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <div class="img-fluid img-thumbnail" id="thumbnailImg1"></div>
    </div>
    <div class="col">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img class="img-thumbnail" id="thumbnailImg2" style="width:20%">
    </div>
    <div class="col">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img class="img-thumbnail" id="thumbnailImg3" style="width:20%">
    </div>
    <div class="col">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img class="img-thumbnail" id="thumbnailImg4" style="width:20%">
    </div>
  </div>
</div>

    <script src="app.js"></script>
</body>
</html>

应用程序.JS：

let thumbnail1 = document.getElementById('thumbnailImg1');
let thumbnail2 = document.getElementById('thumbnailImg2');
let thumbnail3 = document.getElementById('thumbnailImg3');
let thumbnail4 = document.getElementById('thumbnailImg4');
let mainImage = document.getElementById("expandedImg");


  function shortlist() {
    let cloneImage = mainImage.cloneNode(true);
    if (thumbnail4.hasChildNodes()) {
      thumbnail4.removeChild(thumbnail4.firstChild);
      thumbnail4.appendChild(thumbnail3.firstChild);
    }

    if (thumbnail3.hasChildNodes()) {
      thumbnail3.removeChild(thumbnail3.firstChild);
      thumbnail3.appendChild(thumbnail2.firstChild);
    }

    if (thumbnail2.hasChildNodes()) {
      thumbnail2.removeChild(thumbnail2.firstChild);
      thumbnail2.appendChild(thumbnail1.firstChild);;
    }
    cloneImage.width = cloneImage.width * 0.25;
    cloneImage.height = cloneImage.height * 0.25;
    if (thumbnail1.hasChildNodes()) {
      thumbnail1.removeChild(thumbnail1.firstChild);
    }
    thumbnail1.appendChild(cloneImage);
  }

如果我对要求的解释令人困惑，请在此处查看网页截图： https ://drive.google.com/file/d/1BW4FBn72LHFfKmx5N9cWiSn1EGpTLtka/view?usp=sharing 我希望使用候选列表按钮创建缩略图，用于生成的每个新图像（单击绘制时会生成新图像）。

标签： javascripthtmljquerycss

解决方案

推荐阅读