我使用了用户放置任何图像的<input type='file'>。然后我想使用该图像作为页面的背景。是否可以仅使用HTML，CSS，JAVASCRIPT来做到这一点？ 基本上我的想法是创建一个黑白图像转换器，我将从用户输入中获取图片，然后我将使用filter: grayscale()属性将其转换为黑白。请帮助我..我的代码如下-
*{
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>任何帮助不胜感激。
我想我已经让你的代码工作了：
首先，我们将输入图像input.files[0]加载到浏览器中(这里我使用file_reader(。然后，一旦图像加载，我们设置您的效果，然后设置<div>的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>
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" />
试试这个可能会有所帮助！
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/
我希望这能解决你的问题。