Cách nén hình ảnh .png khi xuất từ ​​Canvas bằng cách sử dụng toDataURL()?

Question

Cần tạo hình ảnh .png có kích thước khoảng ~ 20k bằng canvas HTML5. Thật không may, khi tạo .pngs bằng cách sử dụng phương thức toDataURL(), bạn không thể chỉ định chất lượng như bạn có thể với jpegs.

Bất kỳ ý tưởng nào để giải quyết sự cố? toDataURL dường như là cách duy nhất để tạo hình ảnh từ Canvas và canvas có vẻ là công cụ tốt nhất để xử lý hình ảnh mà không cần tương tác với máy chủ. Đánh giá cao bất kỳ đề xuất nào.

Answer 1

Có cách nén nén ảnh PNG bằng cách sử dụng quá trình làm lệch hướng zlib không mất mát http://www.w3.org/TR/PNG-Compression.html. Có một thư viện (https://github.com/ShyykoSerhiy/canvas-png-compression) cung cấp shim cho HTMLCanvasElement.toDataURL() khi loại hình ảnh là 'image/png' và cho phép khả năng cung cấp 'chất lượng' làm tham số thứ hai cho HTMLCanvasElement.toDataURL() cho png.

LƯU Ý rằng nó cung cấp kết quả tốt hơn (kích thước nhỏ hơn) chỉ trong Chrome. Firefox đôi khi có nén tốt hơn so với canvas-png-compression (đối với phiên bản 0.0.3).

Answer 2

Bạn có thể làm điều gì đó bằng cách mở rộng quy mô và sau đó mở rộng quy mô một lần nữa.

• Quy mô bằng cách vẽ nó trên canvas nhỏ hơn, sau đó nhận url dữ liệu.

• Tạo đối tượng hình ảnh đặt url dữ liệu làm nguồn của nó.

• Draw trên vải ban đầu với đối tượng img này (rõ ràng bên trong onload event callback)

• Tìm tỷ lệ kích thước của bức tranh sơn dầu để cung cấp cho bạn kết quả tối ưu bằng cách thử nghiệm một chút.