feat: add toWebp() function

bubkoo · Aug 22, 2023 · a1be0b9 · a1be0b9
1 parent d913a2e
commit a1be0b9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) =>