个人中心
gpt4 book ai didi

javascript - 如何使用用户上传的图像作为我正在制作的滑动拼图的背景图像？

转载 作者：行者123 更新时间：2023-12-02 20:58:18 25 4
gpt4 key购买 nike

我正在尝试这样做，以便当用户上传图像文件时，它会自动用作拼图中的背景图像。我尝试过寻找如何做到这一点，我觉得这会很难，但我只是在放屁。我还希望在图像上传后启动计时器，但我觉得这是我自己可能能够弄清楚的事情，但任何提示肯定会受到赞赏。

html:

<!DOCTYPE html>
<html>
    <head>
        <script src="functions.js"></script>
        <link rel="stylesheet" href="design.css" type="text/css">
        <meta charset="UTF-8">
        <title>Puzzle</title>

    </head> 

    <body>

        <div class="file-upload">
        <input class="file-upload__input" type="file" name="picture" id="picture" accept="image/*">
        <button class="file-upload__button" type="button">Choose a Photo</button>
        <span class="file-upload__label"></span>
     </div>

<!--button formating-->
        <script>
            Array.prototype.forEach.call(document.querySelectorAll(".file-upload__button"), function(button) {
                const hiddenInput = button.parentElement.querySelector(".file-upload__input");
                const label = button.parentElement.querySelector(".file-upload__label");
                const defaultLabelText = "No file(s) selected";

                // Set default text for label
                label.textContent = defaultLabelText;
                label.title = defaultLabelText;

                button.addEventListener('click', function(){
                    hiddenInput.click();
                });
                hiddenInput.addEventListener('change', function(){
                    const filenameList = Array.prototype.map.call(hiddenInput.files, function (file){
                        return file.name;
                    });
                    label.textContent = filenameList.join(', ') || defaultLabelText;
                    label.title = label.textContent;
                });
            });
        </script>
<!--Puzzle-->
<center><div id="table" style="display: table;">
    <div id="row1" style="display: table-row;">
       <div id="cell11" class="tile1" onClick="clickTile(1,1);"></div>
       <div id="cell12" class="tile2" onClick="clickTile(1,2);"></div>
       <div id="cell13" class="tile3" onClick="clickTile(1,3);"></div>
    </div>
    <div id="row2" style="display: table-row;">
       <div id="cell21" class="tile4" onClick="clickTile(2,1);"></div>
       <div id="cell22" class="tile5" onClick="clickTile(2,2);"></div>
       <div id="cell23" class="tile6" onClick="clickTile(2,3);"></div>
    </div>
    <div id="row3" style="display: table-row;">
       <div id="cell31" class="tile7" onClick="clickTile(3,1);"></div>
       <div id="cell32" class="tile8" onClick="clickTile(3,2);"></div>
       <div id="cell33" class="tile9" onClick="clickTile(3,3);"></div>
    </div>
 </div>
   <button onClick="shuffle();">New Game</button>
 </center>
</body>
 </html>

CSS:

body { 
    background: #002a3f;
    }
.file-upload {
    display: inline-flex;
    align-items: center;
    font-size: 20px;

}
.file-upload__input {
    display: none;
}

.file-upload__button {
    -webkit-appearance: none;
    background: #009879;
    border: 2px solid #00745d;
    border-radius: 4px;
    outline: none;
    padding: 0.5em 0.8em;
    margin-right: 15px;
    color: white;
    font-size: 1em;
    font-family: sans-serif;
    font-weight: bold;
    cursor: pointer;
}

.file-upload__button:active{
    background: #00745d;
}

.file-upload__label{
    max-width: 250px;
    font-size: 0.95em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

    .tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9 {
      display: table-cell;
      width: 120px;
      height: 120px;
      border: 1px solid rgb(100, 100, 100);
      background: url(); 
      cursor: pointer;
    }

    .tile1 {background-position: left top;}
    .tile2 {background-position: center top;}
    .tile3 {background-position: right top;}
    .tile4 {background-position: left center;}
    .tile5 {background-position: center center;}
    .tile6 {background-position: right center;}
    .tile7 {background-position: left bottom;}
    .tile8 {background-position: center bottom;}
    .tile9 {background: rgb(58, 58, 58); cursor: default;}

JS:

function swapTiles(cell1,cell2) {
    var temp = document.getElementById(cell1).className;
    document.getElementById(cell1).className = document.getElementById(cell2).className;
    document.getElementById(cell2).className = temp;
  }

  function shuffle() {
  //Use nested loops to access each cell of the 3x3 grid
  for (var row=1;row<=3;row++) { //For each row of the 3x3 grid
     for (var column=1;column<=3;column++) { //For each column in this row

      var row2=Math.floor(Math.random()*3 + 1); //Pick a random row from 1 to 3
      var column2=Math.floor(Math.random()*3 + 1); //Pick a random column from 1 to 3

      swapTiles("cell"+row+column,"cell"+row2+column2); //Swap the look & feel of both cells
    } 
  } 
  }

  function clickTile(row,column) {
    var cell = document.getElementById("cell"+row+column);
    var tile = cell.className;
    if (tile!="tile9") { 
         //Checking if white tile on the right
         if (column<3) {
           if ( document.getElementById("cell"+row+(column+1)).className=="tile9") {
             swapTiles("cell"+row+column,"cell"+row+(column+1));
             return;
           }
         }
         //Checking if white tile on the left
         if (column>1) {
           if ( document.getElementById("cell"+row+(column-1)).className=="tile9") {
             swapTiles("cell"+row+column,"cell"+row+(column-1));
             return;
           }
         }
           //Checking if white tile is above
         if (row>1) {
           if ( document.getElementById("cell"+(row-1)+column).className=="tile9") {
             swapTiles("cell"+row+column,"cell"+(row-1)+column);
             return;
           }
         }
         //Checking if white tile is below
         if (row<3) {
           if ( document.getElementById("cell"+(row+1)+column).className=="tile9") {
             swapTiles("cell"+row+column,"cell"+(row+1)+column);
             return;
           }
         } 
    }

  }

最佳答案

您无需上传即可使用客户的图片。方法是使用 FileReader API。查看 Mozilla 的教程 FileReader.readAsDataURL() .

关于javascript - 如何使用用户上传的图像作为我正在制作的滑动拼图的背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61419245/

25 4 0
文章推荐： javascript - 如何迭代两个数组并生成唯一的 y 坐标
文章推荐： javascript - 如何将对象列表映射到数组数组
文章推荐： javascript - 找不到 tsconfig 路径
文章推荐： JavaScript ES6 : Implementing generator for unfold function
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com