Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

api.HTMLCanvasElement.toBlob - quality parameter is supported in Safari desktop and mobile #21770

Closed
opusonline opened this issue Dec 28, 2023 · 5 comments
Closed

api.HTMLCanvasElement.toBlob - quality parameter is supported in Safari desktop and mobile #21770

opusonline opened this issue Dec 28, 2023 · 5 comments
Labels
data:api Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API

Comments

@opusonline
Copy link

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

HTMLCanvasElement.toBlob "quality" parameter support is saying "not supported" in Safari and Safari on iOS.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

quality parameter is supported in Safari and Safari on iOS since version 11.

Did you test this? If so, how?

I wrote an example app that uses the same function, but with 2 different quality parameter values to compare the result. The example was then tested on browserstack on different browsers. I saw it working back until Safari and Safari on iOS version 11.1.2 and 11.0.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

Sample code:
(Please note, that the image src is a base64 string of an example image. It's removed in this example since it's too long. You can find the original image here: https://file-examples.com/index.php/sample-images-download/sample-jpg-download/)

<body>
    <h1>Canvas quality test</h1>
    <p><canvas id="canvas-preview"></canvas></p>
    <p id="result"></p>
    <p id="ua"></p>
<script>
const $ = document.querySelector.bind(document);
const canvas = $('#canvas-preview');
const context = canvas.getContext('2d');
const formatter = new Intl.NumberFormat('default', { style: 'percent', maximumFractionDigits: 2 });
const convertToBlob = (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, type, quality));

const init = async () => {
    $('#ua').textContent = navigator.userAgent;
    try {
        const img = await loadImage();
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
        const result = await Promise.all([
            convertToBlob(canvas, 'image/jpeg', 1.0),
            convertToBlob(canvas, 'image/jpeg', 0.1),
        ]);
        const size1 = result[0].size;
        const size2 = result[1].size;
        console.log(size1, size2);
        if (size1 === size2) {
            $('#result').textContent = 'No difference!';
        }
        $('#result').textContent = `10% quality results in an image that is ${formatter.format(size2 / size1)} of the file size.`;
    } catch (error) {
        console.error(error);
        $('#result').textContent = `Error: ${error.toString()}`;
    }
};

const loadImage = () => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
            resolve(img);
        };
        img.onerror = () => {
            reject();
        };
        img.src = 'data:image/jpeg;base64,...';
    });
};

init();
</script>
</body>

Screenshot 2023-12-28 at 11 22 50
Screenshot 2023-12-28 at 11 25 33

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

MDN metadata

MDN page report details
  • Query: api.HTMLCanvasElement.toBlob
  • Report started: 2023-12-28T09:59:48.211Z
@queengooborg queengooborg added the data:api Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API label Dec 28, 2023
celestaria added a commit to celestaria/browser-compat-data that referenced this issue Dec 28, 2023
@celestaria
Update HTMLCanvasElement.json Safari added support for quality in 11
f88de14 
Updating `quality` in Safari to "11".

Addressing the following issue:
mdn#21770

The `quality` commit: WebKit/WebKit@d79600d
@celestaria celestaria mentioned this issue Dec 28, 2023
Merged
@celestaria
Copy link
Contributor

celestaria commented Dec 29, 2023 •
edited
Loading

There is a pr on the quality parameter added support in WebKit on Jul 17, 2017, merged two months before Safari 11's release on September 19, 2017 at: WebKit/WebKit@d79600d

Elchi3 pushed a commit that referenced this issue Jan 2, 2024
@celestaria
Update HTMLCanvasElement.json Safari added support for quality in 11 (
eaeb3f7 
#21775)

Updating `quality` in Safari to "11".

Addressing the following issue:
#21770

The `quality` commit: WebKit/WebKit@d79600d
@Elchi3
Copy link
Member

Elchi3 commented Jan 2, 2024

Fixed by #21775

@Elchi3 Elchi3 closed this as completed Jan 2, 2024
@opusonline
Copy link
Author

For your interest: I've noticed, that caniuse.com is still showing this parameter in Safari as not supported.

https://caniuse.com/mdn-api_htmlcanvaselement_toblob_quality_parameter
Screenshot 2024-01-03 at 11 26 22

@celestaria celestaria mentioned this issue Jan 3, 2024
Closed
@celestaria
Copy link
Contributor

You can file CanIUse issues here: https://github.com/Fyrd/caniuse/issues.

@opusonline
Copy link
Author

You can file CanIUse issues here: https://github.com/Fyrd/caniuse/issues.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
data:api Compat data for Web APIs. https://developer.mozilla.org/docs/Web/API
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Elchi3 @opusonline @queengooborg @celestaria