牛骨文教育服务平台(让学习变的简单)

10.4 图像缩放和裁剪技术

上一章我们学习了图片的水印技术,水印技术和我们这一章要学习到的缩放、裁剪技术基本一致,只不过使用的函数发生了一点点变化。

常用的两个函数如下:

函数名 函数说明
imagecopyresampled 重采样拷贝部分图像并调整大小
imagecopyresized 拷贝部分图像并调整大小

我们来看看这两个函数,这两个函数用起来不难。就是参数略有些复杂。并且来完成图像的缩放或者裁剪:

bool imagecopyresampled ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )

请注意,上下两个图片的参数都是一样的。

bool imagecopyresized ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )

图片缩放和裁剪的方法都是一样的,不同的是拷贝时拷贝的是整张图片还是部份部片。

操作方式说明:
从来源图片的开始点(x,y)起,指定的宽高的大小图片。放至到目标图片的起点(x,y),指定宽高大小的图片中。

一、缩放图片,我们将操作步骤化:

  1. 打开来源图片
  2. 设置图片缩放百分比(缩放)
  3. 获得来源图片,按比调整大小
  4. 新建一个指定大小的图片为目标图
  5. 将来源图调整后的大小放到目标中
  6. 销毁资源

我们将范冰冰进行缩放:
document/2015-09-22/5600d61ee6dfc

<?php

//打开来源图片
$image = imagecreatefrompng("fbb.png");


//定义百分比,缩放到0.1大小
$percent = 0.1;


// 将图片宽高获取到
list($width, $height) = getimagesize("fbb.png");

//设置新的缩放的宽高
$new_width = $width * $percent;
$new_height = $height * $percent;

//创建新图片
$new_image = imagecreatetruecolor($new_width, $new_height);

//将原图$image按照指定的宽高,复制到$new_image指定的宽高大小中
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

header("content-type:image/jpeg");
imagejpeg($new_image);
?>

我们来看看缩放后的最终的结果:

document/2015-09-22/560108ae9ec72

二、裁剪图片,我们将操作步骤化:

  1. 打开来源图片和目标图片
  2. 截取来源图片中的点,设置宽高。放至到目标图片中。(裁剪)
  3. 保存图片输入
  4. 销毁资源

我们将下图中的“度”字裁减出来放至到哈士奇的脸上:

百度logo:

document/2015-09-22/56010df4559d3

哈士奇图片:

document/2015-09-22/56010e592e7d8

我们来梳理一下思路:

  1. 度的开始的坐标x,y轴为:407,154
  2. 度这个字从x,y坐标开始的宽、高为:80,89
  3. 图片中哈士奇脸的位置的x,y轴位置为:281,71
  4. 图片中哈士奇脸的x,y坐标宽、高为:132,160

坐标和宽高我们都清楚了我们开始按照函数的用法来,使用代码来操作图片:

<?php
$dst = imagecreatefrompng("hsq.png");
$src = imagecreatefrompng("du.png");

imagecopyresized($dst, $src, 281, 71, 407, 154, 132, 160, 80, 90);

header("content-type:image/jpeg");
imagejpeg($dst);

imagedestroy($dst);
imagedestroy($src);

?>

我们来看看实验效果:
document/2015-09-22/56011105316ee