Я сделал веб-страницу, где я загружаю (в базу данных) и показываю в то же время в последней загруженной манере, как и в любой социальной сети.
Я добавил кнопку «Добавить фильтр», которая при нажатии открывает новую страницу, где мне нужно отобразить изображение, связанное с соответствующей кнопкой, и радиокнопками с различными значениями фильтра. Я могу правильно отображать изображение и кнопки, но при нажатии на кнопки фильтра эффект не применяется.
Сначала я тестировал кнопки на базовом 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>направо<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>
Я думаю, мне нужен только правильный синтаксис.