Hình ảnh & hình ảnh · Trình chuyển đổi & nén hình ảnh
Cách canvas.toBlob chuyển đổi PNG thành WebP bên trong trình duyệt của bạn
· Cách thức hoạt động
image-formats vải vẽ webp
Trình chuyển đổi hình ảnh trình duyệt là bộ giải mã, bitmap và bộ mã hóa được kết nối với nhau và toàn bộ chuỗi được tích hợp vào trình duyệt. Bài đăng này theo sau một PNG thông qua giải mã, canvas và toBlob tới tệp WebP và ghi chú những gì bị mất trong quá trình thực hiện.
WebP xuất phát từ đâu khi không có máy chủ tham gia — câu hỏi cụ thể đằng sau trình chuyển đổi hoạt động ngoại tuyến
WebP không đến từ hàng đợi chuyển đổi phía máy chủ. Trình duyệt của bạn đã có bộ giải mã hình ảnh, bề mặt pixel có thể vẽ và bộ mã hóa; trình chuyển đổi ToolAcre kết nối chúng. Đó là lý do tại sao PNG có thể được chuyển đổi trong tab của bạn sau khi trang web được tải. “Không tải lên” đề cập đến hình ảnh nguồn và đầu ra chuyển đổi, không phải trang web không có hoạt động mạng nào cả.
Bước một: giải mã — cách trình duyệt biến PNG byte thành một bitmap RGBA và tại sao mọi định dạng đều kết thúc ở cùng một lưới
Đầu tiên PNG được giải mã thành bitmap hình ảnh. PNG nén, lựa chọn bảng màu và siêu dữ liệu màu xác định cách byte của nó trở thành pixel nhưng canvas hoạt động trên raster được giải mã chứ không phải trên các đoạn của tệp PNG. Ảnh chụp màn hình 1600×900 mang lại 1.44 triệu vị trí pixel ngay cả khi bản thân tệp nhỏ hơn nhiều. ToolAcre sử dụng createImageBitmap và thực thi ngân sách pixel; hình ảnh được giải mã lớn là vấn đề về bộ nhớ trước khi nó là vấn đề tải lên.
Bước hai: canvas làm khu vực tổ chức - vẽ bitmap lên canvas hoặc OffscreenCanvas có kích thước phù hợp
Bitmap được vẽ thành canvas hoặc OffscreenCanvas với kích thước đầu ra được yêu cầu. Nếu các kích thước đó khớp với nguồn và không có phần cắt nào được chọn, drawImage sẽ sắp xếp các pixel để mã hóa; nếu kích thước thay đổi, khung vẽ sẽ lấy mẫu lại chúng và giá trị pixel có thể thay đổi trước khi quá trình mã hóa WebP bắt đầu. Quy trình kết xuất tương tự phục vụ bản xem trước tương tác và đường dẫn công nhân, ngăn hai đầu ra đó tuân theo các thuật toán không liên quan.
Bước ba: toBlob với loại và chất lượng MIME — cách chọn bộ mã hóa, số chất lượng kiểm soát những gì và tại sao nó bị bỏ qua đối với PNG
Trên canvas thông thường, toBlob(callback, "image/webp", chất lượng) yêu cầu trình duyệt mã hóa WebP và gọi lại bằng Blob. Khi có sẵn OffscreenCanvas, ToolAcre sử dụng ConvertToBlob({type,quality}) cho cùng một công việc. Kiểm soát chất lượng một bộ mã hóa bị tổn hao; nó không phải là một lời hứa về số byte cụ thể. Việc xuất PNG không mất dữ liệu và thông số chất lượng của nó không đặt mức nén giống JPEG. Luôn kiểm tra định dạng được trả về thực tế vì tính khả dụng của bộ mã hóa phụ thuộc vào trình duyệt.
Những gì quy trình loại bỏ - siêu dữ liệu, cấu hình màu và độ chính xác 16-bit và tại sao đó là thuộc tính của kỹ thuật chứ không phải là lỗi
Mã hóa lại raster đã giải mã không thể bảo toàn mọi dữ kiện trong vùng chứa PNG ban đầu. Các đoạn văn bản, siêu dữ liệu của máy ảnh hoặc trình chỉnh sửa, một số chi tiết cấu hình màu và độ sâu bit nguồn có thể không tồn tại trong suốt chuyến đi khứ hồi của canvas; Các kênh 16-bit không trở thành 16-bit WebP chỉ vì đầu vào mang chúng. WebP có thể duy trì độ trong suốt khi bộ mã hóa hỗ trợ nó, trong khi việc xuất JPEG yêu cầu lấp đầy các vùng trong suốt. Chỉ riêng kích thước tệp không thể cho biết liệu một chuyển đổi có giữ được các đường nét hoặc màu sắc đẹp hay không.
Ví dụ đã hoạt động: ảnh chụp màn hình 1.8 MB PNG tới WebP — theo dõi tệp qua ba bước và đọc kết quả
Hãy xem xét ảnh chụp màn hình 1.8 MB PNG có văn bản, độ chuyển màu và góc trong suốt. Giải mã nó, giữ nguyên kích thước, chọn WebP, xuất và so sánh kích thước Blob và loại MIME với bản gốc. Kích thước kết quả được đo lường, không thể đoán trước: ảnh chụp màn hình sạch có thể nén tốt, trong khi nội dung ồn ào có thể không. Phóng to các nét nhỏ và góc trong suốt trước khi chấp nhận tệp nhỏ hơn. Nếu văn bản giao diện người dùng sắc nét trở nên mờ, hãy giữ PNG hoặc điều chỉnh chất lượng bộ mã hóa thay vì khẳng định rằng WebP luôn tốt hơn.
Điều này không bao gồm — hình ảnh động, định dạng mà trình duyệt không thể giải mã và cài đặt bộ mã hóa API không hiển thị
Quy trình này không hứa hẹn khả năng lưu giữ hoạt ảnh, giải mã HEIC trên mọi thiết bị hoặc kiểm soát hoàn toàn các tham số nỗ lực và lấy mẫu phụ của bộ mã hóa WebP. Nó cũng không thể khôi phục chi tiết đã bị mất trong nguồn JPEG bằng cách lưu dưới dạng PNG hoặc WebP. Chu kỳ giải mã/re-encode lặp đi lặp lại có thể bị mất tích lũy. Giữ một bản gốc và sử dụng các định dạng input/output được hỗ trợ được liệt kê trên trang công cụ thực tế thay vì cho rằng mọi định dạng mà hệ điều hành của bạn biết đều được chấp nhận ở đây.
Bài học rút ra: ba bước, không tải lên — cách Trình chuyển đổi & nén hình ảnh chạy quy trình này trên thiết bị của bạn
Cơ chế là giải mã → vẽ → mã hóa, được thực hiện bằng API trình duyệt và không tải lên hình ảnh. ToolAcre hiển thị định dạng và kích thước đích để bạn có thể biết liệu bạn chỉ đang thay đổi vùng chứa hay thay đổi kích thước pixel. Kiểm tra một ảnh chụp màn hình đại diện trong Image Converter & Compressor trước khi xử lý toàn bộ lô, sau đó kiểm tra kết quả đã tải xuống ở kích thước mà mọi người sẽ thấy.