将css 3图像过滤器添加到php
我制作了一个网页，在这里我上传（到数据库）并以最新上传方式显示，就像任何社交网络一样 我添加了一个“添加过滤器”按钮，单击该按钮将打开一个新页面，我需要在其中显示与相应按钮关联的图像以及具有不同过滤器值的单选按钮。我能够正确显示图像和按钮，但单击过滤器按钮时，效果不适用 首先，我在基本HTML上测试了这些按钮，所有这些按钮都工作得很好。但当我尝试使用php时，效果并没有得到应用。我知道这样做的原因，也就是说，我无法为div id#myImg编写正确的语法，我们在HTML中编写为将css 3图像过滤器添加到php,php,html,css,imagefilter,Php,Html,Css,Imagefilter,我制作了一个网页，在这里我上传（到数据库）并以最新上传方式显示，就像任何社交网络一样 我添加了一个“添加过滤器”按钮，单击该按钮将打开一个新页面，我需要在其中显示与相应按钮关联的图像以及具有不同过滤器值的单选按钮。我能够正确显示图像和按钮，但单击过滤器按钮时，效果不适用 首先，我在基本HTML上测试了这些按钮，所有这些按钮都工作得很好。但当我尝试使用php时，效果并没有得到应用。我知道这样做的原因，也就是说，我无法为div id#myImg编写正确的语法，我们在HTML中编写为 <img
<img id="myImg" src="cool1.jpg" />
<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>
玩
Img滤波器
功能点击位置（obj）
{
改变位置（目标值）
}
功能更改位置（val）
{
var s=“demoiv”；
s=“myImg”；
s=s.修剪（）；
document.getElementById.style.filter=val；
document.getElementById.style.WebkitFilter=val；
var x=“过滤器：+val+”；
var y=“img#myImg{
####CSSPROP###
}
”；
变量z=y.replace（“####CSSPROP###”，x）；
}
.玩吧{
背景色：#ffffff；
利润率最高：1%；
左边缘：55%；
浮动：左；
字体系列：Console、'Courier New'，Courier、monospace；
}
img#myImg{
过滤器：无；
宽度：50%；
身高：70%；
线高：200%；
利润底部：15%；
位置：绝对位置；
利润率：15px；
左：0；
}
我看不出您在哪里设置了ID。是否更改：
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" >';
$image1=''；
到
$image1=''；
工作？不，只有样式属性在这样做时得到应用，js fn不能正常工作…我还尝试了像dis echo“''”一样的dis也以同样的方式工作，因为只有样式属性被应用，我已经阅读了关于php的imagefilter等内置函数，如果可能的话，请给我一个例子，说明点击按钮时的两种效果，，我将实现rest…@Shubhambavale所有效果的值都设置为“无”，因此除非您将其更改为实际效果，否则肯定不会发生任何事情？天哪，我忘了更改其值。我怎么能忘记更改dis:（--我会看n Rply，，，，：）@Chirs我已经编辑了这个问题，因为那是我愚蠢的错误，现在我可以giv效果，但我想在单击“保存”按钮时将其存储到数据库中请不要编辑您的问题以包含新问题。相反，创建一个新问题。
$image1= '<img src="data:image/jpeg;base64,'.base64_encode( $image['url'] ).'" width="500" height="500" id="myImg" >';