Add transferToImageBitmap support to make Canvas API work as an OffscreenCanvas

Author: jacobp100

lib/classes/canvas.js

@@ -5,7 +5,7 @@
 "use strict"
 
 const {RustClass, core, inspect, REPR} = require('./neon'),
-      {Image, ImageData, pixelSize} = require('./imagery'),
+      {Image, ImageBitmap, ImageData, pixelSize} = require('./imagery'),
       {toSkMatrix} = require('./geometry')
 
 class Canvas extends RustClass{
@@ -98,6 +98,10 @@ class Canvas extends RustClass{
     return `data:${mime};base64,${buffer.toString('base64')}`
   }
 
+  transferToImageBitmap(){
+    const buffer = this.toBufferSync("png");
+    return new ImageBitmap(buffer);
+  }
 
   [REPR](depth, options) {
     let {width, height, gpu, engine, pages} = this

lib/classes/imagery.js

@@ -164,6 +164,25 @@ class ImageData{
   }
 }
 
+class ImageBitmap extends Image {
+  constructor(buffer) {
+    super()
+
+    if (Buffer.isBuffer(buffer)) {
+      this.prop('data', buffer)
+    }
+  }
+
+  close() {
+    // no-op
+  }
+
+  [REPR](depth, options) {
+    let {width, height} = this
+    return `ImageBitmap ${inspect({width, height}, options)}`
+  }
+}
+
 function pixelSize(colorType){
   const bpp = ["Alpha8", "Gray8", "R8UNorm"].includes(colorType) ? 1
     : ["A16Float", "A16UNorm", "ARGB4444", "R8G8UNorm", "RGB565"].includes(colorType) ? 2
@@ -177,4 +196,4 @@ function pixelSize(colorType){
   return bpp
 }
 
-module.exports = {Image, ImageData, loadImage, loadImageData, pixelSize}
+module.exports = {Image, ImageData, ImageBitmap, loadImage, loadImageData, pixelSize}

lib/index.d.ts

@@ -153,6 +153,13 @@ export class Image extends EventEmitter {
   decode(): Promise<Image>
 }
 
+export class ImageBitmap {
+  constructor(buffer: Buffer)
+  get width(): number
+  get height(): number
+  close(): void
+}
+
 //
 // DOMMatrix
 //

lib/index.js

@@ -5,7 +5,7 @@
 "use strict"
 
 const {Canvas, CanvasGradient, CanvasPattern, CanvasTexture} = require('./classes/canvas'),
-      {Image, ImageData, loadImage, loadImageData} = require('./classes/imagery'),
+      {Image, ImageBitmap, ImageData, loadImage, loadImageData} = require('./classes/imagery'),
       {DOMPoint, DOMMatrix, DOMRect} = require('./classes/geometry'),
       {TextMetrics, FontLibrary} = require('./classes/typography'),
       {CanvasRenderingContext2D} = require('./classes/context'),
@@ -14,7 +14,7 @@ const {Canvas, CanvasGradient, CanvasPattern, CanvasTexture} = require('./classe
 
 module.exports = {
   Canvas, CanvasGradient, CanvasPattern, CanvasTexture,
-  Image, ImageData, loadImage, loadImageData,
+  Image, ImageBitmap, ImageData, loadImage, loadImageData,
   Path2D, DOMPoint, DOMMatrix, DOMRect,
   FontLibrary, TextMetrics,
   CanvasRenderingContext2D,

test/canvas.test.js

@@ -4,7 +4,7 @@ const _ = require('lodash'),
       fs = require('fs'),
       tmp = require('tmp'),
       glob = require('glob').sync,
-      {Canvas, Image} = require('../lib');
+      {Canvas, Image, ImageBitmap} = require('../lib');
 
 const BLACK = [0,0,0,255],
       WHITE = [255,255,255,255],
@@ -542,4 +542,10 @@ describe("Canvas", ()=>{
     })
   })
 
+  test('transferToImageBitmap', () => {
+    const imageBitmap = canvas.transferToImageBitmap()
+    expect(imageBitmap).toBeInstanceOf(ImageBitmap)
+    expect(imageBitmap.width).toBe(canvas.width)
+    expect(imageBitmap.height).toBe(canvas.height)
+  })
 })