I call this Image to CSS

Discussion in 'Web-development' started by Codex NG, Dec 6, 2015.

  1. Codex NG

    Codex NG Recurrent Flamer

    Joined:
    Jul 24, 2015
    Messages:
    3,002
    Likes Received:
    1,579
    Best Answers:
    10
    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:
    1. <?php
    2. $name = ($_GET['file'] == null) ? "whiskers-sam10.jpg" : $_GET['file'];
    3. $pic = $name;
    4. $name = substr($name,0,(strlen($name)-4));
    5. $im = imagecreatefromjpeg($pic);
    6. $s = getimagesize($pic);
    7. $hex = array('r'=>16,'g'=>8,'b'=>0);
    8. $alpha = array('same_color'=>1,'unique_color'=>1);
    9. for($y=0,$m=0,$x=0,$color_index=0; $y < ($s[1]); $x++){
    10.     $rgb[$m] = imagecolorat($im, $x, $y);
    11.    
    12.     if($rgb[$m] === $rgb[$m-1]){
    13.         $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)))).'%,';
    14.        $color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);
    15.     }
    16.     else{
    17.         $color_index++;
    18.         $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)))).'%,';
    19.         $color_pallete[$color_index] = '#'.dechex(($rgb[$m] >> $hex['r']) & 0xFF).dechex(($rgb[$m] >> $hex['g']) & 0xFF).dechex(($rgb[$m] >> $hex['b']) & 0xFF);
    20.     }
    21.     $m++;
    22.     if($x >= ($s[0]-1)){
    23.     $newLine = implode("",$rgbc);
    24.     $x = 0;
    25.     $y++;
    26.     $css['box_'.$y] .= 'linear-gradient(to right, '.substr($newLine, 0, -1).');';
    27.     $color_index = 0;
    28.     $m = 0;
    29.     }
    30. }
    31. /*
    32. used for finding matching lines
    33. $cc = 0;
    34. $count = 0;
    35. for($c=0,$b=1; $c<sizeof($css); $c++,$b++){
    36.     if($css['box_'.$c] == $css['box_'.$b]){
    37.         $Cs[$cc] = $css['box_'.$c];
    38.         $hh[$cc] = $cc;
    39.     }
    40.     else{
    41.         $hh[$cc] = 'no match';
    42.         $Cs[$cc] = $css['box_'.$c];
    43.     }
    44.     $cc++;
    45. }
    46. print_r($hh);
    47. */
    48. $value = ($_GET['size'] == null) ? 1 : $_GET['size'];
    49.  
    50. if(file_exists($name.".css")){
    51. unlink($name.".css");
    52. }
    53. $h = fopen($name.".css", "a+");
    54. foreach($css as $k => $v){
    55.     $structure[$k] = "
    56. #".$k." {
    57.  
    58.    background: $v
    59.    background-size: ".($s[0]*$value)."px ".($value)."px;
    60.    background-repeat:no-repeat;
    61.    padding-top:".$value."px;
    62.  
    63. }";
    64.     fwrite($h,$structure[$k]);
    65. }
    66. fclose($h);
    67. $in = 1;
    68. $size = 20;
    69. if(file_exists($name."_pallete.css")){
    70. unlink($name."_pallete.css");
    71. }
    72. $hh = fopen($name."_pallete.css", "a+");
    73. $cp = array_values(array_unique($color_pallete,SORT_STRING));
    74. //print_r($cp);
    75. foreach($cp as $k => $v){
    76.     $cp_pal[$k] = "
    77. #color_pallete_".$k." {
    78.    float: left;
    79.    top: ".($in*$size)."px;
    80.    width: ".$size."px;
    81.    height: ".$size."px;
    82.    border-style:solid;
    83.    border-color: black;
    84.    background: $v;
    85. }";
    86. $in++;
    87.     fwrite($hh,$cp_pal[$k]);
    88. }
    89. fclose($hh);
    90. ?>
    91. <html>
    92. <head>
    93. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    94. <link href="<?php echo $name; ?>.css" rel="stylesheet" type="text/css">
    95. <link href="<?php echo $name; ?>_pallete.css" rel="stylesheet" type="text/css">
    96. <style>
    97. #box1 {
    98.     position: absolute;
    99.     top: 50px;
    100.     margin-left: <?php echo 10; ?>px;
    101.     float: left;
    102.     width: <?php echo $s[0]*$value; ?>px;
    103.     height: <?php echo $s[1]*$value; ?>px;
    104. }
    105. #box2 {
    106.     position: absolute;
    107.     top: 50px;
    108.     margin-left: <?php echo $s[0]+50; ?>px;
    109.     float: left;
    110.     width: <?php echo $s[0]*$value; ?>px;
    111.     height: <?php echo $s[1]*$value; ?>px;
    112. }
    113. #block {
    114.     width: 500px;
    115.     height: 300px;
    116.     margin-left: <?php echo $s[0]+100+($s[0]*$value); ?>px;
    117.     float: left;
    118. }
    119. #content, img {
    120.     border-style:solid;
    121.     border-color: black;
    122. }
    123.  
    124. #tb{
    125.     border-radius: 5px;
    126.  
    127.     box-shadow: 0px 2px 2px #000;
    128.  
    129.     font-size: 12px;
    130.     font-family: arial, sans-serif;
    131.     list-style-type: none;
    132.     color: #7CB8E9;
    133.     text-shadow: #000 1px 1px;
    134.     margin-bottom: 10px;
    135.     //font-weight: bold;
    136.     letter-spacing: 1px;
    137.     text-transform: uppercase;
    138.     background: black;
    139. }
    140. #tb.submit:hover {
    141.         -webkit-box-shadow: 0px 0px 2px #000;
    142.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D2DFCB), to(#DFE1CD));
    143.         background:  -moz-linear-gradient(19% 75% 90deg,#DFE1CD, #D2DFCB);
    144.     }
    145.  
    146. #tb.submit:active {
    147.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFE1CD), to(#D2DFCB));
    148.         background:  -moz-linear-gradient(19% 75% 90deg,#D2DFCB, #DFE1CD);
    149.     }
    150. #tb:hover {
    151.         color: white;
    152.         -webkit-box-shadow: 0px 0px 4px #000;
    153.         background: rgb(183,222,237); /* Old browsers */
    154.         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+ */
    155.         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+ */
    156.         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+ */
    157.         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+ */
    158.         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+ */
    159.         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 */
    160.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    161.     }
    162. #toolbar {
    163.     height: 30px;
    164.     width: 850px;
    165.     margin:0 auto;
    166.     border-radius: 2px;
    167.     box-shadow: 0px 2px 2px #000;
    168.     background-image:url(laminent.jpg);
    169. }
    170. #toolbar b{
    171.     color: black;
    172.     margin-left: 15px;
    173. }
    174. </style>
    175. </head>
    176. <body>
    177. <?php include('toolbar.php'); ?>
    178. <br />
    179. <div id="box1">
    180. <b>Original Image<br /><?php echo strtoupper($pic); ?></b><br />
    181. <img src="<?php echo $pic; ?>"/>
    182. </div>
    183. <div id="box2">
    184. <b>Css Generated Image of<br /><?php echo strtoupper($pic); ?> at size <?php echo $value; ?>x</b><br />
    185. <!-- http://www.javascripter.net/faq/openinga.htm info for external windows -->
    186. <div id="content">
    187. <?php for($i = 0; $i < sizeof($structure);$i++){
    188. echo '<div id="box_'.$i.'"></div>'."\n";
    189. }
    190. ?>
    191. </div>
    192. </div>
    193. <div id="block">
    194. <?php
    195. for($b = 0; $b < sizeof($cp_pal);$b++){
    196.         echo '<div id="color_pallete_'.$b.'"></div>';
    197. }
    198. ?>
    199. </div>
    200. <!--<div id="css"><textarea rows="20" col="70"><?php //echo file_get_contents($name.".css"); ?></textarea><div>-->
    201. </body>
    202. </html>
     
    Last edited: Dec 6, 2015
  2. Codex NG

    Codex NG Recurrent Flamer

    Joined:
    Jul 24, 2015
    Messages:
    3,002
    Likes Received:
    1,579
    Best Answers:
    10
    It is a bit messy I know :p
    PHP:
    1. <form id="toolbar" action="imgtocss.php" method="get">
    2. <b>Image:</b> <select name="file">
    3. <?php
    4. $loc = scandir('C:/xampp/htdocs/test/includes');
    5. echo "<option value='' >Select An Image</option>";
    6. foreach($loc as $list => $file){
    7.     if(strstr($file,'.') === '.jpg'){
    8.         echo "<option value=".$file." >".$file."</option>";
    9.     }
    10. }
    11. ?>
    12. </select>
    13. <b>Resolution: </b><input type="text" name="size" size="4">
    14. <input id="tb" type="submit" value="Go">
    15. <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');
    16. myRef.focus()">
    17. <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');
    18. myRef.focus()">
    19. </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.

    [​IMG]
     

Share This Page

Loading...