Skip to content

feat(webp): WebP Image Export Implementation #530

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

dodok8
Copy link

@dodok8 dodok8 commented May 14, 2025

Description

This PR implements WebP image export functionality by adding a new toWebp function to the library. The implementation includes:

  1. A new toWebp function that converts HTML nodes to WebP images
  2. Support for quality parameter configuration for WebP compression
  3. Comprehensive unit tests for the newly added functionality
  4. Documentation updates to help users utilize the WebP export feature

Motivation and Context

WebP is a modern image format that offers superior compression while maintaining good quality, making it widely adopted across the web. This PR addresses the feature request in issue #465 to add native WebP support to the library.

While users could previously work around this limitation using toBlob with { type: "image/webp" }, the new dedicated toWebp function provides a more convenient and intuitive API for WebP exports, consistent with other format-specific functions in the library.

Usage example:

// Basic usage
toWebp(node).then(dataUrl => console.log(dataUrl));

// With quality option (0-1)
toWebp(node, { quality: 0.8 }).then(dataUrl => console.log(dataUrl));

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

dodok8 added 3 commits May 15, 2025 00:13
This commit introduces unit tests for the toWebp function.
The tests cover:
- Basic WebP image generation from an HTML node.
- WebP image generation with a specified quality parameter.

Associated test image resources (image-webp and image-webp-low)
have also been added to support these test cases.
This commit introduces the `toWebp` function.

Closes bubkoo#465
This commit adds documentation for the newly implemented `toWebp` function.

This will help users understand how to utilize the WebP export functionality.
@biiibooo
Copy link
Contributor

biiibooo bot commented May 14, 2025

👋 @dodok8

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

  • fix: don't overwrite prevent_default if default wasn't prevented
  • feat: add graph.scale() method
  • docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

  • Follow the TypeScript coding style.
  • Run npm run lint locally to catch formatting errors earlier.
  • Document any user-facing changes you've made.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

Copy link

codecov bot commented May 14, 2025

Codecov Report

Attention: Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 66.50%. Comparing base (d9b2fcf) to head (9533161).
Report is 3 commits behind head on master.

Files with missing lines Patch % Lines
src/index.ts 80.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##           master     #530   +/-   ##
=======================================
  Coverage   66.50%   66.50%           
=======================================
  Files          10       10           
  Lines         612      612           
  Branches      150      150           
=======================================
  Hits          407      407           
  Misses        144      144           
  Partials       61       61           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dodok8 dodok8 changed the title WebP Image Export Implementation feat(webp): WebP Image Export Implementation May 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant