Shubham Ambavale Shubham Ambavale - 7 months ago 17
PHP Question

add css 3 image filters to php

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.

Answer

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?