如何使用用户使用输入标签 HTML 拍摄的图像？
[英]How to use the images taken from user using input tag HTML?
问题描述
I have used <input type='file'> in which the user will place any image.
我使用了<input type='file'> ，用户可以在其中放置任何图像。 Then i want to use that image as the background of the page.然后我想使用该图像作为页面的背景。 Is it possible to do that using just HTML, CSS, JAVASCRIPT?是否可以仅使用 HTML、CSS、JAVASCRIPT 来做到这一点？ Basically my idea is to create a black and white image converter, i will take the picture from user input and then i will use filter: grayscale() property to convert that to black and white.基本上我的想法是创建一个黑白图像转换器，我将从用户输入中获取图片，然后我将使用filter: grayscale()属性将其转换为黑白。 Please help me.. My code is as following-请帮助我..我的代码如下 -
*{ 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>
Any help is appreciated..任何帮助表示赞赏..
3 个解决方案
解决方案1
1 2020-06-26 12:41:37
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" />
Try this it may help!试试这个它可能会有所帮助！
解决方案2
1 已采纳 2020-06-26 13:43:29
I think I've got your code working:我想我已经让你的代码工作了：
first we load the input image input.files[0] into the browser (here I use file_reader ).首先我们将输入图像input.files[0]加载到浏览器中（这里我使用file_reader ）。 Then once the image loads, we set your effects, then the style.background of the <div> with id="background" to the url of the newly loaded image.然后，一旦图像加载，我们设置您的效果，然后将id="background"的<div>的style.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>
解决方案3
1 2020-06-26 14:47:27
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 CSS
.image{
height: 400px;
width: 400px;
background-size: contain;
filter: grayscale();
background-repeat: no-repeat;
}
JavaScript 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]);
}
}
You can also see the working at following link https://jsfiddle.net/db0w9vfj/12/您还可以在以下链接看到工作https://jsfiddle.net/db0w9vfj/12/
I hope this will resolve your question.我希望这能解决你的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.