我创建了一个网页,我上传(到数据库),并以最新上传的方式同时显示任何社交网络。
我添加了一个“添加过滤器”按钮,在点击时打开一个新页面,我需要显示与相应按钮相关联的图像和具有不同过滤值的单选按钮。 我可以正确显示图像和按钮,但单击过滤器按钮时效果不适用。
首先,我测试了基本HTML上的按钮,并且都完美无缺。 但是当我在php中尝试时,效果并未得到应用。 我知道这个的原因,也就是说,我无法为div id #myImg编写正确的语法,我们在HTML中编写
<img id="myImg" src="cool1.jpg" />但是在php中我能够给出id(我的意思是位置等,属性被正确应用)但是效果没有得到应用
这是我的代码
<html> <head><title>Play </title> <head> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Img Filtr</title> <link rel="stylesheet" type="text/css" href="/trystyle.css" /> <script type="text/javascript"> function click_position(obj) { change_position(obj.value) } function change_position(val) { var s="demoDIV"; s="myImg "; s=s.trim(); document.getElementById(s).style.filter=val; document.getElementById(s).style.WebkitFilter=val; var x="filter:<span id='enlargecssprop'>" + val + "</span>"; var y="img#myImg {<br> ###CSSPROP###;<br>}<br>"; var z=y.replace("###CSSPROP###",x); } </script> <style> .playit { background-color:#ffffff; margin-top:1%; margin-left:55%; float:left; font-family:Consolas,'Courier New', Courier, monospace; } img#myImg { filter:none; width:50%; height:70%; line-height:200%; margin-bottom:15%; position: absolute; margin: 15px; left:0; } </style></head> <body> <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "databaseimage"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } if(isset($_POST["filter"])) { $image = $_POST['imageID']; $sql = mysqli_query($conn,"SELECT url FROM images where image_id='$image'"); $image = mysqli_fetch_assoc($sql); $image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" >'; echo $image1;//how to add the myimg id to give effects echo " <form class='playit' action='javascript:return false;'> Filter:<br><br> <input type='hidden' id='preselectedValue' value='none' /> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_1' value='none'/><label for='value_1'>none</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_2' value='none'/><label for='value_2'>blur(5px)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_3' value='none'/><label for='value_3'>contrast(200%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_4' value='none'/><label for='value_1'><label for='value_4'>drop-shadow(8px 8px 10px red)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_5' value='none'/><label for='value_5'>grayscale(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_6' value='none'/><label for='value_1'><label for='value_6'>hue-rotate(90deg)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_7' value='none'/><label for='value_1'><label for='value_7'>invert(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_8' value='none'/><label for='value_1'><label for='value_8'>opacity(30%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_9' value='none'/><label for='value_1'><label for='value_9'>saturate(8)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_10' value='none'/><label for='value_1'><label for='value_10'>sepia(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_11' value='none'/><label for='value_1'><label for='value_11'>contrast(200%) brightness(150%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_12' value='none'/><label for='value_1'><label for='value_12'>brightness(200%)</label></div> </form>"; } ?> </body> </html>我想我只需要正确的语法。
I made a webpage where I upload (to a database) and display at same time in latest uploaded manner like any social networking.
I added a button "Add Filter", which on clicking opens a new page where I need to display the image associated with that corresponding button and radio buttons with different filter values. I am able to display the image and buttons properly but on clicking the filter buttons the effect does not apply.
First I tested the buttons on basic HTML and all worked perfectly. But when I tried in php, effect was not getting applied. I know the reason for this, that is, I am not able to write proper syntax for div id #myImg, which in HTML we write as
<img id="myImg" src="cool1.jpg" />But in php I am able to give id (I mean the position, etc, property is properly applied) but effects are not getting applied
Here's my code
<html> <head><title>Play </title> <head> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Img Filtr</title> <link rel="stylesheet" type="text/css" href="/trystyle.css" /> <script type="text/javascript"> function click_position(obj) { change_position(obj.value) } function change_position(val) { var s="demoDIV"; s="myImg "; s=s.trim(); document.getElementById(s).style.filter=val; document.getElementById(s).style.WebkitFilter=val; var x="filter:<span id='enlargecssprop'>" + val + "</span>"; var y="img#myImg {<br> ###CSSPROP###;<br>}<br>"; var z=y.replace("###CSSPROP###",x); } </script> <style> .playit { background-color:#ffffff; margin-top:1%; margin-left:55%; float:left; font-family:Consolas,'Courier New', Courier, monospace; } img#myImg { filter:none; width:50%; height:70%; line-height:200%; margin-bottom:15%; position: absolute; margin: 15px; left:0; } </style></head> <body> <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "databaseimage"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } if(isset($_POST["filter"])) { $image = $_POST['imageID']; $sql = mysqli_query($conn,"SELECT url FROM images where image_id='$image'"); $image = mysqli_fetch_assoc($sql); $image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" >'; echo $image1;//how to add the myimg id to give effects echo " <form class='playit' action='javascript:return false;'> Filter:<br><br> <input type='hidden' id='preselectedValue' value='none' /> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_1' value='none'/><label for='value_1'>none</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_2' value='none'/><label for='value_2'>blur(5px)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_3' value='none'/><label for='value_3'>contrast(200%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_4' value='none'/><label for='value_1'><label for='value_4'>drop-shadow(8px 8px 10px red)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_5' value='none'/><label for='value_5'>grayscale(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_6' value='none'/><label for='value_1'><label for='value_6'>hue-rotate(90deg)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_7' value='none'/><label for='value_1'><label for='value_7'>invert(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_8' value='none'/><label for='value_1'><label for='value_8'>opacity(30%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_9' value='none'/><label for='value_1'><label for='value_9'>saturate(8)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_10' value='none'/><label for='value_1'><label for='value_10'>sepia(100%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_11' value='none'/><label for='value_1'><label for='value_11'>contrast(200%) brightness(150%)</label></div> <div class='radio'><input autocomplete='off' type='radio' name='radio_position' onclick=click_position(this) id='value_12' value='none'/><label for='value_1'><label for='value_12'>brightness(200%)</label></div> </form>"; } ?> </body> </html>I think I just need the proper syntax.
最满意答案
我没看到你在哪里设置了ID。 改变:
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" >';至
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" id="myImg" >';工作?
I don't see where you've set the ID. Does changing:
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" >';to
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" id="myImg" >';work?
更多推荐
发布评论