将页面内容保存为图像文件

时间:2014-10-17 14:51:50

标签: javascript php html twitter-bootstrap gd

我正在尝试将php输出内容保存为图像。

以下是示例

http://p1.followland.com/namegenerator/imagen.php?1=95&2=47&3=32&4=88&5=50&name=OLIVIA&g=0

如果有其他方式,我的代码很长,请告诉我。 我会批评那个

下面是我的代码。

     <?php
     $v = (int)$_GET['v'];
     $w = (int)$_GET['w'];
     $x = (int)$_GET['x'];
     $y = (int)$_GET['y'];
     $z = (int)$_GET['z'];

   $font_size_offset = 9.25; // you'll have to play with this, to get it just right.
                      // alter it based on the size of the font you use for #label.

    ?>

     <style type="text/css">

   body { 
background-image: url('wo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 0px; 
     }

        #fill_wrapper {
    width: 17.7%;
    position: fixed;
    left: 208px;
    top: 87px;
     }

     #fill_wrapper1 {
    width: 17.7%;
    position: fixed;
    left: 208px;
    top: 126px;
    opacity: 0.7;
     }

          #fill_wrapper2 {
    width: 17.7%;
    position: fixed;
    left: 208px;
    top: 163px;
         }

        #fill_wrapper3 {
    width: 17.7%;
    position: fixed;
    left: 209px;
    top: 203px;
    opacity: 1;
        }

        #fill_wrapper4 {
    width: 17.7%;
    position: fixed;
    left: 208px;
    top: 240px;
    opacity: 0.7;
         }


       #label {
    font-size: 32px;
    padding-left: 50px;
    color: black;
     }

    #fill {
    width: <?php echo $v; ?>%;
    height: 100%;
    background-color: red;
         }

          #fill1 {
    width: <?php echo $w; ?>%;
    height: 30px;
    border-style: solid;
    border-color: green;
    background-color: green;
     }

  #fill2 {
    width: <?php echo $x; ?>%;
    height: 40px;
    border-style: solid;
    border-color: yellow;
    background-color: yellow;
      }

  #fill3 {
    width: <?php echo $y; ?>%;
    height: 100%;
    background-color: orange;
   }

    #fill4 {
    width: <?php echo $z; ?>%;
    height: 100%;
    background-color: violet;
    }

 </style>

  <div id="fill_wrapper">
            <?php if($v < 10) { echo '<span id="label">' . $v . '%</span>'; } ?>
              <div id="fill">
                   <?php if($v >= 10) { echo '<span id="label">' . $v . '%</span>'; } ?>
            </div>

    <div id="fill_wrapper1">
            <?php if($w < 10) { echo '<span id="label">' . $w . '%</span>'; } ?>
            <div id="fill1">
                    <?php if($w >= 10) { echo '<span id="label">' . $w . '%</span>'; } ?>
            </div>

      <div id="fill_wrapper2">
            <?php if($x < 10) { echo '<span id="label">' . $x . '%</span>'; } ?>
            <div id="fill2">
                    <?php if($x >= 10) { echo '<span id="label">' . $x . '%</span>'; } ?>
            </div>

      <div id="fill_wrapper3">
            <?php if($y < 10) { echo '<span id="label">' . $y . '%</span>'; } ?>
            <div id="fill3">
                    <?php if($y >= 10) { echo '<span id="label">' . $y . '%</span>'; } ?>
            </div>   

        <div id="fill_wrapper4">
            <?php if($z < 10) { echo '<span id="label">' . $z . '%</span>'; } ?>
            <div id="fill4">
                    <?php if($z >= 10) { echo '<span id="label">' . $z . '%</span>'; } ?>
            </div>                              
    </div>

1 个答案:

答案 0 :(得分:0)

示例中的代码包含css和html。通常,服务器会将其发送到浏览器,浏览器会将其转换为屏幕上的图像。服务器不提供浏览器的布局功能。 在PHP中,您可以自己进行布局,并对下面的代码执行类似的操作 (信用http://adaptive-images.com

<?php
function sendErrorImage($message) {
  /* get all of the required data from the HTTP request */
  $document_root  = $_SERVER['DOCUMENT_ROOT'];
  $requested_uri  = parse_url(urldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH);
  $requested_file = basename($requested_uri);
  $source_file    = $document_root.$requested_uri;

  $im            = ImageCreateTrueColor(800, 300);
  $text_color    = ImageColorAllocate($im, 233, 14, 91);
  $message_color = ImageColorAllocate($im, 91, 112, 233);

  ImageString($im, 5, 5, 5, "Adaptive Images encountered a problem:", $text_color);
  ImageString($im, 3, 5, 25, $message, $message_color);

  ImageString($im, 5, 5, 85, "Potentially useful information:", $text_color);
  ImageString($im, 3, 5, 105, "DOCUMENT ROOT IS: $document_root", $text_color);
  ImageString($im, 3, 5, 125, "REQUESTED URI WAS: $requested_uri", $text_color);
  ImageString($im, 3, 5, 145, "REQUESTED FILE WAS: $requested_file", $text_color);
  ImageString($im, 3, 5, 165, "SOURCE FILE IS: $source_file", $text_color);

  header("Cache-Control: no-store");
  header('Expires: '.gmdate('D, d M Y H:i:s', time()-1000).' GMT');
  header('Content-Type: image/jpeg');
  ImageJpeg($im);
  ImageDestroy($im);

  exit();
}