将css 3图像过滤器添加到php(add css 3 image filters to php)

我创建了一个网页，我上传（到数据库），并以最新上传的方式同时显示任何社交网络。

我添加了一个“添加过滤器”按钮，在点击时打开一个新页面，我需要显示与相应按钮相关联的图像和具有不同过滤值的单选按钮。我可以正确显示图像和按钮，但单击过滤器按钮时效果不适用。

首先，我测试了基本HTML上的按钮，并且都完美无缺。但是当我在php中尝试时，效果并未得到应用。我知道这个的原因，也就是说，我无法为div id #myImg编写正确的语法，我们在HTML中编写

但是在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

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.