Làm cách nào để lấy chiều cao trang trong PHP?

Cách tối ưu hóa tải hình ảnh và tự động thêm thuộc tính chiều rộng và chiều cao vào phần tử img bằng PHP

1406 lượt xem

Bởi. Jacob

Đã chỉnh sửa. 2021-02-11 15. 49

Một trong những điều có xu hướng gây ra sự thay đổi bố cục khi tải trang là thiếu thuộc tính chiều rộng và chiều cao trên các phần tử img. Lý do điều này xảy ra là do trình duyệt sẽ không biết chiều rộng và chiều cao nếu không tải xuống hình ảnh trước và điều này khiến cho quá trình tải trang bị giật

Khi HTML tải lần đầu tiên và trình duyệt gặp một img trong nguồn không có kích thước được chỉ định, trình duyệt sẽ thu gọn hình ảnh cho đến khi hình ảnh được tải xong và biết kích thước; . Điều này thường xảy ra quá nhanh khiến người dùng có thể không nhận thấy, nhưng trên một số trang, điều này có thể là nguyên nhân gây ra sự thất vọng và vô tình nhấp vào các yếu tố mà người dùng không có ý định nhấp vào

Vì lý do này, hình ảnh thường phải luôn có chiều rộng và chiều cao được đặt. Sau đó, bạn có thể hỏi

Điều này sẽ không phá vỡ các hình ảnh phản hồi của tôi mà tôi kiểm soát bằng các đơn vị tương đối chứ?

Nó thực sự sẽ không cần phải làm vậy — bạn có thể ngăn việc phá vỡ tỷ lệ khung hình trên các hình ảnh phản hồi của mình bằng cách đưa những điều sau đây vào đâu đó trong CSS của bạn

img {aspect-ratio: attr[width] / attr[height];height:auto;}

Chiều cao. tự động;

Giá trị của các thuộc tính được tính bằng pixel theo mặc định và phải được chỉ định dưới dạng số nguyên, không có px ở cuối. Ví dụ


Trong các phần sau, tôi sẽ trình bày cách bạn có thể dễ dàng thêm các thuộc tính chiều rộng và chiều cao từ PHP trong khi vẫn giữ nguyên các thuộc tính hiện có

Tìm hình ảnh trong HTML bằng PHP

Trước khi bạn có thể tự động thêm các thuộc tính chiều rộng và chiều cao bị thiếu vào hình ảnh trong HTML trên các trang hiện có, bạn sẽ cần quét HTML để tìm hình ảnh cần được cập nhật. Để làm được điều đó, bạn có thể sử dụng hàm preg_match_all

Sẽ dễ dàng hơn nếu bạn tạo một hàm có thể được gọi và sử dụng lại, nhưng để đơn giản, trước tiên tôi sẽ đưa ra một số ví dụ với PHP thủ tục đơn giản

Đoạn mã sau có thể trả về tất cả các phần tử img trong HTML

$html = get_html_code_from_somewhere[];
if [!preg_match_all['/[]*]>]/iu', $html, $matches, PREG_PATTERN_ORDER]] {
  exit[];
}

Bản thân các phần tử được lưu trữ trong mảng $matches[1] và có thể được duyệt qua bằng vòng lặp foreach đơn giản

foreach [$matches[1] as $element] {
  echo $element . "\n";
}
exit[];

Ví dụ này chỉ để cho bạn thấy biểu thức chính quy hoạt động như thế nào;

Bạn cũng cần phải cẩn thận và đảm bảo rằng bạn tính đến những thất bại. Nếu getimagesize không thành công, vì bất kỳ lý do gì, hình ảnh sẽ được giữ nguyên trong nguồn

Trích xuất các thuộc tính từ các phần tử img

Để có được đường dẫn của hình ảnh và tránh mất các thuộc tính hiện có, bạn nên giải nén chúng và chèn lại chúng cùng với các thuộc tính chiều rộng và chiều cao trước khi thay thế hình ảnh gốc trong nguồn

Phần thách thức nhất tại thời điểm này là làm cách nào để trích xuất các thuộc tính hiện có từ phần tử img — để làm được điều này, có lẽ bạn nên tạo một hàm, vì nó sẽ giúp mã của bạn dễ đọc hơn. Như một phần thưởng, bạn cũng sẽ có thể gọi mã này ở những nơi khác mà bạn có thể cần lấy các thuộc tính của phần tử HTML. Tôi đã tạo như sau

function get_element_attributes[string $element]: array {
  if [false !== preg_match_all['/[[a-z0-9]+]=[\"\']{1}[.*?][\"\']{1}/sui', $element, $found_attrs, PREG_PATTERN_ORDER]] {
    $i = 0;
    $attributes = [];
    foreach [$found_attrs[1] as $name] {
      $attributes["$name"] = $found_attrs[2]["$i"];
      ++$i;
    }
    return $attributes;
  }
  return [];
}

Phần khó khăn khi tạo chức năng này là các tên thuộc tính phù hợp được lưu trữ trong mảng $found_attrs[1], trong khi các giá trị thuộc tính được lưu trữ trong $found_attrs[2] — để vượt qua thử thách này, tôi đã thêm một bộ đếm, $i

Nếu một hình ảnh không có bất kỳ thuộc tính nào, thay vào đó, một mảng trống sẽ được trả về và hình ảnh không bị ảnh hưởng trong nguồn. Điều này tất nhiên là không thể, nhưng nó có thể xảy ra trong trường hợp mọi người chỉnh sửa HTML của họ theo cách thủ công. Một phần tử img ít nhất phải bao gồm thuộc tính src để bạn có thể lấy kích thước của hình ảnh. Nếu nguồn hình ảnh được cập nhật bằng JavaScript, chức năng này sẽ không hoạt động

Tạo phần tử img mới, nếu cần

Nếu một img đã được áp dụng kích thước hoặc nếu thuộc tính src trống, chúng tôi sẽ để hình ảnh trong nguồn mà không chạm vào nó

Mã bên dưới phải được đặt bên trong vòng lặp đầu tiên mà chúng tôi đã tạo — lưu ý rằng mã đầy đủ được đưa vào cuối cùng trong bài viết

$attributes = get_element_attributes[$element];
if [
  [!empty[$attributes['src']]] &&
  [isset[$attributes['width']]] &&
  [isset[$attributes['height']]]
] {
  // Skip the current iteration of the loop
  continue;
}
// If everything was as desired, subsequent code will get executed

Giả sử rằng mọi thứ đều như chúng ta muốn, bây giờ chúng ta có thể kiểm tra xem tệp có tồn tại trong hệ thống tệp cục bộ hay không;

Ghi chú. Điều này giả định rằng đường dẫn trong thuộc tính src được định nghĩa là gốc tương đối. Bạn cần cung cấp một $site_directory để có thể định vị hình ảnh trong hệ thống tệp;

Cũng có thể chuyển đổi một URL tuyệt đối thành một URL tương đối gốc, nhưng cách thực hiện sẽ không được đề cập trong hướng dẫn này

Bạn có thể kiểm tra xem tệp có tồn tại với file_exists không

if [!file_exists[$path]] {
  continue;
}

Cuối cùng, bạn nên cố gắng lấy kích thước hình ảnh

if [false === [$img_details = getimagesize[$path]]] {
  continue;
}

Điều này cũng sẽ xác định rõ biến $img_details trong khi kiểm tra xem getimagesize có thành công hay không

Làm cách nào để lấy kích thước màn hình trong PHP?

chức năng php screenResToCookie[] { if [isset[$_SERVER["HTTP_X_FORWARDED_PROTO"]]] { $http = $_SERVER["HTTP_X_FORWARDED_PROTO"]; . ". //". $_SERVER["HTTP_HOST"]; . màn hình

Làm cách nào để lấy kích thước của tệp PDF trong PHP?

Để lấy kích thước tệp, chúng tôi sẽ sử dụng hàm filesize[] . Hàm filesize[] trả về kích thước của tệp theo byte. Hàm này chấp nhận tên tệp làm tham số và trả về kích thước của tệp theo byte nếu thành công và Sai nếu không thành công.

Làm cách nào để kiểm tra độ rộng cửa sổ trong PHP?

Sử dụng cửa sổ. innerWidth và cửa sổ. innerHeight để lấy kích thước màn hình hiện tại của trang.

Chủ Đề