hình ảnh-hiển thị:tạo pixel

Là nhà phát triển web, chúng tôi luôn sử dụng hình ảnh và trong hầu hết các trường hợp, trình duyệt rất hữu ích trong việc điều chỉnh tỷ lệ hình ảnh cho phù hợp với ranh giới thiết kế trang web trong khi vẫn giữ hình ảnh đẹp. Nhưng điều gì xảy ra khi bạn muốn kiểm soát cách trình duyệt điều chỉnh tỷ lệ hình ảnh trên trang của mình?

Chrome 41 (Bản thử nghiệm vào tháng 1 năm 2015) giới thiệu thuộc tính CSS mới image-rendering: pixelated (Thông số kỹ thuật) cho phép bạn kiểm soát chặt chẽ hơn cách trình duyệt hiển thị hình ảnh được tăng kích thước.

Thuộc tính CSS image-rendering và giá trị pixelated rất thú vị vì chúng tắt tỷ lệ mượt mà chuẩn của trình duyệt (thường là nội suy song tuyến tính) và thay thế bằng một thuật toán điều chỉnh theo tỷ lệ khác (gần như nhất trong hầu hết các trường hợp) khi đổi kích thước hình ảnh.

Hãy tưởng tượng bạn có một hình ảnh 2x2 pixel và bạn điều chỉnh tỷ lệ hình ảnh lên tới 100x100 pixel, trình duyệt sẽ kết xuất hình ảnh theo cách không làm cho hình ảnh bị khối. Chẳng hạn như:

Kết xuất mượt mà

Trong nhiều trường hợp, bạn không muốn hành vi làm mượt này, mà thay vào đó hãy sử dụng một phương thức bảo toàn việc thể hiện hình ảnh chính xác hơn.

Để có hiệu ứng này, bạn chỉ cần áp dụng image-rendering: pixelated; cho hình ảnh như sau.

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Kết xuất pixel

Dùng thử bản minh hoạ. Như bạn có thể thấy, việc áp dụng thuộc tính có tác động đáng kể đến cách hình ảnh được kết xuất.

Bạn có thể áp dụng thuộc tính này cho nhiều vị trí:

  • <img> phần tử
  • <canvas style="image-rendering: pixelated"> phần tử
  • Bất kỳ phần tử nào có thuộc tính background-image

Tôi vẫn chưa hiểu ý bạn. Tôi nên sử dụng công cụ này ở đâu?

Nếu bạn chỉ hiển thị ảnh trên trang web của mình thì có thể bạn không muốn mục này.

Một trường hợp sử dụng tuyệt vời là trò chơi, bạn thường phải mở rộng canvas để canvas vừa với kích thước màn hình. Trước thuộc tính CSS này, trình duyệt sẽ nội suy canvas đến mức bị mờ (xem phần bên dưới [sic]).

Nếu bạn đang xây dựng công cụ bán vé hàng không hoặc ứng dụng hiển thị mã QR thì thông thường người dùng sẽ muốn quảng cáo hiển thị ở chế độ toàn màn hình để dễ quét hơn, vì vậy, việc kiểm soát hiển thị hình ảnh là rất quan trọng.

Nếu bạn muốn xem hoạt động triển khai, hãy kiểm tra Vấn đề 317991 (vấn đề này vẫn để mở cho việc triển khai giá trị cạnh sắc nét. Gắn dấu sao vấn đề đó để theo dõi quá trình triển khai).