Thuật toán nào làm trình duyệt thường sử dụng khi chia tỷ lệ hình ảnh bằng CSS?

Question

Tôi đang cố gắng để có được canvas để hiển thị hình ảnh được chia tỷ lệ với cùng độ trung thực bằng hình ảnh như CSS.

Theo thử nghiệm của tôi (được thực hiện trong Phiên bản Chrome 43.0.2357.130), có vẻ như không phải là Lanczos3, mặc dù các thử nghiệm của tôi với ResampleScope cho biết rằng nó phải như vậy.

Xem đây:

Mã sử ​​dụng để tạo ra các kết quả này:

"CSS":

<img src="temp.png" style="width:200px;height:200px"> 

"vải drawImage":

ctxNative.drawImage(img, 0, 0, 200, 200); 

"vải chuyển đổi ":

ctxTransform.transform(200/img.width, 0, 0, 200/img.height, 0, 0); 
ctxTransform.drawImage(img, 0, 0, img.width, img.height); 

"bicubic" (mã cho bicubic ở phía dưới)

"bicubiC#2"

"downsample alg."

"lanczos3"

Answer 1

tôi thấy an article about using the image-rendering CSS property to control the algorithm. Trong bài viết này, các quốc gia tác giả:

Như bạn thấy, hiệu quả là tối ưu - mặc định thuật toán mở rộng quy mô của trình duyệt (thường bi tuyến tính suy) đã áp dụng anti-aliasing cho hình ảnh.

(nhấn mạnh mỏ). Nó cũng nói về việc sử dụng thuộc tính CSS image-rendering để kiểm soát thuật toán nào được sử dụng.

Answer 2

Đây có lẽ là một liên kết hữu ích về vấn đề xem xét Firefox:

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Vì vậy, đôi khi CSS không kiểm soát quá trình thay đổi kích thước hình ảnh, nhưng phần lớn thời gian nó không.

Theo thử nghiệm của tôi, chất lượng hình ảnh thay đổi rất nhiều tùy thuộc vào trạng thái tối ưu hóa nội bộ của trình duyệt, ví dụ: khi chạy trong chuyển đổi CSS được coi là "tăng tốc", bản đồ nguồn của NxN có thể được thu nhỏ chỉ một lần kích thước cố định, giả sử thành 200x200 và sau đó bitbuffer này được chia tỷ lệ thành một số MxM khác, mất chất lượng vì có hai lần truyền và kết quả có thể bị mờ, nếu kích thước bộ đệm đầu tiên không đủ lớn, có nghĩa là bạn không thể xác định kết quả dựa trên bitmap nguồn chỉ.

Điều này là để nói rằng chất lượng hình ảnh kết quả có thể không phụ thuộc vào chất lượng hình ảnh gốc hoặc kích thước, ít nhất là nếu chuyển đổi GPU được sử dụng.Trong các trường hợp khác, nếu không có giới hạn dựa trên các quy tắc CSS hoặc trình duyệt không tuân theo thì nó có thể áp dụng cho hình ảnh theo cách tốt nhất - trước tiên nó có thể biến đổi hình ảnh bằng một số thuật toán đơn giản và nếu có là thời gian xử lý đủ thời gian, nó có thể áp dụng lần lọc thứ hai cho hình ảnh để làm cho hình ảnh sắc nét hơn bằng cách sử dụng thuật toán phức tạp hơn nếu nó thực tế trên cấu hình GPU/thiết bị hiện tại.

tôi chắc chắn rằng bạn đã quen thuộc với vấn đề này, nhưng đây là một danh sách các khả năng về làm thế nào để mở rộng quy mô một hình ảnh, vì vậy có rất nhiều thuật toán để lựa chọn: https://en.wikipedia.org/wiki/Image_scaling

Để có câu trã lời thực tế hơn , bạn có thể đi thẳng vào mã nguồn của Chrome, https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.h&sq=package:chromium&type=cs&rcl=1435318317

// Quality Methods 
// 
// Those enumeration values express a desired quality/speed tradeoff. 
// They are translated into an algorithm-specific method that depends 
// on the capabilities (CPU, GPU) of the underlying platform. 
// It is possible for all three methods to be mapped to the same 
// algorithm on a given platform. 

// Good quality resizing. Fastest resizing with acceptable visual quality. 
// This is typically intended for use during interactive layouts 
// where slower platforms may want to trade image quality for large 
// increase in resizing performance. 
// 
// For example the resizing implementation may devolve to linear 
// filtering if this enables GPU acceleration to be used. 
// 
// Note that the underlying resizing method may be determined 
// on the fly based on the parameters for a given resize call. 
// For example an implementation using a GPU-based linear filter 
// in the common case may still use a higher-quality software-based 
// filter in cases where using the GPU would actually be slower - due 
// to too much latency - or impossible - due to image format or size 
// constraints. 
RESIZE_GOOD, 

// Medium quality resizing. Close to high quality resizing (better 
// than linear interpolation) with potentially some quality being 
// traded-off for additional speed compared to RESIZE_BEST. 
// 
// This is intended, for example, for generation of large thumbnails 
// (hundreds of pixels in each dimension) from large sources, where 
// a linear filter would produce too many artifacts but where 
// a RESIZE_HIGH might be too costly time-wise. 
RESIZE_BETTER, 

// High quality resizing. The algorithm is picked to favor image quality. 
RESIZE_BEST, 

mã này có liệt kê cho các bộ lọc ít nhất sau: RESIZE_BOX, RESIZE_HAMMING1, RESIZE_LAN CZOS2, RESIZE_LANCZOS3,

Tôi cho rằng bạn cũng có thể tìm thấy những hiện thực của những bộ lọc trong image_operations.cc https://code.google.com/p/chromium/codesearch#chromium/src/skia/ext/image_operations.cc&sq=package:chromium&type=cs