Open Bug 1505383 Opened 6 years ago Updated 2 years ago

canvas shortcomings (drawImage resize quality, toDataUrl, webp, png)

Categories

(Core :: Graphics: ImageLib, defect, P3)

Product:
Core
Component:
Graphics: ImageLib
Version:
65 Branch
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: mail.eraserhead, Unassigned)

References

Details

Attachments

(1 file)

canvas_resize_quality_firefox_vs_chrome.jpg
(deleted), image/jpeg
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0 Steps to reproduce: 1) since Firefox 65 supports webp, canvas.toDataUrl('image/webp') should encode to real webp instead of falling back to png 2) resize quality of canvas.drawImage() is a LOT worse than in Chrome (with imageSmoothingEnabled, imageSmoothingQuality set to "high"); Chrome seems to use a bilinear resize (without noticeable performance loss) while Firefox relies solely on "hard edges". Please compare in the attached screenshot of a high ISO photo resized in a canvas from 6000px to 800px width. 3) PNGs created with canvas.toDataUrl('image/png') are about 25%-40% smaller in Chrome than in Firefox with zero difference in quality (I used a difference filter in Photoshop to make sure)
Component: Untriaged → Canvas: 2D
Product: Firefox → Core
Component: Canvas: 2D → ImageLib
Priority: -- → P3
Blocks: 1559743

I'd like to point out that Firefox still can't create webp files from a canvas.
canvas.toDataUrl('image/webp') creates a png file despite Firefox have webp support since version 65.
Is there a reason why this is not added?

Now that WebP is finally coming to Safari, I'd really like Firefox to be able to encode WebP from Canvas.
Is there any roadmap for this?

canvas.toBlob(callback, 'image/webp') also suffers from the same issue as canvas.toDataUrl('image/webp') (namely falling back to a PNG formatted blob).

webp encoding now implemented (bug 1511670)
We've also tweaked the png encoder settings to be similar to Chrome.

(In reply to Timothy Nikkel (:tnikkel) from comment #4)

webp encoding now implemented (bug 1511670)
We've also tweaked the png encoder settings to be similar to Chrome.

Great, thanks for updating this bug report, I missed the news for FF96.
Now Firefox is only missing imageSmoothingQuality = 'high' for canvas ...

It is easy to download youtube thumbnail from this tool https://mytoolsdoctor.com/youtube-thumbnail-downloader-online

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: