PPI, DPI ...
Đầu tiên, chúng ta hãy làm rõ các thuật ngữ. Cả PPI [pixel trên inch] và DPI [dot per inch] đều là tỷ lệ chỉ định chuyển đổi pixel thành đơn vị vật lý [inch trong trường hợp này]. Trong thế giới kỹ thuật số - máy tính, hình ảnh, ... DPI được sử dụng một cách nhầm lẫn mà thay vào đó PPI nên được sử dụng . DPI trên thực tế chỉ tồn tại trong thế giới in ấn. Nhưng đối với chúng tôi bây giờ, DPI = PPI . >> Thông tin thêm
Thông tin độ phân giải [đôi khi được gọi là DPI, nhưng nó là PPI] được lưu trữ trong tiêu đề [thông tin meta hình ảnh]. JPG và PNG hỗ trợ điều này; nhưng GIF không hỗ trợ DPI - nó không có trong tiêu đề GIF .
Thay đổi PPI trong PHP
Vì vậy, có thể bạn đang hỏi làm thế nào để đặt PPI [DPI] trong tiêu đề hình ảnh? Trong PHP, bạn có thể làm điều đó bằng cách sử dụng thư viện Imagick [tất nhiên không phải cho GIF]:
$image = new Imagick['img.jpg']; // default 72 dpi image
$image->setImageResolution[500, 500];
$image->writeImage["img-500dpi.jpg"]; // this image will have 500 dpi
Nếu bạn tải xuống những hình ảnh này và cố gắng in chúng, ví dụ như trong IrfanView, nó sẽ thực sự sử dụng thông tin dpi để chuyển đổi pixel thành đơn vị vật lý đích. Cả hai hình ảnh sẽ được in với kích thước khác nhau.
PPI hình ảnh sẽ không hoạt động trên web
Tin xấu là điều này sẽ không thay đổi bất cứ điều gì khi hiển thị hình ảnh trên một trang web. Các đơn vị neo cho màn hình luôn luôn là một pixel trong CSS. Vì vậy, img.jpgvà di img-500dpi.jpgchúc có cùng kích thước trong trình duyệt. Ngay cả khi bạn mở các
hình ảnh trực tiếp. Ngay cả khi bạn sử dụng đơn vị vật lý như cm:
img { width: 8cm; height: 6cm; }
cả hai hình ảnh sẽ được hiển thị ở cùng một kích thước; đơn vị vật lý được chuyển đổi thành pixel bất kể độ phân giải hình ảnh sử dụng tỷ lệ cố định . Và đáng ngạc nhiên là ngay cả khi bạn cố in ảnh thô [không phải trang] trong Firefox, cả hai đều sẽ được in ở cùng kích thước. Không thể bình luận trên các trình duyệt khác. Thật kỳ lạ - điều này hoạt động như mong đợi ở Irfanview.
PPI và hình ảnh võng mạc
Bây giờ với Iphones, v.v., hình ảnh võng mạc [tức là độ phân giải cao] đang trở nên hợp thời. Ở đây, người ta nói rất nhiều về DPI [thực tế là PPI], nhưng tất cả điều này chỉ liên quan đến thiết bị mục tiêu và các truy vấn phương tiện CSS . Không có gì có thể thực sự nhận ra PPI của hình ảnh của bạn; bạn phải chỉ định kích thước thực tế của hình ảnh võng mạc độ phân giải cao tính bằng pixel. Đây là ví dụ cho biểu tượng 66x66 [ từ đây ]:
@media [-webkit-min-device-pixel-ratio: 2],
[min-resolution: 192dpi] {
.box {
background:url['images/icon66x66.png'] no-repeat top left;
background-size: 33px 33px;
}
}
Vì vậy, bạn thực sự có thể "giảm tỷ lệ" hình ảnh có độ phân giải cao bằng cách đặt kích thước thấp hơn cho chúng trong CSS . Nhưng tôi chỉ khuyên bạn nên làm điều này đối với hình ảnh võng mạc và trong truy vấn phương tiện chính xác.
Vì vậy, bạn phải lấy lại mẫu trong PHP
Vì vậy, trên thực tế, nếu bạn muốn làm cho hình ảnh đã tải lên xuất hiện nhỏ hơn "trên Web", cách tốt nhất là lấy mẫu lại. Lấy mẫu lại có nghĩa là không chỉ thay đổi tiêu đề mà thay đổi ma trận pixel thực tế của hình ảnh. Đây là mã tôi sử dụng trong PHP, sử dụng thư viện GD:
$t = imagecreatefromjpeg[$old_img_path];
$s = imagecreatetruecolor[$new_width, $new_height];
$x = imagesx[$t];
$y = imagesy[$t];
imagecopyresampled[$s, $t, 0, 0, 0, 0, $new_width, $new_height, $x, $y];
imagejpeg[$s, $new_img_path];
chmod[$new_img_path, 0644];
Lưu ý rằng điều này đòi hỏi khá nhiều bộ nhớ, có thể bị giới hạn bởi nhà cung cấp dịch vụ lưu trữ của bạn.
14 hữu ích 0 bình luận chia sẻ
Một tính năng phổ biến mà bạn sẽ bắt gặp trong các trang web là khả năng thay đổi kích thước hình ảnh để phù hợp với kích thước chính xác để nó sẽ được hiển thị chính xác trên thiết kế của bạn. Nếu bạn có một hình ảnh rất lớn và bạn sẽ đặt nó trên trang web của bạn trong một không gian chỉ có 100px x 100px thì bạn sẽ muốn có thể thay đổi kích thước hình ảnh này để phù hợp với không gian.
Một tùy chọn là chỉ đặt các thuộc tính chiều rộng và chiều cao trên thẻ hình ảnh trong HTML của bạn, điều này sẽ buộc hình ảnh được hiển thị ở kích thước này.
Điều này sẽ hoạt động hoàn toàn tốt và hình ảnh sẽ vừa trong không gian 100px x 100px nhưng vấn đề là khi trình duyệt tải hình ảnh, nó sẽ không thay đổi kích thước hình ảnh mà sẽ chỉ hiển thị ở kích thước giới hạn. Điều này
có nghĩa là hình ảnh vẫn sẽ cần phải được tải xuống ở kích thước đầy đủ, nếu hình ảnh rất lớn, bạn có thể mất một chút thời gian để tải xuống một hình ảnh lớn chỉ để được hiển thị trong một không gian nhỏ.
Một giải pháp tốt hơn là thay đổi kích thước hình ảnh thành 100px x 100px, điều này sẽ làm giảm kích thước của nó để trình duyệt không cần tải xuống một hình ảnh lớn chỉ để hiển thị nó trong một không gian nhỏ.
Trong hướng dẫn này, chúng tôi sẽ tạo một lớp PHP cho phép bạn thay đổi kích thước hình ảnh theo bất kỳ kích thước nào bạn muốn, nó sẽ cho phép bạn thay đổi kích thước trong khi vẫn giữ tỷ lệ khung hình của hình ảnh. Khi lớp đã thay đổi kích thước hình ảnh, bạn có thể lưu hình ảnh trên máy chủ hoặc tải xuống hình ảnh.
Phương pháp lớp học
Trước tiên, hãy lên kế hoạch cho lớp chúng ta sẽ tạo:
- Chúng ta cần truyền một hình ảnh hiện có cho lớp, đây là hình ảnh mà chúng ta sẽ sử dụng để thay đổi kích thước.
- Chúng ta cần vượt qua các kích thước hình ảnh mong muốn để lớp có thể tìm ra kích thước mới của hình ảnh.
- Sau đó, chúng ta cần có thể lưu hình ảnh vào một vị trí trên máy chủ và chọn tải xuống hình ảnh.
Người xây dựng
Lớp này dựa vào một hình ảnh gốc được tìm thấy và thiết lập trên lớp, nếu không có lớp này thì lớp sẽ không hoạt động chính xác. Vì điều này, chúng ta nên truyền tên tệp hình ảnh vào hàm tạo của lớp. Sau đó, điều này sẽ kiểm tra xem tệp có tồn tại trên máy chủ hay không, nếu có thì chúng ta có thể gọi phương thức hình ảnh đã đặt, nơi chúng ta có thể lấy hình ảnh và tạo một tài nguyên của hình ảnh và lưu trữ nó trong một biến lớp.
/**
* Class constructor requires to send through the image filename
*
* @param string $filename - Filename of the image you want to resize
*/
public function __construct[ $filename ]
{
if[file_exists[$filename]]
{
$this->setImage[ $filename ];
} else {
throw new Exception['Image ' . $filename . ' can not be found, try another image.'];
}
}Đặt hình ảnh
Phương thức hình ảnh được thiết lập được sử dụng để tạo tài nguyên hình ảnh dựa trên hình ảnh được cung cấp cho lớp này, sử dụng các hàm PHP fantecreatefromjpeg , fantecreatefromgif , fantecreatefrompng để tạo tài nguyên hình ảnh từ hình ảnh đã cho. Sau đó chúng tôi có thể sử dụng với các chức năng imagesx và imagesy trở về chiều rộng và chiều cao hiện tại của hình ảnh.
Điều này sẽ cho phép chúng ta thay đổi kích thước hình ảnh dễ dàng hơn trong tập lệnh.
/**
* Set the image variable by using image create
*
* @param string $filename - The image filename
*/
private function setImage[ $filename ]
{
$size = getimagesize[$filename];
$this->ext = $size['mime'];
switch[$this->ext]
{
// Image is a JPG
case 'image/jpg':
case 'image/jpeg':
// create a jpeg extension
$this->image = imagecreatefromjpeg[$filename];
break;
// Image is a GIF
case 'image/gif':
$this->image = @imagecreatefromgif[$filename];
break;
// Image is a PNG
case 'image/png':
$this->image = @imagecreatefrompng[$filename];
break;
// Mime type not found
default:
throw new Exception["File is not an image, please use another file type.", 1];
}
$this->origWidth = imagesx[$this->image];
$this->origHeight = imagesy[$this->image];
}Thay đổi kích thước hình ảnh
Hàm thay đổi kích thước là những gì chúng ta sẽ sử dụng để tính các giá trị mới cho chiều rộng và chiều cao của hình ảnh. Điều này có 3 tham số chiều rộng mới, chiều cao mới và tùy chọn thay đổi kích thước, điều này sẽ cho phép chúng ta thay đổi kích thước hình ảnh thành kích thước chính xác, sử dụng chiều rộng được xác định với chiều cao và giữ tỷ lệ khung hình, sử dụng xác định chiều cao giữ tỷ lệ khung hình lớp quyết định cách tốt nhất để thay đổi kích thước hình ảnh.
Khi chúng ta có chiều rộng và chiều cao mới của hình ảnh, chúng ta có thể tạo một tài nguyên hình ảnh mới bằng cách sử dụng hàm PHP fantecreatetruecolor [] . Bây giờ chúng ta có thể tạo hình ảnh mới từ hình ảnh cũ thay đổi kích thước của nó sang kích thước mới bằng cách sử dụng hàm fantecopyresampling [] .
/**
* Resize the image to these set dimensions
*
* @param int $width - Max width of the image
* @param int $height - Max height of the image
* @param string $resizeOption - Scale option for the image
*
* @return Save new image
*/
public function resizeTo[ $width, $height, $resizeOption = 'default' ]
{
switch[strtolower[$resizeOption]]
{
case 'exact':
$this->resizeWidth = $width;
$this->resizeHeight = $height;
break;
case 'maxwidth':
$this->resizeWidth = $width;
$this->resizeHeight = $this->resizeHeightByWidth[$width];
break;
case 'maxheight':
$this->resizeWidth = $this->resizeWidthByHeight[$height];
$this->resizeHeight = $height;
break;
default:
if[$this->origWidth > $width || $this->origHeight > $height]
{
if [ $this->origWidth > $this->origHeight ] {
$this->resizeHeight = $this->resizeHeightByWidth[$width];
$this->resizeWidth = $width;
} else if[ $this->origWidth < $this->origHeight ] {
$this->resizeWidth = $this->resizeWidthByHeight[$height];
$this->resizeHeight = $height;
}
} else {
$this->resizeWidth = $width;
$this->resizeHeight = $height;
}
break;
}
$this->newImage = imagecreatetruecolor[$this->resizeWidth, $this->resizeHeight];
imagecopyresampled[$this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight];
}
/**
* Get the resized height from the width keeping the aspect ratio
*
* @param int $width - Max image width
*
* @return Height keeping aspect ratio
*/
private function resizeHeightByWidth[$width]
{
return floor[[$this->origHeight / $this->origWidth] * $width];
}
/**
* Get the resized width from the height keeping the aspect ratio
*
* @param int $height - Max image height
*
* @return Width keeping aspect ratio
*/
private function resizeWidthByHeight[$height]
{
return floor[[$this->origWidth / $this->origHeight] * $height];
}Lưu hình ảnh
Với hình ảnh mới hiện được đặt trong một biến lớp, bây giờ chúng ta có thể sử dụng hình ảnh này để lưu hình ảnh trên máy chủ. Hàm này sẽ lấy 3 tham số đường dẫn lưu, chất lượng hình ảnh và nếu chúng ta muốn tải xuống hình ảnh.
Đối với mỗi loại mime PHP có một hàm imagejpeg [] , imagegif [] , imagepng [] sẽ cho phép bạn lưu hình ảnh bằng cách chuyển vào tài nguyên hình ảnh mới và đường dẫn hình ảnh sẽ được lưu.
Khi hình ảnh này được lưu trên máy chủ và chúng tôi quyết định tải xuống, chúng tôi có thể thay đổi các tiêu đề để cho phép trình duyệt tải xuống hình ảnh trên máy khách.
/**
* Save the image as the image type the original image was
*
* @param String[type] $savePath - The path to store the new image
* @param string $imageQuality - The qulaity level of image to create
*
* @return Saves the image
*/
public function saveImage[$savePath, $imageQuality="100", $download = false]
{
switch[$this->ext]
{
case 'image/jpg':
case 'image/jpeg':
// Check PHP supports this file type
if [imagetypes[] & IMG_JPG] {
imagejpeg[$this->newImage, $savePath, $imageQuality];
}
break;
case 'image/gif':
// Check PHP supports this file type
if [imagetypes[] & IMG_GIF] {
imagegif[$this->newImage, $savePath];
}
break;
case 'image/png':
$invertScaleQuality = 9 - round[[$imageQuality/100] * 9];
// Check PHP supports this file type
if [imagetypes[] & IMG_PNG] {
imagepng[$this->newImage, $savePath, $invertScaleQuality];
}
break;
}
if[$download]
{
header['Content-Description: File Transfer'];
header["Content-type: application/octet-stream"];
header["Content-disposition: attachment; filename= ".$savePath.""];
readfile[$savePath];
}
imagedestroy[$this->newImage];
}Thay đổi kích thước đầy đủ lớp hình ảnh
ext = $size['mime'];
switch[$this->ext]
{
// Image is a JPG
case 'image/jpg':
case 'image/jpeg':
// create a jpeg extension
$this->image = imagecreatefromjpeg[$filename];
break;
// Image is a GIF
case 'image/gif':
$this->image = @imagecreatefromgif[$filename];
break;
// Image is a PNG
case 'image/png':
$this->image = @imagecreatefrompng[$filename];
break;
// Mime type not found
default:
throw new Exception["File is not an image, please use another file type.", 1];
}
$this->origWidth = imagesx[$this->image];
$this->origHeight = imagesy[$this->image];
}
/**
* Save the image as the image type the original image was
*
* @param String[type] $savePath - The path to store the new image
* @param string $imageQuality - The qulaity level of image to create
*
* @return Saves the image
*/
public function saveImage[$savePath, $imageQuality="100", $download = false]
{
switch[$this->ext]
{
case 'image/jpg':
case 'image/jpeg':
// Check PHP supports this file type
if [imagetypes[] & IMG_JPG] {
imagejpeg[$this->newImage, $savePath, $imageQuality];
}
break;
case 'image/gif':
// Check PHP supports this file type
if [imagetypes[] & IMG_GIF] {
imagegif[$this->newImage, $savePath];
}
break;
case 'image/png':
$invertScaleQuality = 9 - round[[$imageQuality/100] * 9];
// Check PHP supports this file type
if [imagetypes[] & IMG_PNG] {
imagepng[$this->newImage, $savePath, $invertScaleQuality];
}
break;
}
if[$download]
{
header['Content-Description: File Transfer'];
header["Content-type: application/octet-stream"];
header["Content-disposition: attachment; filename= ".$savePath.""];
readfile[$savePath];
}
imagedestroy[$this->newImage];
}
/**
* Resize the image to these set dimensions
*
* @param int $width - Max width of the image
* @param int $height - Max height of the image
* @param string $resizeOption - Scale option for the image
*
* @return Save new image
*/
public function resizeTo[ $width, $height, $resizeOption = 'default' ]
{
switch[strtolower[$resizeOption]]
{
case 'exact':
$this->resizeWidth = $width;
$this->resizeHeight = $height;
break;
case 'maxwidth':
$this->resizeWidth = $width;
$this->resizeHeight = $this->resizeHeightByWidth[$width];
break;
case 'maxheight':
$this->resizeWidth = $this->resizeWidthByHeight[$height];
$this->resizeHeight = $height;
break;
default:
if[$this->origWidth > $width || $this->origHeight > $height]
{
if [ $this->origWidth > $this->origHeight ] {
$this->resizeHeight = $this->resizeHeightByWidth[$width];
$this->resizeWidth = $width;
} else if[ $this->origWidth < $this->origHeight ] {
$this->resizeWidth = $this->resizeWidthByHeight[$height];
$this->resizeHeight = $height;
}
} else {
$this->resizeWidth = $width;
$this->resizeHeight = $height;
}
break;
}
$this->newImage = imagecreatetruecolor[$this->resizeWidth, $this->resizeHeight];
imagecopyresampled[$this->newImage, $this->image, 0, 0, 0, 0, $this->resizeWidth, $this->resizeHeight, $this->origWidth, $this->origHeight];
}
/**
* Get the resized height from the width keeping the aspect ratio
*
* @param int $width - Max image width
*
* @return Height keeping aspect ratio
*/
private function resizeHeightByWidth[$width]
{
return floor[[$this->origHeight/$this->origWidth]*$width];
}
/**
* Get the resized width from the height keeping the aspect ratio
*
* @param int $height - Max image height
*
* @return Width keeping aspect ratio
*/
private function resizeWidthByHeight[$height]
{
return floor[[$this->origWidth/$this->origHeight]*$height];
}
}
?>Sử dụng lớp PHP thay đổi kích thước hình ảnh
Bởi vì chúng tôi đã tạo điều này để cho phép bạn thay đổi kích thước hình ảnh theo nhiều cách, điều đó có nghĩa là có nhiều cách sử dụng lớp khác nhau.
- Thay đổi kích thước hình ảnh đến một kích thước chính xác.
- Thay đổi kích thước hình ảnh thành kích thước chiều rộng tối đa giữ tỷ lệ khung hình của hình ảnh.
- Thay đổi kích thước hình ảnh thành kích thước chiều cao tối đa giữ tỷ lệ khung hình của hình ảnh.
- Thay đổi kích thước hình ảnh theo chiều rộng và chiều cao nhất định và cho phép mã tìm ra cách thay đổi kích thước nào là tốt nhất để giữ tỷ lệ khung hình.
- Bạn có thể lưu hình ảnh thay đổi kích thước đã tạo trên máy chủ.
- Bạn có thể tải xuống hình ảnh thay đổi kích thước được tạo trên máy chủ.
Thay đổi kích thước chính xác
Để thay đổi kích thước hình ảnh thành kích thước chính xác, bạn có thể sử dụng mã sau đây. Đầu tiên vượt qua trong hình ảnh mà chúng tôi muốn thay đổi kích thước trong hàm tạo của lớp, sau đó xác định chiều rộng và chiều cao với tùy chọn tỷ lệ chính xác. Bây giờ lớp sẽ có các kích thước tạo để tạo hình ảnh mới, bây giờ gọi hàm saveImage [] và chuyển vào vị trí tệp mới cho hình ảnh mới.
$resize = new ResizeImage['images/Be-Original.jpg'];
$resize->resizeTo[100, 100, 'exact'];
$resize->saveImage['images/be-original-exact.jpg'];Thay đổi kích thước Kích thước chiều rộng tối đa
Nếu bạn chọn đặt hình ảnh thành một kích thước chính xác thì khi hình ảnh được thay đổi kích thước, nó có thể mất tỷ lệ khung hình, điều đó có nghĩa là hình ảnh có thể bị kéo dài. Nhưng nếu bạn biết chiều rộng tối đa mà bạn muốn hình ảnh là bạn có thể thay đổi kích thước hình ảnh thành chiều rộng tối đa, điều này sẽ giữ tỷ lệ khung hình của hình ảnh.
$resize = new ResizeImage['images/Be-Original.jpg'];
$resize->resizeTo[100, 100, 'maxWidth'];
$resize->saveImage['images/be-original-maxWidth.jpg'];Thay đổi kích thước kích thước chiều cao tối đa
Giống như bạn có thể chọn chiều rộng tối đa cho hình ảnh trong khi vẫn giữ tỷ lệ khung hình, bạn cũng có thể chọn chiều cao tối đa trong khi vẫn giữ tỷ lệ khung hình.
$resize = new ResizeImage['images/Be-Original.jpg'];
$resize->resizeTo[100, 100, 'maxHeight'];
$resize->saveImage['images/be-original-maxHeight.jpg'];Thay đổi kích thước kích thước tự động từ chiều rộng và chiều cao cho trước
Bạn cũng có thể cho phép mã tìm ra cách tốt nhất để thay đổi kích thước hình ảnh, vì vậy nếu chiều cao hình ảnh lớn hơn chiều rộng thì nó sẽ thay đổi kích thước hình ảnh bằng cách sử dụng chiều cao và giữ tỷ lệ khung hình. Nếu chiều rộng hình ảnh lớn hơn chiều cao thì hình ảnh sẽ được thay đổi kích thước bằng chiều rộng và giữ tỷ lệ khung hình.
$resize = new ResizeImage['images/Be-Original.jpg'];
$resize->resizeTo[100, 100];
$resize->saveImage['images/be-original-default.jpg'];Tải xuống hình ảnh đã thay đổi kích thước
Hành vi mặc định cho lớp này là lưu hình ảnh trên máy chủ, nhưng bạn có thể dễ dàng thay đổi điều này để tải xuống bằng cách chuyển một tham số thực cho phương thức saveImage.
$resize = new ResizeImage['images/Be-Original.jpg'];
$resize->resizeTo[100, 100, 'exact'];
$resize->saveImage['images/be-original-exact.jpg', "100", true];9 hữu ích 0 bình luận 23k xem chia sẻ