Question

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

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

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

但是在php中我可以给id（我的意思是位置等，属性被正确应用）但是效果没有得到应用

这是我的代码

{{1}}

我想我只需要正确的语法。

Answer 1

我没看到你在哪里设置了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" >';

工作？

将css 3图像过滤器添加到php

1 个答案: