Codex NG
Recurrent Flamer
- Joined
- Jul 24, 2015
- Messages
- 2,994
- Solutions
- 12
- Reaction score
- 1,657
I like to write stuff just to see if its possible, a friend of mine was telling me, for some reason she couldn't view images on her phone but had no problem viewing web pages (except the images of course) so this is what prompted me to write this bit of code.
I used a jpg called whiskers-sam10.jpg to test this out
I used a jpg called whiskers-sam10.jpg to test this out
PHP:
<?php
$name = ($_GET['file'] == null) ? "whiskers-sam10.jpg" : $_GET['file'];
$pic = $name;
$name = substr($name,0,(strlen($name)-4));
$im = imagecreatefromjpeg($pic);
$s = getimagesize($pic);
$hex = array('r'=>16,'g'=>8,'b'=>0);
$alpha = array('same_color'=>1,'unique_color'=>1);
for($y=0,$m=0,$x=0,$color_index=0; $y < ($s[1]); $x++){
$rgb[$m] = imagecolorat($im, $x, $y);
if($rgb[$m] === $rgb[$m-1]){
$rgbc[$color_index] = ' rgba('.(($rgb[$m] >> $hex['r']) & 0xFF).', '.(($rgb[$m] >> $hex['g']) & 0xFF).', '.(($rgb[$m] >> $hex['b']) & 0xFF).', '.$alpha['same_color'].') '.((( $s[0]-($s[0]-$x) ) / (floor($s[0] / 100)))).'%,';
$color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);
}
else{
$color_index++;
$rgbc[$color_index] = ' rgba('.(($rgb[$m] >> $hex['r']) & 0xFF).', '.(($rgb[$m] >> $hex['g']) & 0xFF).', '.(($rgb[$m] >> $hex['b']) & 0xFF).', '.$alpha['unique_color'].') '.((($s[0]-($s[0]-$x)) / (floor($s[0] / 100)))).'%,';
$color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);
}
$m++;
if($x >= ($s[0]-1)){
$newLine = implode("",$rgbc);
$x = 0;
$y++;
$css['box_'.$y] .= 'linear-gradient(to right, '.substr($newLine, 0, -1).');';
$color_index = 0;
$m = 0;
}
}
/*
used for finding matching lines
$cc = 0;
$count = 0;
for($c=0,$b=1; $c<sizeof($css); $c++,$b++){
if($css['box_'.$c] == $css['box_'.$b]){
$Cs[$cc] = $css['box_'.$c];
$hh[$cc] = $cc;
}
else{
$hh[$cc] = 'no match';
$Cs[$cc] = $css['box_'.$c];
}
$cc++;
}
print_r($hh);
*/
$value = ($_GET['size'] == null) ? 1 : $_GET['size'];
if(file_exists($name.".css")){
unlink($name.".css");
}
$h = fopen($name.".css", "a+");
foreach($css as $k => $v){
$structure[$k] = "
#".$k." {
background: $v
background-size: ".($s[0]*$value)."px ".($value)."px;
background-repeat:no-repeat;
padding-top:".$value."px;
}";
fwrite($h,$structure[$k]);
}
fclose($h);
$in = 1;
$size = 20;
if(file_exists($name."_pallete.css")){
unlink($name."_pallete.css");
}
$hh = fopen($name."_pallete.css", "a+");
$cp = array_values(array_unique($color_pallete,SORT_STRING));
//print_r($cp);
foreach($cp as $k => $v){
$cp_pal[$k] = "
#color_pallete_".$k." {
float: left;
top: ".($in*$size)."px;
width: ".$size."px;
height: ".$size."px;
border-style:solid;
border-color: black;
background: $v;
}";
$in++;
fwrite($hh,$cp_pal[$k]);
}
fclose($hh);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="<?php echo $name; ?>.css" rel="stylesheet" type="text/css">
<link href="<?php echo $name; ?>_pallete.css" rel="stylesheet" type="text/css">
<style>
#box1 {
position: absolute;
top: 50px;
margin-left: <?php echo 10; ?>px;
float: left;
width: <?php echo $s[0]*$value; ?>px;
height: <?php echo $s[1]*$value; ?>px;
}
#box2 {
position: absolute;
top: 50px;
margin-left: <?php echo $s[0]+50; ?>px;
float: left;
width: <?php echo $s[0]*$value; ?>px;
height: <?php echo $s[1]*$value; ?>px;
}
#block {
width: 500px;
height: 300px;
margin-left: <?php echo $s[0]+100+($s[0]*$value); ?>px;
float: left;
}
#content, img {
border-style:solid;
border-color: black;
}
#tb{
border-radius: 5px;
box-shadow: 0px 2px 2px #000;
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #7CB8E9;
text-shadow: #000 1px 1px;
margin-bottom: 10px;
//font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
background: black;
}
#tb.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D2DFCB), to(#DFE1CD));
background: -moz-linear-gradient(19% 75% 90deg,#DFE1CD, #D2DFCB);
}
#tb.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFE1CD), to(#D2DFCB));
background: -moz-linear-gradient(19% 75% 90deg,#D2DFCB, #DFE1CD);
}
#tb:hover {
color: white;
-webkit-box-shadow: 0px 0px 4px #000;
background: rgb(183,222,237); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(51%,rgba(33,180,226,1)), color-stop(100%,rgba(183,222,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#toolbar {
height: 30px;
width: 850px;
margin:0 auto;
border-radius: 2px;
box-shadow: 0px 2px 2px #000;
background-image:url(laminent.jpg);
}
#toolbar b{
color: black;
margin-left: 15px;
}
</style>
</head>
<body>
<?php include('toolbar.php'); ?>
<br />
<div id="box1">
<b>Original Image<br /><?php echo strtoupper($pic); ?></b><br />
<img src="<?php echo $pic; ?>"/>
</div>
<div id="box2">
<b>Css Generated Image of<br /><?php echo strtoupper($pic); ?> at size <?php echo $value; ?>x</b><br />
<!-- http://www.javascripter.net/faq/openinga.htm info for external windows -->
<div id="content">
<?php for($i = 0; $i < sizeof($structure);$i++){
echo '<div id="box_'.$i.'"></div>'."\n";
}
?>
</div>
</div>
<div id="block">
<?php
for($b = 0; $b < sizeof($cp_pal);$b++){
echo '<div id="color_pallete_'.$b.'"></div>';
}
?>
</div>
<!--<div id="css"><textarea rows="20" col="70"><?php //echo file_get_contents($name.".css"); ?></textarea><div>-->
</body>
</html>
Last edited: