• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

I call this Image to CSS

Codex NG

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
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:
It is a bit messy I know :p
PHP: 
<form id="toolbar" action="imgtocss.php" method="get">
<b>Image:</b> <select name="file">
<?php
$loc = scandir('C:/xampp/htdocs/test/includes');
echo "<option value='' >Select An Image</option>";
foreach($loc as $list => $file){
    if(strstr($file,'.') === '.jpg'){
        echo "<option value=".$file." >".$file."</option>";
    }
}
?>
</select>
<b>Resolution: </b><input type="text" name="size" size="4">
<input id="tb" type="submit" value="Go">
<input id="tb" type=button value="View CSS" onClick="myRef1 = window.open('view-source:'+'<?php echo $name; ?>.css','window_name1', 'left=500,top=500,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');
myRef.focus()">
<input id="tb" type=button value="View HTML" onClick="myRef2 = window.open('view-source:'+self.location,'window_name2', 'left=500,top=500,width=500,height=500,toolbar=0,resizable=0,scrollbars=1');
myRef.focus()">
</form>

So what does this do, well it takes an image like a jpeg and converts it to a css file... so that the image is literally part of the page.

Imageto_Csswithtxt.jpg
 

Similar threads

blokerzinha
  • Question
Problem with the wrong player appearing as top even though he is not. Znote
Replies
1
Views
323
blokerzinha
blokerzinha
ralke
  • Question
AAC ZnoteAAC show killing assists at characterprofile deathlist
Replies
0
Views
162
ralke
ralke
J
  • Question
Problem Myacc (Guild War
Replies
3
Views
712
jareczekjsp
J
Back
Top