1. 首页
  2. 问题列表
  3. 如何使用输入标签HTML从用户处获取的图像？
提问者：小点点

如何使用输入标签HTML从用户处获取的图像？


我使用了，用户可以在其中放置任何图像。 然后我想用那个图像作为页面的背景。 仅仅使用HTML，CSS，JAVASCRIPT就能做到这一点吗？ 基本上，我的想法是创建一个黑白图像转换器，我将从用户输入中获取图片，然后使用filter:grayscale()属性将其转换为黑白图像。 请帮帮我。。 我的代码如下-

null

*{
  margin: 0;
  padding: 0;
}
/*Code for the image entered by user --
.image{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  height: 400px;
  background: url(); (set the image taken from user input)
  filter: grayscale(100%);
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <h1>Black and White Image Converter</h1>
  <label for="user-input">Attach the the image you want to convert : </label>
  <input type="file" name="user-input" id="user-input" placeholder="Attach any image.."><!--Use this image-->
  <div class="image"><!--I want to display that image as background of this div-->
</body>
</html>

null

如有任何帮助，不胜感激。


共3个答案

匿名用户 

function changeImage(input) {
  var file_reader;
  if (input.files && input.files[0]) {
    file_reader = new FileReader();
    file_reader.onload = function(e) {
      document.getElementById("image").setAttribute('src', e.target.result);
    }

    file_reader.readAsDataURL(input.files[0]);
  }
}

<input type="file" name="user-input" id="user-input" placeholder="Attach any image.." onchange="changeImage()" /><!--Use this image-->
<img id="image" />

试试这个也许会有帮助！

匿名用户

我想我已经让你的代码正常工作了:

首先，我们将输入图像input.files[0]加载到浏览器中（这里我使用file_reader)。 然后，一旦图像加载，我们将设置效果，然后将

的style.background与id=“background设置为新加载图像的url。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <h1>Black and White Image Converter</h1>
  <label for="user-input">Attach the the image you want to convert : </label>
  <input type="file" name="user-input" id="user-input" placeholder="Attach any image.." onchange="myFunction()"><!--Use this image-->

  <div class="image" id="background"/><!--I want to display that image as background of this div-->


  <script>
    function myFunction() { //runs when file input is changed
      var input = document.getElementById("user-input");
      var file_reader;
      if (input.files && input.files[0]) {  //only if there is one file in the input
        file_reader = new FileReader();
        file_reader.onload = function(e) {
          document.getElementById("background").style = "position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px;filter: grayscale(100%);"
          document.getElementById("background").style.backgroundImage = "url('"+ e.target.result +"')";
          console.log(e.target.src);
        }
        file_reader.readAsDataURL(input.files[0]);
      }
    }
  </script>
</body>
</html>

匿名用户

HTML

<input type="file" name="user-input" id="user-input" placeholder="Attach any image..">
<button onclick="conversionFunction()">Convert to Black & White</button>
<div class="image" id="bgImg">

CSS

.image{
  height: 400px;
  width: 400px;
  background-size: contain;
  filter: grayscale();
  background-repeat: no-repeat;
}

JavaScript

var btn = document.querySelector("#user-input");
function conversionFunction(){
var file_reader;
  if (btn.files && btn.files[0]) {
    file_reader = new FileReader();
    file_reader.onload = function(e) {
        document.querySelector("#bgImg").style.backgroundImage=`url(${e.target.result})`;
    }

    file_reader.readAsDataURL(btn.files[0]);
  }
}

您还可以在以下链接https://jsfiddle.net/db0w9vfj/12/中看到工作

我希望这能解决你的问题。

相关问题