From d50bcf7e5f483080cb1102df3e68312d5d21100b Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Thu, 15 May 2025 00:13:56 +0900 Subject: [PATCH 1/3] test(webp): add tests for WebP image generation 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. --- test/resources/small/image-webp | 1 + test/resources/small/image-webp-low | 1 + test/spec/basic.spec.ts | 16 ++++++++++++++++ 3 files changed, 18 insertions(+) create mode 100644 test/resources/small/image-webp create mode 100644 test/resources/small/image-webp-low diff --git a/test/resources/small/image-webp b/test/resources/small/image-webp new file mode 100644 index 00000000..3ca12a00 --- /dev/null +++ b/test/resources/small/image-webp @@ -0,0 +1 @@ +data:image/webp;base64,UklGRlgCAABXRUJQVlA4WAoAAAAgAAAAYwAACAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDhMaQAAAC9jAAIAHyAQIFOG1BgiEEgC2l9kIQEJkUH+DzHI/Ac+dExwFUmSFXXgsdGDCUykCZzRv/cwENF/hUkbMN19BQAAwLtt27Zt27Zt2x4AAABfnLNt27Zt27Zt297/OEeSJEmSJEmSJLk+DwA= diff --git a/test/resources/small/image-webp-low b/test/resources/small/image-webp-low new file mode 100644 index 00000000..1ff4dcb9 --- /dev/null +++ b/test/resources/small/image-webp-low @@ -0,0 +1 @@ +data:image/webp;base64,UklGRngCAABXRUJQVlA4WAoAAAAgAAAAYwAACAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggigAAABAFAJ0BKmQACQA+0VqlTaglIyIkjqkAGgloANHbwjGeCgev+ARF+fOFzxKD0wjQRUAA/sd3rx8E2nJkPAq7j4/xFGrYoTK52SsjW+DJg+zU81x/3/AydGLZghR0AeqBN40JRAppyC7I9DtGHgGsX9FSdiac6/M7pyKXurrXFus5ZWGGbtDdzkAAAA== diff --git a/test/spec/basic.spec.ts b/test/spec/basic.spec.ts index 4d4fe53d..2a699275 100644 --- a/test/spec/basic.spec.ts +++ b/test/spec/basic.spec.ts @@ -63,6 +63,22 @@ describe('basic usage', () => { .catch(done) }) + it('should render to webp', (done) => { + bootstrap('small/node.html', 'small/style.css', 'small/image-webp') + .then((node) => htmlToImage.toWebp(node)) + .then(check) + .then(done) + .catch(done) + }) + + it('should use quality parameter when rendering to webp', (done) => { + bootstrap('small/node.html', 'small/style.css', 'small/image-webp-low') + .then((node) => htmlToImage.toJpeg(node, { quality: 0.5 })) + .then(check) + .then(done) + .catch(done) + }) + it('should convert an element to an array of pixels', (done) => { bootstrap('pixeldata/node.html', 'pixeldata/style.css') .then((node) => From 7b47086a1f8649010fe43e2e4cc898c43c3456e9 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Thu, 15 May 2025 00:18:23 +0900 Subject: [PATCH 2/3] feat(webp): implement toWebp function for WebP image conversion This commit introduces the `toWebp` function. Closes #465 --- src/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/index.ts b/src/index.ts index 2de59a30..2211b19f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -84,6 +84,14 @@ export async function toJpeg( return canvas.toDataURL('image/jpeg', options.quality || 1) } +export async function toWebp( + node: T, + options: Options = {}, +): Promise { + const canvas = await toCanvas(node, options) + return canvas.toDataURL('image/webp', options.quality || 1) +} + export async function toBlob( node: T, options: Options = {}, From 9533161fb74fd1ee9262c26cf153006976259aa8 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Thu, 15 May 2025 00:22:26 +0900 Subject: [PATCH 3/3] docs(webp): add documentation for toWebp function This commit adds documentation for the newly implemented `toWebp` function. This will help users understand how to utilize the WebP export functionality. --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index a18a2a8b..eca47e04 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ All the top level functions accept DOM node and rendering options, and return a - [toPng](#toPng) - [toSvg](#toSvg) - [toJpeg](#toJpeg) +- [toWebp](#toWebp) - [toBlob](#toBlob) - [toCanvas](#toCanvas) - [toPixelData](#toPixelData) @@ -102,6 +103,20 @@ htmlToImage }); ``` +#### toWebp +Save and download a compressed WebP image: + +```js +htmlToImage + .toWebp(document.getElementById('my-node'), { quality: 0.95 }) + .then(function (dataUrl) { + var link = document.createElement('a'); + link.download = 'my-image-name.jpeg'; + link.href = dataUrl; + link.click(); + }); +``` + #### toBlob Get a PNG image blob and download it (using [FileSaver](https://github.com/eligrey/FileSaver.js)):