From a1be0b959b4f93f8d9a32d7ab68e58ee72f3f17e Mon Sep 17 00:00:00 2001
From: StyleShit <evyatar.daud@gmail.com>
Date: Tue, 22 Aug 2023 21:36:34 +0300
Subject: [PATCH] feat: add `toWebp()` function

---
 README.md                           | 14 ++++++++++++++
 src/index.ts                        |  8 ++++++++
 test/resources/small/image-webp     |  1 +
 test/resources/small/image-webp-low |  1 +
 test/spec/basic.spec.ts             | 16 ++++++++++++++++
 5 files changed, 40 insertions(+)
 create mode 100644 test/resources/small/image-webp
 create mode 100644 test/resources/small/image-webp-low

diff --git a/README.md b/README.md
index 782d2525..d2ed917e 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)
@@ -100,6 +101,19 @@ htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
   });
 ```
 
+#### 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)):
 
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<T extends HTMLElement>(
   return canvas.toDataURL('image/jpeg', options.quality || 1)
 }
 
+export async function toWebp<T extends HTMLElement>(
+  node: T,
+  options: Options = {},
+): Promise<string> {
+  const canvas = await toCanvas(node, options)
+  return canvas.toDataURL('image/webp', options.quality || 1)
+}
+
 export async function toBlob<T extends HTMLElement>(
   node: T,
   options: Options = {},
diff --git a/test/resources/small/image-webp b/test/resources/small/image-webp
new file mode 100644
index 00000000..df491b98
--- /dev/null
+++ b/test/resources/small/image-webp
@@ -0,0 +1 @@
+data:image/webp;base64,UklGRlgCAABXRUJQVlA4WAoAAAAgAAAAYwAACAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDhMaQAAAC9jAAIAHyAQIFOG1BgiEEgC2l9kIQEJkUH+DzHI/Ac+dExwFUmSFXXgsdGDCUykCZzRv/cwENF/hUkbMN19BQAAwLtt27Zt27Zt2x4AAABfnLNt27Zt27Zt297/OEeSJEmSJEmSJLk+DwA=
\ No newline at end of file
diff --git a/test/resources/small/image-webp-low b/test/resources/small/image-webp-low
new file mode 100644
index 00000000..c0c3d8c2
--- /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==
\ No newline at end of file
diff --git a/test/spec/basic.spec.ts b/test/spec/basic.spec.ts
index 4d4fe53d..7e567027 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.toWebp(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) =>