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.

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

For blob image exports, allow use of `canvas.toBlob()` where available #2208

Closed
maxkfranz opened this issue Oct 29, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@maxkfranz
Copy link
Member

commented Oct 29, 2018

Issue type

Feature request

Description of new feature

When using image export functions like cy.png(), it would be nice to use canvas.toBlob() if the browser has the function available.

  • Chrome (50+), though mobile may be limited
  • Firefox (25+)
  • Safari, though mobile may be limited
  • Edge (possibly supported, partially supported by canvas.msToBlob())
  • IE (partially supported by canvas.msToBlob()

Note that this would require new API, as canvas.toBlob() is asynchronous, whereas cy.png() and cy.jpg() are synchronous: cy.png({ output: 'blob-promise' })

Motivation for new feature

These items would be nice, but it seems that the browsers don't actually provide these benefits in practice:

  • Faster speed for downloads than using a base 64 export as a intermediary format.
  • Bigger exported images (file size). Base 64 URIs have different size limitations on different browsers.

These items are confirmed benefits:

  • Non-blocking blob generation. This allows for keeping the UI responsive while the download is happening in the background.

@maxkfranz maxkfranz added this to the 3.4.0 milestone Oct 29, 2018

@maxkfranz maxkfranz changed the title For image exports of `output: 'blob'`, use `canvas.toBlob()` where available For blob image exports, use `canvas.toBlob()` where available Oct 29, 2018

@maxkfranz maxkfranz modified the milestones: 3.4.0, future Dec 4, 2018

maxkfranz added a commit that referenced this issue Dec 5, 2018

Add support for png and jpg exports with option `output: 'blob-promise'`
- This doesn't seem to improve the image size limits of the browsers.  For PNG: Safari and Chrome handle around 16,000 x 16,000 images, while Firefox handles around 10,000 x 10,000 images.  This is unchanged from the manually-generated blob from base 64.
- This does not seem to speed up image exports for blobs.  However, the promise option does not block the main browser execution thread.  This could be useful for showing a loading spinner icon while the blob is being generated.
- Add tests to the test page for exporting png.  Include FileSaver.js in the debug page for testing that downloads work properly.

Ref : For blob image exports, use `canvas.toBlob()` where available #2208

@maxkfranz maxkfranz self-assigned this Dec 5, 2018

@maxkfranz maxkfranz modified the milestones: future, 3.4.0 Dec 21, 2018

@maxkfranz maxkfranz changed the title For blob image exports, use `canvas.toBlob()` where available For blob image exports, allow use of `canvas.toBlob()` where available Jan 15, 2019

maxkfranz added a commit that referenced this issue Jan 15, 2019

@maxkfranz maxkfranz closed this Jan 15, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.