Làm cách nào để ngăn Chrome làm mờ hình ảnh nhỏ khi phóng to?

13

Khi tôi đang cố gắng xem ảnh nghệ thuật pixel ở gần, chrome bắt đầu làm mờ hình ảnh. Tôi muốn làm cho nó để ngay cả khi hình ảnh được phóng to, tôi vẫn có thể nhìn thấy các pixel một cách chi tiết rõ nét, không bị mờ.

google-chrome images pixels

— Cánh quạt
nguồn

1

Hiện tại tôi không nghĩ bạn có thể vô hiệu hóa thuật toán làm mịn mà chrome sử dụng để làm mịn các cạnh của hình ảnh khi bạn phóng to chúng. Trừ khi có một phần mở rộng làm như vậy hoặc ai đó biết điều gì đó mà tôi chưa biết.

— DuckDuckGoose

Bằng cách phóng to, bạn có nghĩa là ctrl / cmd và +?

— booyaa

@booyas, vâng, đó là điều tôi muốn nói.

— Cánh quạt

1

Mọi thứ đã được cải thiện, giờ đây đây là bản sao có thể có của stackoverflow.com/questions/7615009/ ,. Cụ thể, hãy xem câu trả lời của namuol và jsfiddle tại jsfiddle.net/namuol/VAXrL/1459 , điều này thể hiện những gì tôi nghĩ bạn đang muốn. TL; DR cho chrome: "kết xuất hình ảnh: pixelated;" trên img và các yếu tố canvas.

— Don nở

Không phải câu hỏi của bạn, nhưng ít nhất có thể lưu trữ hình ảnh với chất lượng cao hơn, và sau đó zoom có sử dụng chi tiết bổ sung không?

— Xonatron

16

Cập nhật

Theo ý kiến:

hiện có thể có trong Firefox: image-render: tối ưu hóa Tốc độ; - Arnaud

Nguyên

Điều này không thể trực tiếp từ trình duyệt.

Việc làm mịn được áp dụng thông qua một thuật toán và hầu hết các trình duyệt hiện đại cũng làm tương tự và trong IE, Firefox và Chrome không có cách nào để tắt điều này.

http://productforums.google.com/forum/#!topic/chrom/AIihdmfPNvE

Bạn có các tùy chọn khác, đây là 2 điểm chính từ liên kết ở trên, cả hai đều là addons Chrome.

image-resizer
imagezoom

Bạn có thể áp dụng mã CSS bên dưới trong trình duyệt , nó sẽ tắt nó!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

— Dave
nguồn

Thật không may, điều này không hoạt động trên Chrome (ngoại trừ trên OSX).

— lapo

Làm thế nào / nơi chính xác tôi sẽ cần phải 'áp dụng' điều này trong Chrome?

— Nyerguds

4

Bạn vừa nói rằng điều đó là không thể và sau đó dán một mã làm việc để thực sự làm điều đó?

— Petr Peller

Không có @petrpeller, tôi đã viết rõ ràng không thể trực tiếp với trình duyệt. Sau đó tôi tiếp tục giải thích rằng một plugin là bắt buộc ... Tại sao bạn lại hỏi câu hỏi này khi bạn có thể đọc bài viết?!?

— Dave

2

image-rendering: -webkit-optimize-contrast;làm việc trong chrome

— sinh viên wp

2

Tôi đã nhận thấy một số vấn đề với Chrome và Firefox khi sử dụng kết xuất GPU bằng hình ảnh. Ví dụ:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Nếu bạn có bất kỳ câu lệnh CSS nào sau đây, hãy thử xóa chúng và xem chất lượng hình ảnh của bạn có tăng không.

— bashaus
nguồn

2

Tôi đã thực hiện bookmarklet này để vô hiệu hóa làm mịn. Tôi giữ liên kết trong thanh dấu trang của mình và nhấn vào nó khi tôi muốn tắt tính năng khử răng cưa trên một trang, thường là cho nghệ thuật pixel hoặc chơi trò chơi cổ điển :

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

Lý do một bookmarklet hấp dẫn là vì tôi không thích cho phép tiện ích mở rộng quyền "đọc và thay đổi tất cả dữ liệu của bạn trên các trang web bạn truy cập".

— Stephen Niedzielski
nguồn

1

Có thể vào năm 2019 với CSS sau: image-rendering: pixelated;

— Arnaud
nguồn