添加css 3图像过滤器到php [英] add css 3 image filters to php
本文介绍了添加css 3图像过滤器到php的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个网页，上传到数据库，并以最新上传的方式（如任何社交网络）同时显示。
我添加了一个按钮Add过滤器，其中点击打开一个新页面，我需要显示与相应的按钮相关联的图像和具有不同过滤器值的单选按钮。我可以正确显示图像和按钮，但单击过滤器按钮效果不适用。
首先，我测试了基本HTML上的按钮，所有工作完美。但是当我试图在PHP，效果没有得到应用。我知道这个的原因，也就是说，我不能为div id #myImg编写正确的语法，在HTML中我们写为
< img id =myImgsrc =cool1.jpg/>
但是在php中，我可以给id（我的意思是位置， ）
< ; html>
< head>< title>播放< / title>
< head>
< meta name =viewportcontent =width = device-width>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1/>
< title> Img Filtr< / title>
< link rel =stylesheettype =text / csshref =/ trystyle.css/>
< script type =text / javascript>
函数click_position（obj）
{
change_position（obj.value）
}
function change_position
{
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;
//创建连接
$ conn = new mysqli（$ servername，$ username，$ password，$ dbname）;
//检查连接
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 =500height =500 >';
echo $ image1; //如何添加myimg id以产生效果
echo< form class ='playit'action ='javascript：return false;'>
Filter：< br>< br>
< input type ='hidden'id ='preselectedValue'value ='none'/>
& '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'>对比度（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'>灰度（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'>不透明度（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'>饱和（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'/>
< 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'>亮度（200％）< / label>< / div>
< / form>;
}
？>
< / body>
< / html>
我想我只需要正确的语法。
解决方案
我看不到您设置ID的位置。更改：
$ image1 ='< img src =data：image / jpeg; base64，'。base64_encode（$ image ['url']）'width =500height =500> b $ b 到
$ image1 ='< img src =data：image / jpeg; base64，'。base64_encode（$ image ['url']）'width =500height =500id =myImg >';
工作？
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.
解决方案
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?
这篇关于添加css 3图像过滤器到php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
