css 如何在JS中存储和显示上传的图像？

ryevplcw  于 2023-04-13  发布在  其他
关注(0)|答案(1)|浏览(109)

我是JS和HTML的新手，这是一个非常简单的问题，但我还没有找到任何直接的解决方案。我试图做的是在表单提交中，有一个文件上传。当表单提交时，我想将上传的图像存储在“Recipe name”下的对象中，我可以做到这一切，我需要的帮助是弄清楚如何存储上传的图像，然后重新显示它们作为一个图像都在html页面上。
在这段代码中，我将image设置为getelementbyid“imageupload”，只是为了测试一下，当按钮被按下时，它会将背景图像设置为URL。我知道只是将其设置为image不应该是URL，但我已经尝试了image.value和image.src以及其他几个，它们都没有工作，所以我只需要知道如何让这样的东西工作。

const possibleIngredients = [];
const log = document.getElementById("log");
possibleIngredients.length = 0;
let uniqueIngredients = [];
const recipes = {};
const recipeAdder = document.getElementById('RecipeAdder');
const recipeName = document.getElementById('inputrecipetitle');
const searchButton = document.getElementById('searchbutton');
const threshold = 3
const compareButton = document.getElementById('submitknowningredients');

function addRecipe(title, input){ 
   const ingredients = Array.from(input).map(input => input.value);
   recipes[title] = ingredients;
}
//below is the levenshtein function, basically just allowing error in between search and title
function levenshtein(a, b) {
    const matrix = [];
  
    for (let i = 0; i <= b.length; i++) {
      matrix[i] = [i];
    }
  
    for (let j = 0; j <= a.length; j++) {
      matrix[0][j] = j;
    }
  
    for (let i = 1; i <= b.length; i++) {
      for (let j = 1; j <= a.length; j++) {
        if (b.charAt(i - 1) === a.charAt(j - 1)) {
          matrix[i][j] = matrix[i - 1][j - 1];
        } else {
          matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1);
        }
      }
    }
  
    return matrix[b.length][a.length];
  }


recipeAdder.addEventListener("submit", function(e){
   e.preventDefault();
   const input = document.querySelectorAll('.ingredients');
   const inputArray = Array.from(input);
   const recipeLink = document.getElementById('recipelinksubmit');
   const image = document.getElementById('imageupload');
   document.body.style.backgroundImage = `url(${image})`;
   console.log(image);
   addRecipe(recipeName.value, inputArray);
    input.forEach(function(input){
    possibleIngredients.push(input.value);
    input.value = '';
    
});
 uniqueIngredients = [...new Set(possibleIngredients)];
});

searchButton.addEventListener("click", function(e){
    e.preventDefault();
    
    const recipeSearch = document.getElementById('recipesearch');
    for (const title in recipes){
        const normalizedSearch = recipeSearch.value.toLowerCase();
    const normalizedTitle = title.toLowerCase();
        const distance = levenshtein(normalizedSearch, normalizedTitle);
        if(distance <= threshold){
            console.log(recipes[title]);
        }
    }
})

compareButton.addEventListener('click', function(e){
    e.preventDefault();
    const ingredientsInput =  document.getElementById('myingredients');
    const myIngredients = ingredientsInput.value.split(',').map(ingredient => ingredient.trim().toLowerCase());
    for(const title in recipes){
        const recipeIngredients = recipes[title].map(ingredient => ingredient.toLowerCase());
        const isMatch = recipeIngredients.every(ingredient => myIngredients.includes(ingredient));

        if(isMatch){
            console.log(`you can make ${title} with your ingredients`);
        }
    }

})

log.addEventListener('click', function(){
    console.log(uniqueIngredients);
    for(const title in recipes){
        console.log(title, recipes[title]);
    }
    
});
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="recipefinder.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Finder</title>
</head>
<body>
    <h1 class="scroll">Possible Recipes</h1>
    <h2 class="hadingredients">Ingredients In Stock:</h2>
    <div  class="possiblerecipes">
       
        <img src="img/brocolli_cheese.jpg" class = "pic1">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/GarlicBread.jpg" class="pic2">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/MangoCandy.jpg" class="pic3">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/Meatballs.jpg" class = "pic4">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/brocolli_cheese.jpg" class = "pic5">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/GarlicBread.jpg" class="pic6">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/MangoCandy.jpg" class="pic7">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/Meatballs.jpg" class = "pic8">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/brocolli_cheese.jpg" class = "pic9">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/GarlicBread.jpg" class="pic10">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/MangoCandy.jpg" class="pic11">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/Meatballs.jpg" class = "pic12">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/brocolli_cheese.jpg" class = "pic13">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/GarlicBread.jpg" class="pic14">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/MangoCandy.jpg" class="pic15">
        <a class="init" href="https://google.com">Placeholder</a>
        <img src="img/Meatballs.jpg" class = "pic16">
        <a class="init" href="https://google.com">Placeholder</a>

    </div>
    <div class="hadingredientslist">
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">✔️test</p>
        <p class="hadingredient">❌test</p>
        <p class="hadingredient">❌test</p>



    </div>

    <form id="RecipeAdder">
        <label for="Enter your Recipe Name Here: ">Enter Your Recipe Name Here: </label>
        <input type="text" id="inputrecipetitle"><br>
        <label for="Enter Your Ingredients Below:">Enter Your Ingredients Below: </label><br>

        <input type="text" id="ingredientspace1" class="ingredients"><br>
        <input type="text" id="ingredientspace2" class="ingredients"><br>
        <input type="text" id="ingredientspace3" class="ingredients"><br>
        <input type="text" id="ingredientspace4" class="ingredients"><br>
        <input type="text" id="ingredientspace5" class="ingredients"><br>
        <input type="text" id="ingredientspace6" class="ingredients"><br>
        <input type="text" id="ingredientspace7" class="ingredients"><br>
        <input type="text" id="ingredientspace8" class="ingredients"><br>
        <input type="text" id="ingredientspace9" class="ingredients"><br>
        <input type="text" id="ingredientspace10" class="ingredients"><br>
        <label for="link" >Enter The Recipe Link Here: </label>
        <input type="text" id="recipelinksubmit" class="link"><br>
        <input type="file" id="imageupload" class="file">
        <button type="submit">Submit Recipe!</button>
        
    </form>
    <input type="text" id="recipesearch">
    <button id="searchbutton">Search Me</button>
<br>
    <input type="text" id="myingredients" placeholder="Enter Known Ingredients Here Seperated by a Comma"><br>
    <button id="submitknowningredients">Look for Recipes!</button>
    
    <button id="log">Log Me!</button>
    <script src="recipefinder.js"></script>
</body>
</html>
css

1条答案

按热度按时间
ymdaylpp

ymdaylpp1#

如果您只对设置容器元素的背景图像感兴趣（在本例中为document.body），就像上面的措辞一样，您可能会发现以下简短的使用片段。
您可以将事件侦听器绑定到file输入字段，并处理对文件选择所做的任何更改。事件处理程序可以访问files属性-有关File API的信息，请参阅here，并在应用程序中使用here。有趣的是，通过引用文件，FileReader api可以用于：阅读文件。
成功阅读文件后，FileReader示例将触发一个load事件，该事件触发一个回调函数，该函数用于创建一个新的Image，然后将其用作所选容器的backgroundImage属性。

document.querySelector('input[type="file"]').addEventListener('change',e=>{
  let file=e.target.files[0];
  let reader = new FileReader();
      reader.onload=function( evt ){
        let img=new Image();
            img.onload=( e )=>{
              document.body.style.backgroundImage=`url(${img.src})`;
              
              /* 
              To obtain a "storable" string representation of the image
              - write the image to a canvas and use `toDataURL` to get
              the base64 encoded source data....
              */
              let canvas=document.querySelector('canvas');
                  canvas.width=img.width;
                  canvas.height=img.height;
                  
              let ctxt=canvas.getContext('2d');
                  ctxt.drawImage( img, 0, 0 );
              
              let imgstr=canvas.toDataURL( file.type );
              ctxt.clearRect(0,0,ctxt.canvas.width,ctxt.canvas.height);
              
              console.log( imgstr )
            }
        img.src = evt.target.result;
      };
      reader.readAsDataURL( file );
});
canvas{display:none}
<input type='file' />
<canvas></canvas>

浏览本地系统上的图像文件以设置为背景图像。

赞(0）分享  回复(0）举报  2023-04-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com