If you have ever done that kind of portal site, you must know that a picture may be displayed in different places, with different sizes and proportions.
If you only use one picture, it will definitely be deformed and displayed. It is too wasteful to link the small picture to the large picture...Using thumbnails to process it is not perfect, because the proportions and sizes appearing in each place may be different, for example!!!!!! !!!!!!
Please see the picture above.
In this place, what is actually transferred is a list, but the sizes of the pictures are different, some are wide and some are narrow. What should you do when you encounter such a situation? If you use it directly The original address will definitely be deformed. It is unreliable to use thumbnails. This is automatically transferred. You have no idea what width and height a picture needs.
-------- -------------------------------------------------- -------------------------------------------------- ------
Let's get to the point:
I have always used a method, which is PHP automatic cropping...compared to the image address you have seen similar to /aaaa/abc_200_100.jpg or /aaaa /abc_200*100.jpg
My way is to convert the image address into an address similar to the one above where the image is needed, and then direct it to a handler through apache's rewrite. Generate an image based on the width and height and save it.
There are several advantages to this:
First, it is very flexible. Where there are pictures, you can control them as wide or as high as you want without deformation, and the program will always display the picture content. The most
Second, when the image is generated once, apache will not redirect to the program next time, because there is a judgment of !d !f in front of the rule, which means that the current file does not exist. It will go in the direction. Next time the picture exists, it will not appear again. It will be the real picture
The bad thing is that there may be more pictures generated and take up a larger space, but if it is It doesn’t matter if you have your own server. You can categorize and organize it.
OK Here is the code, let’s take discuz as an example
function crop_img($img, $width = 200, $height = 200) {
$img_info = parse_url($img);
/* External links directly return the image address */
if (!empty($img_info['host']) && $img_info['host'] != $_SERVER[' HTTP_HOST']) {
return $img; return $img; . $width . '_' . $height . substr($img, $pos);
$img_info = parse_url($img); /* External links directly return the image address */ if (!empty($img_info['host']) && $img_info['host'] != $_SERVER[ 'HTTP_HOST']) { . ' . $width . '_' . $height . substr($img, $pos); echo 'The above means that files that do not exist at the beginning of data/attachement/ are directed to image.php for processing, and the url is passed as a parameter The third part is the code in image.php
$url = $_GET['url'];
$src = './data/attachment/' . preg_replace('/_(d+)_(d+)/', '', $url);
$filename = './data/attachment/' . $url;
if (file_exists($filename)) {
ob_start();
header('Content-type:image/jpeg');
readfile($filename);
ob_flush();
flush();
} else {
if(!preg_match('/_(d+)_(d+)/', $url, $wh)){
defulat();
exit();
}
$width = $wh[1];
$height = $wh[2];
thumb(realpath($src), $width, $height, $filename, 'crop', '85');
}
function thumb($src, $width, $height, $filename, $mode = 'scale', $quality = '100') {
try {
$imageValue = getimagesize($src);
$sourceWidth = $imageValue[0]; //原图宽
$sourceHeight = $imageValue[1]; //原图高
$thumbWidth = $width; //缩略图宽
$thumbHeight = $height; //缩略图高
$_x = 0;
$_y = 0;
$w = $sourceWidth;
$h = $sourceHeight;
if ($mode == 'scale') {
if ($sourceWidth <= $thumbWidth && $sourceHeight <= $thumbHeight) {
$_x = floor(($thumbWidth - $sourceWidth) / 2);
$_y = floor(($thumbHeight - $sourceHeight) / 2);
$thumbWidth = $sourceWidth;
$thumbHeight = $sourceHeight;
} else {
if ($thumbHeight * $sourceWidth > $thumbWidth * $sourceHeight) {
$thumbHeight = floor($sourceHeight * $width / $sourceWidth);
$_y = floor(($height - $thumbHeight) / 2);
} else {
$thumbWidth = floor($sourceWidth * $height / $sourceHeight);
$_x = floor(($width - $thumbWidth) / 2);
}
}
} else if ($mode == 'crop') {
if ($sourceHeight < $thumbHeight) { //如果原图尺寸小于当前尺寸
$thumbWidth = floor($thumbWidth * $sourceHeight / $thumbHeight);
$thumbHeight = $sourceHeight;
}
if ($sourceWidth < $thumbWidth) {
$thumbHeight = floor($thumbHeight * $sourceWidth / $thumbWidth);
$thumbWidth = $sourceWidth;
}
$ S1 = $ SourceWidth /$ Sourceheight; // Original ratio $ s2 = $ width /$ height; // New diagram ratio ($ s1 == $ s2) {}} else if if ($s1 > $s2) { //Full height $x = ($ax - $thumbWidth ) / 2; $x = 0; $ay = floor($sourceHeight * ($ thumbWidth / $sourceWidth)); //Simulate the original image proportional height } Case 1: $source = imagecreatefromgif($src); break; case 3: $source = imagecreatefrompng($src); break; default: defulat(); return; } header("Content-type: image/jpeg"); $thumb = imagecreatetruecolor($width, $height); 255)); imagecopyresampled($thumb, $source, 0, 0, $x, $y, $width, $height, $w, $h); // if ($_SERVER['HTTP_REFERER'] || false !== stripos($_SERVER['HTTP_REFERER'], 'http://' . $_SERVER['SERVER_NAME'])) { $thumb, $filename, $quality); $filename } } function defulat() { $default_img = realpath('media/images/nopic.jpg'); ob_start(); type header('Content-:image/jpeg') ; readfile($default_img); ob_flush(); flush();}
thumb function can control the cropping method, scale is proportional scaling, no cropping, the insufficient areas are filled with white, crop is cropping, if the required aspect ratio is greater than the original image aspect ratio, then the maximum display width is maintained , center and crop the upper and lower excess parts. If the aspect ratio is required to be smaller than the original image aspect ratio, then maintain the maximum height and center and crop the left and right excess parts. In short, on the premise of maintaining no deformation, reduce the image and retain the maximum The content of the picture. Haha, how awesome is this code? Try it and you will know. Of course, you need to support the rewrite function and GD2 support
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
