Là nhà phát triển web, chúng ta luôn phải xử lý hình ảnh và trong hầu hết các trường hợp, trình duyệt rất tốt trong việc điều chỉnh tỷ lệ hình ảnh cho phù hợp với ranh giới của thiết kế trang web, đồng thời vẫn giữ được hình ảnh đẹp mắt. Nhưng điều gì sẽ 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 một 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 phóng to.
Thuộc tính CSS image-rendering và giá trị pixelated rất thú vị vì chúng tắt chế độ điều chỉnh tỷ lệ mượt mà tiêu chuẩn của trình duyệt (thường là loại nội suy song tuyến tính) và thay thế bằng một thuật toán điều chỉnh tỷ lệ khác (lân cận gần 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 có kích thước 2×2 pixel và bạn tăng tỷ lệ hình ảnh lên 100×100 pixel, trình duyệt sẽ hiển thị hình ảnh theo cách không làm cho hình ảnh trông giống như khối vuông. Chẳng hạn như:
Có nhiều trường hợp bạn không muốn hành vi làm mượt này và thay vào đó, hãy sử dụng một phương thức giúp giữ lại hình ảnh thể hiện 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=">
Dùng thử bản minh hoạ. Như bạn có thể thấy, việc áp dụng thuộc tính này có ảnh hưở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 ở nhiều nơi:
<img>phần tử<canvas style="image-rendering: pixelated">phần tử- Mọi phần tử 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 chỉ đăng ảnh trên trang web, thì có thể bạn không muốn làm như vậy.
Một trường hợp sử dụng tuyệt vời là trò chơi, bạn thường xuyên phải điều chỉnh tỷ lệ 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 theo cách khiến canvas trông bị mờ (xem bên dưới [sic]).
Nếu bạn đang xây dựng một công cụ bán vé máy bay hoặc một ứng dụng hiển thị mã QR thì thường thì người dùng sẽ muốn ứng dụng ở chế độ toàn màn hình để dễ quét hơn. Vì vậy, việc kiểm soát việc hiển thị hình ảnh là rất quan trọng.
Nếu bạn muốn xem cách triển khai, hãy xem Vấn đề 317991 (vấn đề này đang để trống để triển khai giá trị cạnh sắc nét). Đánh dấu vấn đề bằng dấu sao để theo dõi quá trình triển khai).