Feat: restore exportImage (#3376)

* Feat: add exportImage

* Tests

Author: katspaugh

cypress/e2e/basic.cy.js

@@ -179,6 +179,38 @@ describe('WaveSurfer basic tests', () => {
     })
   })
 
+  describe('exportImage', () => {
+    it('should export an image as a data-URI', () => {
+      cy.window()
+        .then((win) => {
+          return win.wavesurfer.exportImage()
+        })
+        .then((data) => {
+          expect(data[0]).to.match(/^data:image\/png;base64,/)
+        })
+    })
+
+    it('should export an image as a JPEG data-URI', () => {
+      cy.window()
+        .then((win) => {
+          return win.wavesurfer.exportImage('image/jpeg', 0.75)
+        })
+        .then((data) => {
+          expect(data[0]).to.match(/^data:image\/jpeg;base64,/)
+        })
+    })
+
+    it('should export an image as a blob', () => {
+      cy.window()
+        .then((win) => {
+          return win.wavesurfer.exportImage('image/webp', 0.75, 'blob')
+        })
+        .then((data) => {
+          expect(data[0]).to.be.a('blob')
+        })
+    })
+  })
+
   it('should destroy wavesurfer', () => {
     cy.window().then((win) => {
       win.wavesurfer.destroy()

src/renderer.ts

@@ -644,6 +644,34 @@ class Renderer extends EventEmitter<RendererEvents> {
       this.scrollIntoView(progress, isPlaying)
     }
   }
+
+  async exportImage(format: string, quality: number, type: 'dataURL' | 'blob'): Promise<string[] | Blob[]> {
+    const canvases = this.canvasWrapper.querySelectorAll('canvas')
+    if (!canvases.length) {
+      throw new Error('No waveform data')
+    }
+
+    // Data URLs
+    if (type === 'dataURL') {
+      const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality))
+      return Promise.resolve(images)
+    }
+
+    // Blobs
+    return Promise.all(
+      Array.from(canvases).map((canvas) => {
+        return new Promise<Blob>((resolve, reject) => {
+          canvas.toBlob(
+            (blob) => {
+              blob ? resolve(blob) : reject(new Error('Could not export image'))
+            },
+            format,
+            quality,
+          )
+        })
+      }),
+    )
+  }
 }
 
 export default Renderer

src/wavesurfer.ts

@@ -470,6 +470,24 @@ class WaveSurfer extends Player<WaveSurferEvents> {
     this.initPlayerEvents()
   }
 
+  /**
+   * Export the waveform image as a data-URI or a blob.
+   *
+   * @param format The format of the exported image, can be `image/png`, `image/jpeg`, `image/webp` or any other format supported by the browser.
+   * @param quality The quality of the exported image, for `image/jpeg` or `image/webp`. Must be between 0 and 1.
+   * @param type The type of the exported image, can be `dataURL` (default) or `blob`.
+   * @returns A promise that resolves with an array of data-URLs or blobs, one for each canvas element.
+   */
+  public async exportImage(format: string, quality: number, type: 'dataURL'): Promise<string[]>
+  public async exportImage(format: string, quality: number, type: 'blob'): Promise<Blob[]>
+  public async exportImage(
+    format = 'image/png',
+    quality = 1,
+    type: 'dataURL' | 'blob' = 'dataURL',
+  ): Promise<string[] | Blob[]> {
+    return this.renderer.exportImage(format, quality, type)
+  }
+
   /** Unmount wavesurfer */
   public destroy() {
     this.emit('destroy')