达成图片等比例放大与收缩,php完结在服务器端调节图片大小的秘技

在劳动器端完成图片大小的调动,会比在浏览器的管理有相当多的功利。本文介绍了PHP如何在劳务器端调节图片大小。代码包含两局地:imageResizer()
is used to process the imageloadimage() inserts the image url in a
simpler format

正文实例陈说了php达成在服务器端调节图片大小的章程。分享给大家供我们参谋。具体解析如下:

css3 完结图片等比例放大与缩短

代码

在劳务器端实现图片大小的调节,会比在浏览器的管理有成都百货上千的益处。
本文介绍了PHP如何在劳动器端调度图片大小。

   在工作中,平日会凌驾海体育场合片缩放的情景,举个例子服务器端重返的图片大小,恐怕大小不一,有的大,有的小,服务器端重回的图片大小大家不可能垄断(monopoly)的,不过在我们设计稿的时候,恐怕会明显每张图纸的大大小小为定位的小幅度和中度,比方200px*200px那样的。大家那边使用的是背景图片来做的,
而是若是一贯利用
img标签那样引进图片貌似不行,由此大家脚下只可以采纳背景图片来做。对于大学一年级些的图纸大家得以缩放的,可是对于异常的小
十分小的图形,大家把他们拉伸的话,恐怕会有一点点模糊,可是一般的意况下是不会有这种情况,因为对于图片的缩放,服务器端不太只怕会回到
一张一点都不大不大的图片回来,一般都以一点都不小的。

 <?php

   function imageResizer($url, $width, $height) {

                header('Content-type: image/jpeg');

                list($width_orig, $height_orig) = getimagesize($url);

                $ratio_orig = $width_orig/$height_orig;

                if ($width/$height > $ratio_orig) {
                  $width = $height*$ratio_orig;
                } else {
                  $height = $width/$ratio_orig;
                }

                // This resamples the image
                $image_p = imagecreatetruecolor($width, $height);
                $image = imagecreatefromjpeg($url);
                imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

                // Output the image
                imagejpeg($image_p, null, 100);

        }

        //works with both POST and GET
        $method = $_SERVER['REQUEST_METHOD'];

        if ($method == 'GET') {

                imageResize($_GET['url'], $_GET['w'], $_GET['h']);

         } elseif ($method == 'POST') {

            imageResize($_POST['url'], $_POST['w'], $_POST['h']);
         }

        // makes the process simpler
        function loadImage($url, $width, $height){
         echo 'image.php?url=', urlencode($url) ,
         '&w=',$width,
         '&h=',$height;
        }

?>

代码包涵两片段:

1. 等比例缩放(1:1)
我们先来探视达成图片等比例缩放的境况下:
html代码如下:

用法

① imageResizer() is used to process the image
② loadimage() inserts the image url in a simpler format

<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(..jpg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(..jpeg)"></div>
</div>
<div class="demo1-1">
  <div class="zoomImage" style="background-image: url(..png)"></div>
</div>
//Above code would be in a file called image.php.
//Images would be displayed like this:
<img src="<?php%20loadImage('image.jpg',%2050,%2050)%20?>" alt="图片 1" />
<?php
 function imageResizer($url, $width, $height) {
  header('Content-type: image/jpeg');
  list($width_orig, $height_orig) = getimagesize($url);
  $ratio_orig = $width_orig/$height_orig;
  if ($width/$height > $ratio_orig) {
   $width = $height*$ratio_orig;
  } else {
   $height = $width/$ratio_orig;
  }
  // This resamples the image
  $image_p = imagecreatetruecolor($width, $height);
  $image = imagecreatefromjpeg($url);
  imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
  // Output the image
  imagejpeg($image_p, null, 100);
 }
 //works with both POST and GET
 $method = $_SERVER['REQUEST_METHOD'];
 if ($method == 'GET') {
  imageResize($_GET['url'], $_GET['w'], $_GET['h']);
  } elseif ($method == 'POST') {
  imageResize($_POST['url'], $_POST['w'], $_POST['h']);
  }
 // makes the process simpler
 function loadImage($url, $width, $height){
  echo 'image.php?url=', urlencode($url) ,
  '&w=',$width,
  '&h=',$height;
 }
?>

css代码如下:

用法:

.demo1-1 {
  float: left;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.zoomImage {
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}
//Above code would be in a file called image.php.
//Images would be displayed like this:
<img src="<?php%20loadImage('image.jpg',%2050,%2050)%20?>" alt="图片 2" />

如上代码就能够完毕了。下边是简轻松单的代码深入分析一下兑现格局:
1-1 在父容器div.demo1-第11中学,定义容器展现的尺寸为
200px*200px;这一个正是我们设计稿中展现的高低。
1-2 对于图片的div先设置如下样式:

期待本文所述对我们的php程序设计有着扶助。

width: 100%;
height: 0;
padding-top: 100%;
overflow: hidden;

您只怕感兴趣的稿子:

  • php图片管理函数获取项目及扩张名实例
  • php使用GD库创制图片缩略图的议程
  • php将图纸文件调换到二进制输出的艺术
  • php达成自由呈现图片方法汇总
  • PHP获取远程图片并保存到地头的点子
  • php修改上传图片尺寸的秘籍
  • php达成转移图片直接展开为下载的艺术
  • php通过得到头消息剖断图片类型的情势

如上代码height即便设置为0,然而padding-top设置了百分百,并且宽度width:百分之百,
中度div是遵照1:1的主意来兑现的。
关于缘何供给使用padding-top来促成
,能够看自个儿那篇文章

上面如下样式:

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

是让背景图片居中展现,并且不另行,且背景大小覆盖全部容器就能够了;

上边是兼备的代码了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .demo {
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .demo1-1 {
      float: left;
      width: 200px;
      height: 200px;
    }
    .zoomImage, .zoomImage2, .zoomImage3{
      width: 100%;
      height: 0;
      padding-top: 100%;
      overflow: hidden;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
    }
    .zoomImage2 {
      padding-top: 75%;
    }
    .zoomImage3 {
      padding-top: 133.33%;
    }
  </style>
</head>
<body>
  <h2>第一张图片633*950,第二张图片1280*800,第三张图片100*100</h2>
  <div class="demo">
    <h3>对上面的三张图片的宽和高分别等比例缩放到200*200像素(1:1)</h3>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(..jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(..jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage" style="background-image: url(..png)"></div>
    </div>
  </div>

  <div class="demo">
    <h3>对上面的三张图片的宽和高进行4:3的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(..jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(..jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage2" style="background-image: url(..png)"></div>
    </div>
  </div>

  <div class="demo">
    <h3>对上面的三张图片的宽和高进行3:4的缩放</h3>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(..jpg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(..jpeg)"></div>
    </div>
    <div class="demo1-1">
      <div class="zoomImage3" style="background-image: url(..png)"></div>
    </div>
  </div>
</body>
</html>

demo查看

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注