2015-02-16 13 views
13
canvas.toDataURL(type, encoderOptions); 

MDN 's mô tả về loại tham số nói như sau:Các loại dữ liệu có thể có cho chức năng canvas 'toDataURL() là gì?

loạiTùy chọn
Một DOMString chỉ ra định dạng hình ảnh. Loại mặc định là hình ảnh/png.

Tôi chưa tìm thấy tất cả các loại, vì tôi đang cố gắng đánh giá những gì có thể sử dụng trong các trường hợp khác nhau.

Chỉnh sửa: MSDN's article về toDataURL() cũng không thực sự hữu ích.


tôi biết về những điều sau đây:

  • image/png chất lượng (tùy chọn mã hóa) dường như không ảnh hưởng đến sản lượng
  • image/jpeg chất lượng (tùy chọn mã hóa) ảnh hưởng đến sản lượng
  • image/webp ảnh hưởng chất lượng đầu ra . (Chỉ dành cho Chrome theo MDN).

Nhưng sau khi nhìn xung quanh tôi dường như không thể tìm thấy danh sách các loại có thể và tùy chọn bộ mã hóa của chúng ... đó là tất cả những gì tôi có thể tìm thấy. Các khả năng khác là gì?

+0

Đoán nó phụ thuộc vào việc thực hiện trình duyệt. Tài liệu MSDN nói rằng nó thường là 'image/png' hoặc' image/jpeg' - vì vậy chúng ta có thể giả sử chúng là những cái hợp lệ trong MSIE. – techfoobar

+2

Thông số chỉ đề cập đến PNG và JPEG, nhưng từ ngữ không có vẻ hạn chế rõ ràng. – Pointy

+0

Ngoài ra spec nói rằng bạn có thể yêu cầu bất cứ điều gì bạn muốn, và sau đó nếu thời gian chạy không thể làm điều đó bạn sẽ nhận được PNG trở lại (và bạn có thể xác định xem đó là trường hợp bằng cách kiểm tra chuỗi trả về). – Pointy

Trả lời

3

Hỗ trợ trình duyệt cho các định dạng đầu ra hình ảnh phần lớn phụ thuộc vào việc triển khai. Dưới đây là the most relevant sentence in the WHATWG living standard:

đại lý dùng phải hỗ trợ PNG ("image/png"). Tác nhân người dùng có thể hỗ trợ các loại khác. Nếu tác nhân người dùng không hỗ trợ loại được yêu cầu, nó phải tạo tệp bằng định dạng PNG.

PNG là bắt buộc; tất cả các định dạng khác là tùy chọn. Này được giải thích chung trong standard's toDataURL description:

canvas . toDataURL([ type, ... ])

Trả về một URL data: cho hình ảnh trong canvas.

Đối số đầu tiên, nếu được cung cấp, kiểm soát loại hình ảnh sẽ được trả lại (ví dụ: PNG hoặc JPEG). Giá trị mặc định là image/png; loại đó cũng được sử dụng nếu loại đã cho không được hỗ trợ. Các đối số khác là cụ thể cho loại, và kiểm soát cách mà hình ảnh được tạo ra, như được đưa ra trong bảng dưới đây.

Các spec contains a table as mentioned above, nhưng nó chỉ có một mục nhập:

luận cứ cho các phương pháp serialization

Type   Other arguments 
image/jpeg The second argument, if it is a number in the range 0.0 to 
       1.0 inclusive, must be treated as the desired quality level. 
       If it is not a number or is outside that range, the user 
       agent must use its default value, as if the argument had 
       been omitted. 

Vì vậy, chúng ta có thể thấy rằng PNG được yêu cầu một cách rõ ràng như mặc định và JPEG phải hỗ trợ đối số chất lượng nếu trình duyệt chọn hỗ trợ JPEG. Trong tương lai, tôi ngoại trừ cộng đồng tiêu chuẩn Web có thể thêm nhiều mục nhập vào bảng đó, để xác định các đối số chuẩn cho các nhà cung cấp chọn hỗ trợ các loại hình ảnh tùy chọn.

Các spec cho thấy làm thế nào để kiểm tra hỗ trợ của trình duyệt của bất kỳ định dạng cụ thể (nhưng tiếc là không làm thế nào để có được tất cả định dạng hỗ trợ, ví dụ, như một danh sách):

Khi cố gắng sử dụng các loại khác hơn "image/png", tác giả có thể kiểm tra xem hình ảnh có thực sự được trả lại ở định dạng được yêu cầu hay không bằng cách kiểm tra xem chuỗi được trả về có bắt đầu bằng một trong các chuỗi chính xác không "data:image/png," hoặc "data:image/png;".

Có một lưu ý bổ sung về trình duyệt hỗ trợ tùy chọn:

Ví dụ, giá trị "image/png" có nghĩa là để tạo ra một hình ảnh PNG, giá trị "image/jpeg" có nghĩa là để tạo ra một hình ảnh JPEG và giá trị "image/svg+xml" có nghĩa là tạo hình ảnh SVG (yêu cầu tác nhân người dùng theo dõi cách bitmap được tạo, tính năng không chắc chắn, có khả năng tuyệt vời).

rõ ràng này để lại một phạm vi rộng lớn của phép định dạng, nhưng chỉ có một cần định dạng.

Liệu trình duyệt có hỗ trợ định dạng tuần tự hóa hình ảnh cụ thể hay không hoàn toàn tùy thuộc vào từng trình duyệt.

9

mỗi sự firefoxsource code, họ dường như hỗ trợ:

  • png
  • jpeg
  • ico
  • bmp

Chrome theo source code, nên hỗ trợ :

  • webp
  • png
  • jpeg
  • bmp

Internet explorer phiên bản hiện đại, nên như nhau để Firefox (qua ngón tay).

Nếu tôi cần phải bỏ phiếu các tùy chọn "mỗi ngày hôm nay" có sẵn, tôi sẽ đi với: PNG, JPEG, và BMP

Chất lượng ảnh hưởng lựa chọn:

  • JPEG, chất lượng phần trăm, nơi 0 được 0%, 0,5 là 50% và 1 là 100%
  • BMP, BPP, byte cho mỗi pixel (nhờ @apsillers để chỉ ra)
Các vấn đề liên quan